1. CSS 선택자(Selector)란?
특정 태그를 선택하여, 해당 태그의 스타일을 변경할 수 있게 하는 목적으로 사용한다.
기본적으로 header태그안에 style태그를 선언. style태그안에 CSS를 선언해서 스타일을 적용시킨다.
- 시작 중괄호 "{" 가 나오기 전의 부분 모두가 선택자
- HTML안의 특정 태그들을 선언해서 {}안의 내용(스타일)을 적용.
- 같은 선택자에 CSS속성을 적용시켰을 경우 나중에 정의된 스타일이 적용된다.(덮어쓰기)
2.선택자 종류
선택자를 혼합해서 사용하는 것이 중요하다.
2-1. 전체 선택자(* 선택자)
* {
color: navy;
background: rgb(255, 180, 205);
}- HTML페이지의 모든 요소(태그)에 같은 CSS속성을 적용시킨다. margin이나 padding값을 초기화하는 등 기본값을 정해둘 때 사용한다.
2-2. 태그 선택자
p {
font-weight: bold;
color: crimson;
}- 특정 태그를 선택하여 CSS속성을 적용시킬 수 있는 가장 간단한 선택자이다.
2-3. 클래스 선택자(.class)
HTML
<li class="menu">menu1</li>
CSS
.menu { color: red; font-weight: bold; font-size: 30px;; }
- .class명으로 특정HTML요소에 CSS속성을 적용시킨다.
- 클래스명은 중복시킬 수 있으므로, 같은 클래스명을 지정한 복수의 HTML요소를 한번에 같은CSS속성 적용시킬 수 있다.
2-4. id선택자
HTML
<div id="footer"> <h1>FOOTER</h1> </div>
CSS
#footer { background-color: blue; }
- #id명으로 특정 HTML요소에 CSS속성을 적용시킨다.
- id명은 중복시킬 수 없으므로, 하나의HTML안에 하나의id명.
2-5. 그룹 선택자
h2 { color: navy; }
h2, h3 { text-align: center; }
h2, h3, p { background-color: lightgray; }- 쉼표(,)로 구분하여 그룹으로 CSS속성 적용시킬 수 있다.
3. 시멘틱(Semantic) 태그
HTML의 구조를 설계하는데 있어 태그의 의미를 부여하므로써, 사이트의 구조를 파악하기 용이할 수 있도록 도와주기 위해 만들어진 태그.
HTML5 이전에는 구조를 구분하기 위하여 div태그에 id 또는 클래스 등으로 구분하며 구조를 설계했으나, 시멘틱 태그의 등장으로 인하여 좀 더 명시적이면서도 직관적인 구조의 설계가 가능해졌다.
4. class 와 id 선택자 사용방법
- #(아이디)는 .(클래스)보다 상위 선택자.
- 동일 요소에 class와 id 중복 정의 시, id 스타일이 우선 적용됨.
- すべてのスタイルはclass属性を使って適用すると考えておけば問題はないが、必要に応じてid属性をを使うと良い。
- id属性を使うことで、重複しない特定の部分だけに限定した装飾であると簡単に把握することができる。
5. px 과 em 의 차이는? (font)
CSS단위로는 절대 단위, 상대 단위가 존대한다.
✔px
- 절대 단위, 고정적
- 모니터에 따라 상대적인 크기를 가짐. 모니터가 바뀌지 않은 한 절대적인 고정값.
- 반응형 웹에는 적절하지 않음.
✔em
- 상대 단위
- 기본 웹 브라우저의 디폴트 글 크기는 16px.
- 다폴트, 상위 요소의 폰트 사이즈를 기준으로 크기를 정한다.
