728x90
★ CSS 선택자(가상 클래스)
- 1. :first-child
- 가상 클래스
- 검색된 태그 자체를 조작
- 2. ::before
- 가상 요소(Element)
- 검색된 태그 주변을 조작
★ 전후 선택자
- 1. ::before = :before
- 2. ::after = :after
■ HTML 코드
<body>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. <span>Suscipit</span> libero laudantium cum deleniti nostrum similique inventore, quam placeat cupiditate <span>porro</span> aliquid ipsam hic molestiae incidunt voluptate laboriosam <span>accusamus!</span> Ad, atque.</p>
<div id="list">
<div>빨강</div>
<div>노랑</div>
<div>파랑</div>
<div>초록</div>
<div>보라</div>
</div>
<div>다른 내용들..</div>
</body>
■ 상황에 따른 CSS 코드
- ex1) span 태그 앞에 이름을 붙이기
span {
color : blue;
}
span::before {
content: '홍길동';
color : orange;
font-weight: bold;
font-size : 1.5rem;
}- 실행결과
- ex2) span 태그 뒤에 이름 붙이기
span::after {
content : '아무개';
color : pink;
}- 실행 결과
- ex3) div 사이 공백 제거 방법 1
#list {
font-size : 0;
}
#list div {
width : 100px;
height: 100px;
display : inline-block;
font-size : 1rem;
text-align: center;
}
#list div:nth-child(1) {background-color: tomato;}
#list div:nth-child(2) {background-color: yellow;}
#list div:nth-child(3) {background-color: cornflowerblue;}
#list div:nth-child(4) {background-color: greenyellow;}
#list div:nth-child(5) {background-color: plum;}- float를 이용한 방법 2
#list .item {
width : 100px;
height: 100px;
float : left;
}
#list::after {
content: '';
display: block;
clear : left;
}
#list div:nth-child(1) {background-color: tomato;}
#list div:nth-child(2) {background-color: yellow;}
#list div:nth-child(3) {background-color: cornflowerblue;}
#list div:nth-child(4) {background-color: greenyellow;}
#list div:nth-child(5) {background-color: plum;}728x90
'웹페이지' 카테고리의 다른 글
| CSS STEP 23 - Background (0) | 2023.04.18 |
|---|---|
| CSS STEP 22 - Shadow (0) | 2023.04.18 |
| CSS STEP 20 - Selector 4 (0) | 2023.04.18 |
| CSS STEP 19 - Selector 3 (0) | 2023.04.18 |
| CSS STEP 18 - Selector 2 (0) | 2023.04.18 |
728x90
★ CSS 선택자(가상 클래스)
- 1. :first-child
- 가상 클래스
- 검색된 태그 자체를 조작
- 2. ::before
- 가상 요소(Element)
- 검색된 태그 주변을 조작
★ 전후 선택자
- 1. ::before = :before
- 2. ::after = :after
■ HTML 코드
<body>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. <span>Suscipit</span> libero laudantium cum deleniti nostrum similique inventore, quam placeat cupiditate <span>porro</span> aliquid ipsam hic molestiae incidunt voluptate laboriosam <span>accusamus!</span> Ad, atque.</p>
<div id="list">
<div>빨강</div>
<div>노랑</div>
<div>파랑</div>
<div>초록</div>
<div>보라</div>
</div>
<div>다른 내용들..</div>
</body>
■ 상황에 따른 CSS 코드
- ex1) span 태그 앞에 이름을 붙이기
span {
color : blue;
}
span::before {
content: '홍길동';
color : orange;
font-weight: bold;
font-size : 1.5rem;
}- 실행결과
- ex2) span 태그 뒤에 이름 붙이기
span::after {
content : '아무개';
color : pink;
}- 실행 결과
- ex3) div 사이 공백 제거 방법 1
#list {
font-size : 0;
}
#list div {
width : 100px;
height: 100px;
display : inline-block;
font-size : 1rem;
text-align: center;
}
#list div:nth-child(1) {background-color: tomato;}
#list div:nth-child(2) {background-color: yellow;}
#list div:nth-child(3) {background-color: cornflowerblue;}
#list div:nth-child(4) {background-color: greenyellow;}
#list div:nth-child(5) {background-color: plum;}- float를 이용한 방법 2
#list .item {
width : 100px;
height: 100px;
float : left;
}
#list::after {
content: '';
display: block;
clear : left;
}
#list div:nth-child(1) {background-color: tomato;}
#list div:nth-child(2) {background-color: yellow;}
#list div:nth-child(3) {background-color: cornflowerblue;}
#list div:nth-child(4) {background-color: greenyellow;}
#list div:nth-child(5) {background-color: plum;}728x90
'웹페이지' 카테고리의 다른 글
| CSS STEP 23 - Background (0) | 2023.04.18 |
|---|---|
| CSS STEP 22 - Shadow (0) | 2023.04.18 |
| CSS STEP 20 - Selector 4 (0) | 2023.04.18 |
| CSS STEP 19 - Selector 3 (0) | 2023.04.18 |
| CSS STEP 18 - Selector 2 (0) | 2023.04.18 |
