HTML+CSS 기초 강의 - 24. CSS 선택자 기초 1 - CSS 클래스 이름 규칙
CSS를 정의하고 사용하는데 있어서 가장 중요한 부분입니다.
CSS 선택자를 얼마나 잘 이해하고 사용하는지에 따라 CSS 작성 분량이 달라지고 HTML 문서가 렌더링되는 속도도 차이나게 됩니다.
기본적인 개념을 잘 이해해서 최적화된 CSS 작성을 할 수 있
클래스 이름 규칙
클래스 이름에는 영문 대소문자([a-zA-Z]), 그리고 숫자([0-9])만 사용 가능합니다.
ISO10646 일부 문자도 사용할 수 있지만 사용하지 않는 것을 권장합니다. 실제로 거의 사용되지 않으며, 개인적으로는도 사용하지 말 것을 추천합니다.
하이픈(-), 언더스코어/언더바(_)를 사용할 수 있습니다.
숫자와 이중하이픈(--)은 첫글자로 올 수 없습니다. 이중하이픈은 CSS 예약어입니다.
숫자 뒤 하이픈으로 시작하는 이름도 사용할 수 없습니다.
이스케이프한 문자를 사용할 수 있습니다. , ISO 10646 문자와 마찬가지로 사용하지 않는게 좋습니다.
*
특별한 경우가 아니면 전역 루트는 사용하지 않는 것이 좋습니다. 모든 태그에 대해 전역으로 속성을 지정하는 태그입니다.
*{ font-size:12px; padding:0; margin:0;}
이렇게 하면 문서 안의 모든 태그에 대해 마진과 패딩을 0으로 지정하고, 글꼴 크기를 12px로 리셋합니다.
문서 크기가 작으면 별 문제 안되지만 문서 크기가 클 경우 페이지 렌더링이 느려지는 원인이 됩니다.
사용해야할 경우
ul li *#photo-container *
와 같이 부모 클래스를 한정해서 최소한으로 적용 범위가 줄어들도록 해야 합니다.
.클래스이름
클래스 이름으로 CSS 속성들을 정의해 태그에 사용합니다.
클래스 이름은 반드시 "." 으로 시작해야 합니다.
클래스를 태그에 사용할 때는 "class" 속성을 이용해 지정합니다.
태그에 클래스를 적용할 때는 여러 클래스명을 공백으로 띄어 지정해 여러 클래스의 속성을 모두 상속받을 수 있습니다.
.bodytext{font-size:12pt}.area_article{margin:20px;padding:0}.footer-container{font-size:1.2em;margin-bottom:20px;}.aside13{left:0;top:0;width:200px;}
이런식으로 클래스 이름을 정의해 사용할 수 있습니다.
클래스를 태그에 사용할 때는 다음과 같이 사용할 수 있습니다.
<p class="basetext inner-paragraph">내용</p>
여러 클래스에 같은 속성을 부여하려면 쉼표로 클래스들 나열해서 속성을 부여하면 됩니다.
<p class="basetext inner-paragraph">내용</p>
#요소ID
태그에 지정된 ID값(Identifier) 으로 CSS 속성을 정의합니다.
태그에 별도의 클래스를 지정할 필요는 없으며 CSS 속성 정의만으로 자동으로 해당 ID의 태그에 CSS 속성이 적용됩니다.
예를들어
#sidebar3{padding:0;margin:0}
으로 지정했다면
<div id="sidebar3">...</div>
은 마진과 패딩이 0으로 지정됩니다.
태그명 [태그명]
태그이름으로 CSS 속성을 부여하면 문서 안의 모든 태그에 CSS 속성이 적용됩니다.
예를들어
div{padding:0;margin:0}
이렇게 적용합니다.
여러 태그에 한꺼번에 같은 속성을 적용하려면 쉼표로 구분해 여러개의 태그를 나열하면 됩니다.
div, p, span{font-size:12px}
하위선택자(Descendent Combinator)
클래스, 또는 태그를 공백으로 분리해 순서대로 붙이게 되면 CSS 속성을 정의하는 범위를 한정할 수 있습니다.
예를 들어
li a {color:#a00}
으로 클래스를 정의하면
순서없는 목록의 각 아이템 안에 있는 링크만 컬러 속성(color:#a00)을 적용합니다.
<ul> <li><a>링크1</a></li> <li><a>링크2</a></li></ul><a>링크3</a>
이런 섹션이 있다면 링크1, 링크2에는 컬러속성 "color:#a00" 이 적용되지만 링크3에는 적용되지 않습니다.
이것처럼 태그나 클래스를 순서대로 배치해 CSS 속성이 적용되는 범위를 한정함으로써 원하는 태그, 또는 영역에만 속성을 적용할 수 있습니다.