선택자
html의 어떤 태그를 선택할지 규정하는 문법
- 기본 사용 방법
selector { property : value; }
종류
| 종류 | 의미 |
|---|---|
| 태그 선택자 | 지정한 모든 태그에 속성 지정 |
| 아이디 선택자 | 해당 아이디값에 속하는 요소에만 속성 지정, 엘리먼트의 아이디값은 고유, 여러개의 아이디 값을가질 수 없음 |
| 클래스 선택자 | 해당 클래스에 속하는 요소에만 속성 지정, 다른 엘리먼트가 같은 클래스를 가질 수 있고, 한개의 엘리먼트가 여러개의 클래스를 가질 수 있음 |
| 자식 선택자 | 부모 자식 순으로 지정 |
<ul>
<li class="a">html</li>
<li id="b">css</li>
<li id="c">javascript</li>
</ul>li{
background-color: yellow;
}
.a{
color: pink;
text-decoration: overline;
}
#b{
color: blue;
text-decoration: line-through;
}
#c{
color: red;
text-decoration: underline;
}
- 이미지처럼 태그, 클래스, 아이디 선택자에 각각 속성 지정이 가능하다.
부모 자손 선택자
종류
-
조상 자손 선택자
밑에 있는 모든 태그를 선택 -
부모 자식 선택자
특정 값 아래에 있는 태그만을 선택
<ul>
<li>html</li>
<li>css</li>
<li>javascript</li>
</ul>
<ol>
<li>html</li>
<li>css</li>
<ol id="fam">
<li>selector</li>
<li>declaration</li>
</ol>
<li>javascript</li>
</ol>ul li{ //ul 밑에 있는 모든 태그를 선택
color: blue;
}
#fam>li{ //fam이라는 id값 밑에 있는 태그만 선택
border: 1px solid yellow;
}
ul,ol{ //ul, ol태그에 속성 함께 지정
background-color: lightcoral;
}
가상 클래스 선택자(Pseudo-Class)
| 속성 | 의미 |
|---|---|
| link | 방문한 적이 없는 링크 |
| visited | 방문한 적이 있는 링크 |
| hover | 링크에 마우스를 올려두었을때 |
| active | 링크를 클릭했을때 |
단위
| 속성 | 의미 |
|---|---|
| px(pixel) | 절댓값 |
| rem(root element) | 루트 엘리먼트(html)에 상대적이다. 1rem = 루트 엘리먼트의 폰트사이즈 |
| em(element) | 부모 엘리먼트(html)에 상대적이다. 1em = 부모 엘리먼트의 폰트사이즈 |
| percent | 부모 엘리먼트에 상대적이다. 100% = 부모 엘리먼트의 폰트사이즈 |
| vw(viewport width) | 뷰포트 넓이에 상대적이다. 100vw = 뷰포트의 넓이 |
| vh(viewport height) | 뷰포트 높이에 상대적이다. 100vh = 뷰포트의 높이 |
색상 표기법
| 속성 | 의미 |
|---|---|
| color명 | 색상 이름으로 표기 |
| rgb | red, green, blue 각 색상을 0~255 사이 값으로 지정 |
| rgba | rgb(r g b/ 투명도), 투명도는 0(완전투명) ~ 1(완전불투명) 사이 값으로 지정 |
| hex | 16진수로 색 표현, 0 ~ 9 / a ~ f의 16가지 수 |
| hex-3 | #rgb |
.name{
/* 색상 이름으로 표기 */
color: red;
}
.rgb{
/* rgb(red green blue)
각 색상은 0~255 사이의 값을 갖는다. */
color: rgb(255,0,255)
}
.rgba{
/* rgba(r g b / 투명도)
투명도 0(완전투명) ~ 1(완전불투명) 사이의 값을 갖는다*/
color: rgba(255 0 0 /0.5)
}
.hex{
/* hex(hexadecimal) : 16진수로 색 표현
0 ~ 9 / a ~ f의 16가지 수
#rrggbb*/
color: #fff000;
}
.hex-3{
/* #rgb */
color: #f00;
}<ul>
<li class="name">list item1</li>
<li class="rgb">list item2</li>
<li class="rgba">list item3</li>
<li class="hex">list item4</li>
<li class="hex-3">list item5</li>
</ul>
