| [ CSS의 기본문법 ]
- Style 명령은 대,소문자를 구분하지 않습니다.
- Style 태그는 HTML의 <HEAD> 부분에서 정의하고, 각 태그에 적용할 때는 style속성을 사용합니다.
- 지정할 속성값들은 모두 { }로 묶어줍니다.
- 속성과 속성값은 콜론(:)으로 구분하고, 속성과 속성값은 세미콜론(;)으로 구분합니다.
- 마지막에는 반드시 세미콜론(;)을 붙여주는 것이 안전합니다.
▣ CSS의 주요문법
CSS는 style 태그를 사용해서 html문서의 head 부분에 포함시켜 사용할 수 있으며, 별도의 css 파일로 저장하면 여러 html 문서에서 불러와서 사용할 수 있으므로 편리합니다.
CSS를 지정할 때에는 복잡하지는 않지만 기본적으로 알아야 할 몇 가지 지정형식이 있습니다. 예제를 다뤄보기 전에 먼저 이러한 지정방식을 알아두어야 합니다.
▧ 동시지정(Grouping) 복수의 엘레멘트를 한번에 같은 스타일로 지정할 수 있습니다. | H1, H2, H5 {color: darkgreen;} | H1, H2, H5 태그에 대해 모두 짙은녹색으로 처리하게 됩니다.
▧ 중요표시 (Important) 중요하다는 표시로 어떤 경우에나 사용할 수 있습니다. | H1 {color: red ! important;} |
▧ 화면표시(Display)
- block : 줄 나누기를 합니다.
- inline: 줄 나누기를 하지 않습니다.
- list-item: 줄 나누기를 하지 않고 목록 표시가 추가됩니다.
- none: 숨겨줍니다.
▧ 주석(Comments)
| /* 참고할 내용 (브라우저에 출력되지 않음) */ |
▣ 선택자의 사용법
<HEAD>부분에서 <STYLE> 태그를 지정할 때 선택자를 표시하는 방법에는 여러 가지가 있습니다. ▶ 클래스를 지정해 주는 경우, "."다음에 clas 이름을 지정해 주며 이때에는 <BODY>
부분에서 적용시킬 때는 "class=ex1" 식으로 호출을 해 주어야 합니다.
▶ 특정태그에만 적용할 경우에는 태그를 적어주면 자동으로 적용됩니다.
모든 <H1> 태그에 지정값(글자색이 파란색)이 적용됩니다.
▶ 내부태그를 함께 적어주면 내부태그가 포함된 경우에만 적용됩니다.
| H2 B {font-style:italic;} |
<H2> 태그안에 <B> 태그를 사용하였을 경우에만 지정값(기울임체)이 적용됩니다.
▶ ID속성은 class 속성과 비슷하지만, ID는 한 문서에 하나만 존재해야 합니다.
이 때에는 <BODY>에서 사용할 때에는 "class=클래스이름"이 아니라 "id=ex2"처럼 호출해서 사용해야 합니다.
| 
0 분
2 분
