Stack/CSS
[CSS] 선택자 / display 연습
7ingout
2022. 4. 7. 09:38
* 선택자
1. 태그 선택자 A
2. 아이디 선택자 #A 혹은 div#A
3. 클래스 선택자 .A 혹은 div.A
4. 하위 선택자 A B (하위는 자식을 선택함, 상위 선택자를 적어주고 띄어쓰기)
5. 자식 선택자 A > B (자식은 >를 넣어줌)
6. 형제 선택자 A + B
7. 연속 선택자 A, B
8. 모든태그 선택자 *
⭐ 가상 선택자 ⭐
a랑 : 절대 띄어쓰지 말기 !
a:link 방문하지 않은 링크
a:visited 방문했던 링크
/⭐ X 10/ a:hover 마우스가 올려진 링크
a:active 클릭하는 순간 링크
* 가상요소 선택자
:nth-child()
:first-child
:last-child
:only-child
:nth-of-type()
:first-of-type
:last-of-type
:only-of-type
:not(:last-child)
* 속성선택자
[속성명]
[title] { color: red; }
a만 선택하고 싶을 경우 a[title] { color: red; } (앞에 태그명 붙이기)
a[href]
a[href^='http'] (href 속성이 http로 시작하는 a요소만 선택하고 싶을 때)
a[href$='html] (href 속성이 html로 끝나는 a요소만 선택하고 싶을 때)
a[href*='naver'] (href 속성이 중간에 naver 들어가는 요소만 선택하고 싶을 때)
a[href='http://google.com]
input[type='text'] {}
<div title="div">div</div>
<a href="http://naver.com" title="바로가기1">바로가기1</a>
<a href="http://google.com" title="바로가기2">바로가기2</a>
<a href="sub.html">바로가기3</a>
* 속성
display: 요소를 표시하는 방법을 지정함
- 기본 값이 인라인인 태그: <span>, <a>, <img>, <input>, <select>, <em>, <mark>, <storng> 등
- 기본 값이 블럭인 태그: <div>, <p>, <ol>, <ul>, <dl>, <dd>, <dt>, <h1>~<h6>, <table>
block 요소를 블럭요소로 지정
inline 요소를 인라인요소로 지정
inline-block 가로를 100%로 차지하지 않으며 크기와 여백을 지정할 수 있음 (상속받는 특성이 아님)
none 요소를 보이지 않게 해줌
* inline-block으로 지정할 경우 생기는 요소 사이에 빈 공간 제거하는 방법
1) 마크업 코드에서 요소 사이 줄 변경과 여백을 제거한다.
2) 요소에 margin-right 속성값을 -값으로 지정한다.
3) 요소의 부모요소의 font-size 속성에 0으로 지정한다.
1. 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; } /* div의 자식인 h2만 선택됨 */
</style>
</head>
<body>
<div id="wrap">
<h2>h2입니다.</h2>
<div id="box1">di1v입니다.
<ul>
<li>
<h2>h2입니다.</h2>
</li>
<li>
<h2>h2입니다.</h2>
</li>
</ul>
</div>
<div id="box2">div입니다.
<h2>h2입니다.</h2>
</div>
</div>
</body>
</html>
2. 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 { 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{바로가기$})*4 -->
<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="http://nate.com">바로가기4</a></li>
</ul>
<div>div입니다.</div>
</body>
</html>
3. 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(4) {
background: pink;
}
h2:nth-child(4) {
background: red;
} */
/* li:last-child {
background: yellow;
} */
/* body :only-child {
background: yellow;
} */
table { border-collapse: collapse; width: 700px ;}
/* tr:nth-child(even) {
background: pink;
}
td { border: 1px solid #ccc; }
td:nth-child(1) {
border-left: none;
}
td:last-child {
border-right: none;
} */
td {
border-bottom: 1px solid #ccc;
}
td:not(:last-child) {
border-right: 1px solid #ccc;
}
tr:nth-child(1) td{
border-top: 3px solid #333
}
p:nth-of-type(2) {
color: red;
}
p:nth-child(5) {
font-size: 52px;
}
/* tr:nth-child(4) td{
border-bottom: none;
} */
</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>
<div>
<p>p입니다.</p>
</div>
<table>
<tr>
<td>1행 1열</td>
<td>1행 2열</td>
<td>1행 3열</td>
</tr>
<tr>
<td>2행 1열</td>
<td>2행 2열</td>
<td>2행 3열</td>
</tr>
<tr>
<td>3행 1열</td>
<td>3행 2열</td>
<td>3행 3열</td>
</tr>
<tr>
<td>4행 1열</td>
<td>4행 2열</td>
<td>4행 3열</td>
</tr>
</table>
</html>
4. 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; }
div {
font-size: 16px;
width:300px;
height: 300px;
background: tomato ;
color: #fff;
display: inline-block;
margin-right: -4px;
}
li { font-size: 14px; display: inline-block; }
</style>
</head>
<body>
<!-- div{box$}*4 -->
<div>box1</div>
<div>box2</div>
<div>box3</div>
<div>box4</div>
<ul>
<li>
<!-- li{list$}*4 -->
<li>list1</li>
<li>list2</li>
<li>list3</li>
<li>list4</li>
</li>
</ul>
</body>
</html>
5. 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;
/* background: lightcyan; */
}
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: 20px; */
font-size: 0;
height: 100px;
padding-top: 30px;
}
h1 { display: inline-block; font-size: 14px; width: 200px; }
ul {
display: inline-block;
font-size: 0px;
width: 400px;
margin-left: 600px;
/* background: pink; */
}
li { display: inline-block;
font-size: 14px;
/* background: red; */
width: 25%;
text-align: center;
} /* ul inline-block 했다고 li까지 바뀌진 않음 */
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>
6. display_test.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;
}
a { text-decoration: none; color: inherit; } /* inherit: 글자색 검은색 그대로 */
#header {
font-family: '나눔 고딕', '맑은 고딕', sans-serif;
color: #2d2d2d;
font-size: 14px;
line-height: 1.5; /* 행 높이 */
letter-spacing: -2px; /* 자간 */
font-size: 0;
height: 100px;
padding-top: 30px;
}
h1 { display: inline-block; font-size: 30px; width: 200px; }
ul {
display: inline-block;
font-size: 0px;
width: 400px;
margin-left: 600px;
}
li { display: inline-block;
font-size: 14px;
width: 25%;
text-align: center;
}
li:not(:last-child) {
border-right: 1px solid #333;
}
#title {
font-family: '나눔 고딕', '맑은 고딕', sans-serif;
color: #2d2d2d;
font-size: 24px;
line-height: 1.5; /* 행 높이 */
height: 100px;
padding-top: 30px;
text-align: center;
font-weight: 500;
}
#box{
font-family: '나눔 고딕', '맑은 고딕', sans-serif;
color: #2d2d2d;
font-weight: 500;
font-size: 0;
}
#box1 { width: 360px; height: 140px; border: 1px solid #a1a1a1; padding: 30px;
margin: 30px 60px 0 0; box-sizing: border-box; display: inline-block; text-align: center;} /* auto를 해주면 가운데 정렬을 해줌 width 필수!! */
#box2 { width: 360px; height: 140px; border: 1px solid #a1a1a1; padding: 30px;
margin: 30px 60px 0 0; box-sizing: border-box; display: inline-block; text-align: center;}
#box3 { width: 360px; height: 140px; border: 1px solid #a1a1a1; padding: 30px;
margin: 30px 0 0 0; box-sizing: border-box; display: inline-block; text-align: center;}
#sotitle{
font-family: '나눔 고딕', '맑은 고딕', sans-serif;
color: #2d2d2d;
font-weight:bolder;
font-size: 18px;
}
#content{
font-family: '나눔 고딕', '맑은 고딕', sans-serif;
color: #2d2d2d;
font-size:16px;
}
#post{
font-family: '나눔 고딕', '맑은 고딕', sans-serif;
color: #2d2d2d;
padding-top: 15px;
padding-bottom: 15px;
font-weight: 500;
}
#footer {
font-size: 0;
}
.foot
{
font-size:16px;
display: inline-block;
}
.ll
{
width: 45%;
display: inline-block;
text-align: right;
}
</style>
</head>
<body>
<div id="wrap">
<div id="header">
<h1>Green</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 id="container">
<!-- 메인컨텐츠01 -->
<div id="title">
메인컨텐츠01
</div>
<hr style = "border: solid 1px;">
<div id= box>
<div id="box1">
<div id="sotitle">작은제목 입니다.</div>
<div id="content">내용적는 부분입니다.<br>2020.12.17</div>
</div>
<div id="box2">
<div id="sotitle">작은제목 입니다.</div>
<div id="content">내용적는 부분입니다.<br>2020.12.17</div>
</div>
<div id="box3">
<div id="sotitle">작은제목 입니다.</div>
<div id="content">내용적는 부분입니다.<br>2020.12.17</div>
</div>
</div>
<!-- 메인컨텐츠01 /-->
<!-- 공지사항 -->
<div id="title">
공지사항
</div>
<hr style = "border: solid 1px;">
<br>
<div>
<div id="post"><a href="#">2020 그린컴퓨터 아카데미 소식 2020.12.17</a></div>
<hr>
<div id="post"><a href="#">코로나 바이러스 예방법 2020.12.17</a></div>
<hr>
<div id="post"><a href="#">그린컴퓨터 아카데미 소식 2020.12.17</a></div>
<hr>
<div id="post"><a href="#">코로나 바이러스 에방법 2020.12.17</a></div>
<hr>
<br>
</div>
<!-- 공지사항 /-->
</div>
<div id="footer">
<div class="foot">
<p>주소: 서울특별시 용산구 한강대로 대표이사: 그린 사업자등록번호 : 110-12-12345 통신판매</p>
<p>신고: 제 2020-서울용산-000호</p>
</div>
<div class="ll">
<h1>Green</h1>
</div>
</div>
</div>
</body>
</html>
footer 부분은 친구의 도움을 받아 완료 👍
7. display_layout.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; vertical-align: middle; } /* vertical은 inline만 정렬, block은 정렬 못시킴*/
a { text-decoration: none; color: inherit; }
body{
font-size: 14px;
line-height: 1.5;
color: #2d2d2d;
}
li { list-style: none; }
#wrap {
width: 100%;
max-width:1200px;
margin: 0 auto;
/* background: lightblue; */
}
#header {
height: 100px;
/* background: pink; */
padding-top: 30px;
font-size: 0; /* 여기 0 주고 */
}
#header h1 {
display: inline-block;
width: 15%;
/* background: red; */
font-size: 32px; /* 여기랑 */
line-height: 40px; /* body에 쓴 line-height 안쓰고 내가 원하는 40 쓰겠다. */
}
#header ul {
margin-left: 55%;
display: inline-block;
width: 30%;
/* background: blue; */
font-size: 0; /* font-size:18px 여기 폰트 지정해주기, 안해주면 공간 생김, 부모 요소한테 0 주기*/
}
#header li{
display: inline-block;
font-size:18px; /* 인라인 여기도 와서 위에꺼(얘 부모) 다시 0 됨*/
width:25%;
text-align: center;
line-height: 18px;
}
#header li:not(:last-child) {
border-right: 1px solid #ccc;
}
#main h2 {
text-align: center;
padding: 30px 0;
border-bottom: 1px solid #333;
margin-bottom: 30px;
}
#content ul{
font-size: 0; /* 1. li의 부모 여기 0주고 */
}
#content li{
display: inline-block;
border: 1px solid #ccc;
text-align: center;
padding: 30px;
margin: 0; /* 부모요소 0주기 전에 여기 0줘도 박스 사이 공백 안없어짐 */
font-size: 18px; /* 2. 여기 크기 지정해줌 */
width: 30%; /* 30*3 = 90% */
}
#content li:not(:last-child) {
margin-right: 5%; /* margin은 2개, 100-90=10, 10/2=5% */
}
#notice li {
border-bottom: 1px solid #ccc;
line-height: 40px;
}
#footer p {
display: inline-block;
font-size: 16px;
width: 60%;
}
#footer h1 {
display: inline-block;
font-size: 32px;
margin-left: 30%;
width: 10%;
text-align: right;
}
#footer {
padding-top: 30px;
font-size: 0;
}
</style>
</head>
<body>
<div id="wrap">
<div id="header">
<h1><a href="#">Green</a></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 id="main">
<div id="content">
<h2>메인컨텐츠01</h2>
<ul>
<li>
<h3>작은제목 입니다.</h3>
<p>내용적는 부분입니다.</p>
<span>2020.12.17</span>
</li>
<li>
<h3>작은제목 입니다.</h3>
<p>내용적는 부분입니다.</p>
<span>2020.12.17</span>
</li>
<li>
<h3>작은제목 입니다.</h3>
<p>내용적는 부분입니다.</p>
<span>2020.12.17</span>
</li>
</ul>
</div>
<div id="notice">
<h2>공지사항</h2>
<ul>
<li>2020 그린컴퓨터 아카데미 소식<span>2020.12.17</span></li>
<li>2020 그린컴퓨터 아카데미 소식<span>2020.12.17</span></li>
<li>2020 그린컴퓨터 아카데미 소식<span>2020.12.17</span></li>
<li>2020 그린컴퓨터 아카데미 소식<span>2020.12.17</span></li>
</ul>
</div>
</div>
<div id="footer">
<p>주소: 서울특별시 용산구 한강대로 대표이사: 그린 사업자등록번호 : 110-12-12345 통신판매신고: 제 2020-서울용산-000호</p>
<h1>Green</h1>
</div>
</div>
</body>
</html>