PAYJAY의 코드 메모장

미디어 쿼리는 css3 모듈 중 하나로 사이트에 접속하는 장치에 따라 특정한 CSS 스타일을 사용하도록 해준다. 미디어 쿼리를 이용한 사이트는 다른 기기로 접속할 때마다 레이아웃이 바뀐다.

사용자가 어떤 미디어를 사용하는가에 따라 사이트의 형태가 바뀌도록 CSS를 작성하는 것을 미디어 쿼리라고 한다.

<미디어 쿼리 구문>

@media [only | not] 미디어 유형 [and 조건] * [and 조건]

<style> 태그 사이에 사용하며 대소문자를 구분하지 않는다.

ex)

@media screen and (min-width:200px) and (max-width:500px){

           …

}

미디어 유형은 screen이며 최소 너비 200px이고 최대 너비가 500px일 때 적용한 CSS를 정의한다.

<style>

Body{

           <!-- 문서 기본 배경 -->

           Background: url(images/bg0/jpg) no-repeat fixed;

           Background-size: cover;

}

@media screen and (max-width:1024px){

<!-- 화면 너비가 1024px 이하일 때 배경 -->

           Background: url(images/bg1/jpg) no-repeat fixed;

           Background-size: cover;

}

@media screen and (max-width:768px){

<!-- 화면 너비가 768px 이하일 때 배경 -->

           Background: url(images/bg2/jpg) no-repeat fixed;

           Background-size: cover;

}

@media screen and (max-width:320px){

<!-- 화면 너비가 320px 이하일 때 배경 -->

           Background: url(images/bg3/jpg) no-repeat fixed;

           Background-size: cover;

}

</style>

CSS

CSS란 Cascading Style Sheet의 약자

CSS는 HTML 요소들이 각종 미디어에서 어떻게 보이는가를정의하는데 사용되는 스타일 시트 언어이다. 대부분의 웹 브라우저들은 모두 CSS를 지원한다.

CSS 사용 이유

HTML은 문서 구조를 표현하기에 적합한 마크업 언어라서 화면상에 컨텐츠를 깔끔하게 보여주기에 한계가 있다.

CSS를 사용하면 HTML에서 지원하지 않는 다양한 스타일의 표현이 가능하다.

작업의 효율성 향상

CSS를 사용하면 문서의 컨텐츠와 스타일을 분리할 수 있다. 웹 페이지의 스타일을 별도의 파일로 저장할 수 있게 해주므로 사이트의 전체 스타일을 손쉽게 제어할 수 있다.

또한 웹 사이트의 스타일을 일관성 있게 유지할 수 있게 해주면 그에 따른 유지 보수 또한 쉬워진다.

(출처: DevKuma)

Html 태그에 글자색을 바꿀수있따

글자의 정렬방식

배경색 지정

이미지 지정

사용의 편의성과 일괄성

Html 문서가 등장한 목적은 간단하고 빠르게 인터넷 상에 정보를 공유할 수 있는 문서를 만드는 것

[문법]

<style>

           선택자{속성: 속성값; 속성: 속성값;}

</ style >

인라인 스타일

태그에 직접 스타일 지정

하나의 태그에만 원하는 스타일 지정

같은 스타일을 사용하는 태그가 많으면 코드가 많아짐