반응형
1. 구조 선택자
- 일반 구조 선택자(위치)
| 선택자:first-child | li:first-child |
| 선택자:last-child | li:last-child |
| 선택자:nth-child(수열) | li:nth-child(2n+1) |
| 선택자:nth-last-child(수열) | li:nth-last-child(2n+1) |
- 형태 구조 선택자(등장)
| 선택자:first-of-type | h1:first-of-type |
| 선택자:last-of-type | h1:last-of-type |
| 선택자:nth-of-type(수열) | h1:nth-of-type(2n+1) |
| 선택자:nth-last-of-type(수열) | h1:nth-last-of-type(2n+1) |
2. HTML Code
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>CSS 1일차</title>
<link href="css/ex03.css" rel="stylesheet">
</head>
<body>
<h1>네비게이션바 만들기</h1>
<h1>welcome1</h1>
<h2>welcome2</h2>
<h2>welcome2</h2>
<h2>welcome2</h2>
<h3>welcome3</h3>
<h3>welcome3</h3>
<h3>welcome3</h3>
<h4>welcome4</h4>
<h5>welcome5</h5>
<h6>welcome6</h6>
<h6>welcome6</h6>
<h6>welcome6</h6>
</body>
</html>
3. CSS Code
@charset "utf-8";
/* CSS Document */
* {
margin: 0;
padding: 0;
}
/* 목록 기호 없애기 */
ul, li{
list-style:none;
}
/* 밑줄 없애기 */
a{
color:black;
text-decoration:none;
}
/* h2 tag에 마지막 백그라운드 처리 */
h2:last-of-type{
background:gray;
}
/* h3 tag에 2번째 백그라운드 처리 */
h3:nth-of-type(2){
background:tomato;
}
/* h1 tag에 첫번째 border 처리 절대적 위치 */
h1:first-child{
border:5px solid lime;
}
/* h6 tag에 첫번재 boredr 처리 상대적 위치 */
h6:first-of-type{
border:5px solid lime;
}
h1:nth-child(3){
font-style:italic;
}
4. HTML / CSS 파일
ex03.html
0.00MB
ex03.css
0.00MB
5. HTML 미리보기
반응형
'Python_WEB > HTML' 카테고리의 다른 글
| HTML5 - 190608 Basic Study 21(CSS 반응 선택자) (0) | 2019.06.08 |
|---|---|
| HTML5 - 190608 Basic Study 20(CSS 동위(형제) 선택자) (0) | 2019.06.08 |
| HTML5 - 190608 Basic Study 18(CSS- Navigation Bar / 링크 바) (0) | 2019.06.08 |
| HTML5 - 190608 Basic Study 17(CSS Basic 2) (0) | 2019.06.08 |
| HTML5 - 190608 Basic Study 16(CSS Basic 1) (0) | 2019.06.08 |
