CSS 기본적인 셀렉터
CSS를 별도의 파일로 분리하지 않고, HTML 태그에 직접 CSS 속성을 추가하는 방법도 있습니다. 그러나 하나에 집중하기 위해 파일이나 구간을 구분하는 관심사 분리 측면에서 권장하지 않습니다. 관심사 분리를 여기에 적용하면 HTML 파일에서는 웹 페이지의 구조만 신경쓰고, CSS 파일에서는 디자인만 신경쓸 수 있도록 구현하는 걸 말합니다. 가끔은 파일로 굳이 구분하지 않아도 될만큼 적은 CSS를 사용하는 경우도 있습니다. 이런 특수한 경우를 위해, 직접 CSS 속성을 추가하는 방법은 함께 안내하니 참고하기 바랍니다.
CSS 스타일을 적용할 수 있는 방법은 3가지가 있습니다. 그 방법은 같은 줄에서 스타일을 적용하는 인라인 스타일, CSS 파일 내에 작성하는 내용을 별도의 파일로 구분하지 않고 style태그 내에 작성하는 내부 스타일 시트, 그리고 앞서 설명한 외부 스타일 시트입니다. 아래의 예제는 세 가지 방법 중 인라인 스타일에 해당합니다.
<nav style="background: #eee; color: blue">...</nav> //CSS 스타일 적용법 중 인라인 스타일
기본적인 셀렉터 (selector)
id로 이름 붙여서 스타일링 적용하기
위에서 작성해본 HTML 문서에는 <h4>나 <p> 요소(element)가 여럿 존재합니다. navigation section 아래에 있는 <h4> 요소에만 색을 바꾸려면 어떻게 해야 할까요? h4 요소는 하나의 태그이기때문에 태그를 선택해 색상을 변경할 수 있습니다.
h4 { color: red; } h4 태그의 색상을 변경
문서를 다시 살펴보면, navigation section에만 적용하려고 했던 의도와는 달리, aside section의 <h4> 요소에도 변경한 색상이 적용됐습니다. navigation section 아래의 <h4> 요소를 정확하게 선택하기 위해서는 이 엘리먼트에 id를 붙여서 해결할 수 있습니다. 이름을 붙일 때에는 가능한 의미를 담아서 구분할 수 있도록 합니다. id가 있는 요소를 선택할 때에는 #기호를 이용합니다. id는 하나의 문서에서 한 요소에만 사용해야 합니다.
<h4 id="navigation-title">This is the navigation section.</h4>// h4 요소에 id를 붙입니다.
#navigation-title {
color: red;
} // id로 요소를 선택해 스타일링합니다.
class로 스타일을 분류하여 적용하기
id와 유사하게 특정 요소에 class를 지정하는 방법도 있습니다. 이번에는 navigation section의 <li> 요소와 footer의 <li> 요소를 구분합니다. 가장 먼저 시도했던 태그를 선택하는 방법으로 <li> 요소를 스타일링합니다. 이 과정은 반복학습을 위한 과정이니 가능하면 따라해보세요.
li {
text-decoration: underline;
}// li 요소에 밑줄을 칩니다.
이번에도 의도와는 다르게 footer에 있는 <li> 요소에도 스타일링이 적용되었습니다. 그러나 앞서 id는 한 문서에서 한 번만 사용할 수 있다고 안내하였습니다. 만약 다음 예제는 navigation section의 모든 <li> 요소에 id를 추가하고 CSS를 적용했습니다. 이 예제는 id를 잘못 사용한 예제입니다. id는 문서 내에 단 하나의 요소에만 적용할 수 있는 유일한 이름이어야 합니다.
<!-- 잘못된 예제 -->
<ul>
<li id="menu-item">Home</li>
<li id="menu-item">Mac</li>
<li id="menu-item">iPhone</li>
<li id="menu-item">iPad</li>
</ul>
//잘못된 id의 사용
동일한 기능을 하는 CSS를 여러 요소에 적용하기 위해서 class를 사용합니다. navigation section의 모든 li요소에 동일한 class를 추가하면, 동일한 스타일을 여러 엘리먼트에 적용할 수 있습니다. class는 #이 아닌 .을 이용해 선택합니다.
<!-- 바른 예제 -->
<ul>
<li class="menu-item">Home</li>
<li class="menu-item">Mac</li>
<li class="menu-item">iPhone</li>
<li class="menu-item">iPad</li>
</ul>[코드] 여러 요소에 같은 스타일링을 적용하기 위해서는 class를 사용합니다..
menu-item {
text-decoration: underline;
} //class menu-item을 선택하여 밑줄을 적용합니다.
여러 개의 class를 하나의 엘리먼트에 적용하기
바로 위 예제에서, 하나의 class를 여러 요소에 적용했습니다. 이번에는 반대로, 여러 class를 하나의 요소에 적용합니다. 여러 class를 하나의 요소에 적용하기 위해서는, 공백으로 적용하려는 class의 이름을 분리합니다. 다음 예제를 통해 <li> 요소에 적용된 여러 class 중에서 selected class를 통해 적용된 내용을 확인할 수 있습니다.
* 요소를 만들거나, 요소에 스타일링을 적용할 때에는 항상 이름과 목적이 일치하는지 잘 살펴보세요.
<li class="menu-item selected">Home</li>//하나의 요소에 여러 class를 적용하는 방법
.selected {
font-weight: bold; color: #009999;
}//특정 클래스(selected)를 통해 요소를 스타일링하는 모습
마무리
* id와 class의 차이점을 반드시 기억하세요.
idclass
| #으로 선택 | .으로 선택 |
| 한 문서에 단 하나의 요소에만 적용 | 동일한 값을 갖는 요소 많음 |
| 특정 요소에 이름을 붙이는 데 사용 | 스타일의 분류(classification)에 사용 |