728x90
[CSS] 가상선택자, 에밋(emmet)
1. 가상 선택자(가상 클래스 or 추상 클래스)
선택자 뒤에 ':가상이벤트'를 붙이면 특정 이벤트마다 적용 할 스타일을 설정 할 수 있으며, 이를 가상 (추상)클래스라 한다.
가상 선택자를 쓰면 CSS와 HTML의 코드의 양을 줄이며 가독성을 향상시킬 수 있는 장점이 있다.
<예시>
<nav>
<div></div>
<div></div>
<div></div>
<nav>nav > div:nth-child(N){
color: red;
}이렇게 있다고 하면, css는 nav의 N번째 자식만 골라서 효과를 주는 것이다. 만약 N의 자리에 1을 넣는다면, 첫번째 div 엘리먼트만 폰트 색깔이 빨간색으로 바뀐다.
가장 필수적으로 알아야 하는 요소
:nth-child(N) = 부모안에 모든 요소 중 N번째 요소
A:nth-of-type(N) = 부모 안에 A라는 요소 중 N번째 요소
:fist-child = 부모안에 모든 요소 중 첫번째 요소
:last-child = 부모안에 모든 요소 중 마지막 요소
A:first-of-type = 부모안에 A라는 요소 중 첫번째 요소
A:last-of-type = 부모안에 A라는 요소 중 마지막 요소
필수적으로 알아야 하는 요소
:link - 방문한 적이 없는 링크
:visited - 방문한 적이 있는 링크
:hover - 마우스를 롤오버 했을 때
:active - 마우스를 클릭했을 때
:focus - 포커스 되었을 때 (input 태그 등)
:first - 첫번째 요소
:last - 마지막 요소
:first-child - 첫번째 자식
:last-child - 마지막 자식
:nth-child(2n+1) - 홀수 번째 자식
2. 에밋(emmet)
에밋은 HTML 문서 등을 편집할 때 빠른 코딩을 위해 사용하는 플러그인이다.
<에밋 기호>
| 자식: > | 형제: + | 부모: ^ | 그룹: () | 여러개: * |
| 넘버링: $ | id: # | class: . | 속성: [] | 텍스트: {} |
<예시>
참고 : 값은 무조건 쌍따옴표다.
div > section*4
// : div 태그에 자식 section 4개가 만들어 진다.
div[name=“paul”][age=“23”]{내용}
// 자동완성 : <div name = ‘paul’ age=’23’>내용</div>
div{내용 $} *4
// 자동완성 :
//<div>내용 1</div>
//<div>내용 2</div>
//<div>내용 3</div>
//<div>내용 4</div>
//여러 개를 집어넣을 때는 띄어쓰기 없이 한줄로 이어서 작업한다.
더 알아가기: target 속성 target=“_blank” : 새창 띄우기(클릭시에 새창)
<실습하기 : 무지개 만들기(div 700개 생성 에밋, 가상선택자 활용)>
<html 문서>
section > div*700
<css 문서>
section {
text-align:center;
}
section > div {
width:13%;
height: 50px;
background-color: red;
display:inline-block;
}
section > div:nth-child(7n + 2) {
background-color: yellow;
}
section > div:nth-child(7n + 3) {
background-color: orange;
}
section > div:nth-child(7n + 4) {
background-color: green;
}
section > div:nth-child(7n + 5) {
background-color: blue;
}
section > div:nth-child(7n + 6) {
background-color: darkblue;
}
section > div:nth-child(7n + 7) {
background-color: purple;
}
++
CSS 선택자 연습하기 게임을 해봐도 좋을 것이다.
링크 : https://flukeout.github.io
CSS Diner
A fun game to help you learn and practice CSS selectors.
flukeout.github.io
728x90
'Web' 카테고리의 다른 글
| [Web] 서버란 무엇인가? (0) | 2022.06.24 |
|---|---|
| [HTML/CSS] 노멀라이즈(normalize) (0) | 2022.06.23 |
| [HTML] 태그와 엘리먼트의 차이 (0) | 2022.06.22 |
| [HTML/CSS] display 속성 알아보기 (0) | 2022.06.22 |
| [Bootstrap] Bootstrap이란? (0) | 2022.06.18 |
댓글