요소호출
CSS를 적용하기 위해 요소를 선택해야 합니다. 주로 요소를 DOM구조로 선택을 합니다. 허나 구조가 점점 복잡해 진다면 DOM구조로 특정 요소를 선택하는 것이 어려워지기 때문에 요소에 이름을 정해 선택합니다.
이름을 정하는 방식은 크게 class 와 id가 있습니다.
class
/*예시*/
<head>
<style>
.wrap {width: 1200px;}
/*div.wrap {width: 1200px;}으로 표현 가능*/
.wrap h3 { background: #f00;}
.wrap p { background: #00f;}
</style>
</head>
<body>
<div class="wrap">
<h3>너비 1200px 사이즈의 자식요소<h3/>
</div>
<div class="wrap"> /* 클래스명 중복 가능 */
<p>너비 1200px 사이즈의 자식요소<p/>
</div>
</body>class attribute
요소에 클래스명을 지정하는 방법은 class 속성을 적용 후 따옴표안에 속성값(value; 클래스명)을 넣으면 됩니다.
.(class selector)
CSS로 클래스 지정시 .(class selector)을 붙혀 요소를 지정할 수 있으며 요소명과 같이 적으면 좀 더 명확하게 요소를 선택할 수 있습니다.
class → 중복사용 가능
클래스는 여러 요소의 속성으로 적용가능합니다. 그래서 중복되는 css 속성을 클래스에 적용하여 요소에 클래스명만 적으면 편리하게 사용가능합니다.
id
/*예시*/
<head>
<style>
/* common (공통요소)*/
.wrap {width: 1200px;}
/* content */
#main {background:rgba(0,0,0,0.3)}
#main .wrap h3 { background: #f00;}
/*.wrap -> div.wrap 으로 표현 가능*/
#main_2 {background:rgba(0,0,0,0.5)}
#main_2 .wrap p { background: #00f;}
#point { border:1px solid #ff0 }
</style>
</head>
<body>
<section id="main">
<div class="wrap">
<h3>너비 1200px 사이즈의 자식요소</h3>
</div>
</section>
<section id="main_2"> /*id명은 중복사용 불가*/
<div class="wrap" id="point"> /* 한 요소에 모두 사용가능*/
<p>너비 1200px 사이즈의 자식요소</p>
</div>
</section>
</body>id attribute
사용방법은 클래스와 동일
#(id selector)
CSS 선택시 # 사용합니다.
id 속성값 중복 불가
CSS에서 사용은 클래스와 동일하게 여러번 선언할 수 있습니다.
하지만 요소의 id속성의 속성값 중복은 안됩니다.
한 요소에 id 속성과 class 속성을 같이 적용할 수 있습니다.
프라다 신은 빈지노와 쿠페를 타는 꿈을 꿨다.