1) boxSize.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* box-sizing: 박스의 크기를 어떤 것을 기준으로 계산할지를 지정
속성값:
border-box(테두리를 기준으로 크기를 정함)
content-box(컨텐츠 영역을 기준으로 크기를 정함) */
div { width:500px; padding: 20px; border: 3px solid #333; background: pink;}
#box2 { box-sizing: border-box;}
</style>
</head>
<body>
<div id="box1">box1입니다</div>
<div id="box2">box2입니다</div>
</body>
</html>
2) select.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {padding: 0; margin: 0;}
#wrap { background: pink;}
#box1 h2 { color: red;}
div > h2 { text-decoration: underline;}
</style>
</head>
<body>
<div id="wrap">
<h2>h2입니다.</h2>
<div id="box1">div1입니다.
<ul>
<li>
<h2>h2입니다.</h2>
</li>
<li>
<h2>h2입니다.</h2>
</li>
</ul>
</div>
<div id="box2">div2입니다.
<h2>h2입니다.</h2>
</div>
</div>
</body>
</html>
3) select_link.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* ※가상 선택자 (띄어쓰기 주의)
a:link 방문하지 않은 링크
a:visited 방문했던 링크
※ a:hover 마우스가 올려진 링크
a:active 클릭하는 순간 링크 */
a { text-decoration: none; color: #333;}
a:link {color: red;}
a:visited { color: yellow;}
a:hover {color: blue;}
a:active {color: purple;}
div { width: 200px; height: 200px; background: pink;}
div:hover { background: red;}
</style>
</head>
<body>
<ul>
<li><a href="https://naver.com">바로가기1</a></li>
<li><a href="https://google.com">바로가기2</a></li>
<li><a href="https://greenart.co.kr">바로가기3</a></li>
<li><a href="https://nate.com">바로가기4</a></li>
</ul>
<div>div입니다</div>
</body>
</html>
4) select_nth.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
li:nth-child(1) {
background: pink;
}
div:nth-child(3) {
background: blue;
}
#lank li:nth-child(even) {
background: yellow;
}
/* tr:nth-child(odd) td {
background: pink;
} */
table { border-collapse: collapse; width: 700px;}
/* td { border: 1px solid #ccc;}
td:first-child {
border-left: none;
}
td:last-child {
border-right: none;
} */
td {
border-bottom: 1px solid #ccc;
}
/* 마지막 오른쪽 칸만 없애기 (자주 쓰임) */
td:not(:last-child) {
border-right: 1px solid #ccc;
}
p:nth-of-type(2) {
color: red;
}
p:nth-child(5) {
font-size: 52px;
}
</style>
</head>
<body>
<ul>
<li>menu1</li>
<li>menu2</li>
<li>menu3</li>
<li>menu4</li>
</ul>
<div>
<h2>첫번째 자식 h2입니다</h2>
<p>두번째 자식 p입니다</p>
<div>세번째 자식 div입니다</div>
<h2>네번째 자식 h2입니다</h2>
<p>다섯번째 자식 p입니다</p>
</div>
<ul id="lank">
<li>lank1</li>
<li>lank2</li>
<li>lank3</li>
<li>lank4</li>
</ul>
<table>
<tr>
<td>1행 1열</td>
<td>2행 2열</td>
<td>3행 3열</td>
</tr>
<tr>
<td>1행 1열</td>
<td>2행 2열</td>
<td>3행 3열</td>
</tr>
<tr>
<td>1행 1열</td>
<td>2행 2열</td>
<td>3행 3열</td>
</tr>
<tr>
<td>1행 1열</td>
<td>2행 2열</td>
<td>3행 3열</td>
</tr>
</table>
</body>
</html>
5) display.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* { padding: 0; margin: 0; box-sizing: border-box;}
body { font-size: 0;} /*요소의 부모 요소의 font-size속성에 0으로 지정한다.*/
div {
font-size: 16px;
width: 300px;
height: 300px;
background: tomato;
color: #fff;
display: inline-block;
}
li { font-size: 15px; display: inline-block;}
</style>
</head>
<body>
<div>box1</div>
<div>box2</div>
<div>box3</div>
<div>box4</div>
<ul>
<li>list1</li>
<li>list2</li>
<li>list3</li>
<li>list4</li>
</ul>
</body>
</html>
6) display_header.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* { margin: 0; padding: 0; box-sizing: border-box;}
#wrap {
width: 1200px;
margin: 0 auto;
}
body { font-family: '나눔고딕','맑은 고딕',sans-serif;
color: #2d2d2d;
font-size: 14px;
line-height: 1.5;
letter-spacing: -2px;
}
a { text-decoration: none; color: inherit;}
#header {
padding-top: 30px;
height: 100px;
font-size: 0; /*요소의 부모 요소의 font-size속성에 0으로 지정한다.*/
}
h1 { display: inline-block; font-size: 14px; width: 200px; }
ul { display: inline-block; font-size: 0px; width: 400px; margin-left: 600px;} /*요소의 부모 요소의 font-size속성에 0으로 지정한다.*/
li {
display: inline-block;
font-size: 14px;
text-align: center;
width: 25%;
}
li:not(:last-child) /*마지막꺼 제외하고 적용*/
{
border-right: 1px solid #333;
}
</style>
</head>
<body>
<div id="wrap">
<div id="header">
<h1>GreenArt</h1>
<ul>
<li><a href="#">menu1</a></li>
<li><a href="#">menu2</a></li>
<li><a href="#">menu3</a></li>
<li><a href="#">menu4</a></li>
</ul>
</div>
</div>
</body>
</html>
'노력이 좋아서' 카테고리의 다른 글
| <step15>'css_background, float' (0) | 2022.04.08 |
|---|---|
| <step15>'markup에 css적용' (0) | 2022.04.08 |
| <step14>'html_markup' (0) | 2022.04.07 |
| <step13>'css_text, boxmodel, table' (0) | 2022.04.06 |
| <step12> 'html_div/ form/ select/ input' (0) | 2022.04.05 |