CSS는 Cascading Style Sheet의 약자이다.
HTML로 웹 문서의 골격을 만들고, CSS로 옷을 입힌다.
색상이자 정렬, 레이아웃, 기타 등등 많은 부분을 CSS를 이용하므로, 중요한 부분이다.
CSS를 사용하는 이유
- 웹 문서의 내용과 디자인을 분리한다.
문서는 HTML로 디자인은 CSS로 코딩한다.
- 다양한 매체에 적합한 문서를 만들 수 있다.
HTML 내용은 그대로 두고 CSS를 바꾸는것만으로 모바일, 웹 등에 대응할 수 있다.
스타일의 형식
p {
color:blue;
}
선택자 {
속성:속성값; /*주석*/
...
}
여러 속성을 적용할 때는 세미콜론(;)으로 구분한다.
주석을 사용하고 싶을 때는 /* */ 를 이용한다.
해당 태그를 사용하는 모든 곳에 속성이 적용된다.
스타일정보를 기록해두는 방법은 두가지이다.
스타일 정보는 웹 문서에 적용되어야 하기 때문에 <head>, </head> 태그 안에 정의해야 한다.
내부 스타일시트 : 헤드 태그 내에 <style>, </style> 태그 사이에 스타일 규칙을 기록한다.
외부 스타일시트 : 별도의 파일에 스타일 정보를 지정하고 해당 파일을 링크시킨다. 파일 확장명은 css를 사용하며, 링크는 아래와 같이 사용한다.
<link href="외부 스타일 파일 경로" rel="stylesheet" type=text/css">
스타일은 상속된다.
부모요소에 스타일을 지정하면 자식요소에도 적용된다. 이를 스타일 상속이라 하며, CSS 약자의 첫번째인 Cascading의 의미가 계단식 이라는것도 부모 요소부터 자식요소로 단계별로 스타일이 적용되기 때문이다.
하지만 배경이색나, 배경이미지 같은 속성은 상속되지 않는다.
같은 요소에 적용된 스타일이 여러개일경우 가장 나중에 정의한 스타일이 적용된다.
여기서 스타일 규칙에 !important를 추가하면 가장 높은 우선순위를 갖게된다.
CSS3와 브라우저 접두사
아직까지 CSS3 표준 규약이 완성되지 않아 브라우저별로 적용 가능한 속성들이 다르다.
이 때, 접두사를 사용하여 스타일시트 속성을 지정해두면, 모든 브라우저에서 똑같은 결과를 낼 수 있다.
-webkit- : 웹키트 방식 브라우저용 (사파리, 크롬 등)
-moz- : 게코 방식 브라우저용 (모질라, 파이어폭스 등)
-o- : 오페라 브라우저
-ms- : 마이크로소프트 인터넷 익스플로러
ex.
.testclass {
transform: rotate(15deg);
-webkit-transform: rotate(15deg);
-moz-transform: rotate(15deg);
-o-transform: rotate(15deg);
-ms-transform: rotate(15deg);
}
'Programming' 카테고리의 다른 글
| HTML5+CSS3 - 스타일시트 속성 선택자 (0) | 2016.09.03 |
|---|---|
| HTML5+CSS3 - 스타일시트 선택자 (0) | 2016.09.03 |
| HTML5+CSS3 - 폼 관련 태그 (0) | 2016.09.03 |
| HTML5+CSS3 - 멀티미디어 관련 태그 (0) | 2016.09.03 |
| HTML5+CSS3 - 이미지 관련 태그 (0) | 2016.09.03 |