HTML5 4일차
CSS3 선택자 (Selector)
- Html은 마커용 표시만 하는거라. 디자인을 하기위해 사용함.
실습 - 전체, 태그 Selector
<!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>
* {background-color:darkgray;} => 전체 선택
h1 {color:rgb(116, 255, 123);} => 태그 선택
p {color: rgb(255, 184, 5);}
h1, p {color: darkmagenta;}
</style>
</head>
<body>
<h1>제목 글자 태그</h1>
<p>Lorem ipsum dolor sit amet consectetur.</p>
</body>
</html>
실습 - ID Selector
- ID selector는 html에서 중복되어도 적용이 되나, 자바스크립트를 쓸땐 오류가 난다. 관례적으로 id는 중복되지 않게 쓴다.
<!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>
#header {
width: 800px;
margin: 0 auto;
background-color: aliceblue;
}
#wrap {
width: 800px;
margin: 0 auto;
}
#aside{
width: 200px;
float: left;
background-color: aquamarine;
}
#content{
width: 600px;
float: left;
background-color: darkkhaki;
}
</style>
</head>
<body>
<div id="header">
<h1>#header 태그</h1>
</div>
<div id="wrap">
<div id="aside">
<h1>#aside 태그</h1>
</div>
<div id="content">
<h1>#content 태그</h1>
</div>
</div>
</body>
</html>
실습 - Class Selector
-
Class는 . 으로 중복되게 사용할 수 있다.
-
특정하게 지정을 하고싶을땐 . 앞에다가 태그 이름을 붙여준다.
<!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>
.select { color:deepskyblue;}
.item { background-color: ghostwhite;}
h1.select { color : black;}
</style>
</head>
<body>
<ul>
<li class="select">애플망고</li>
<li>바나나</li>
<li class="select">오렌지</li>
<li>딸기</li>
<li class="select">참외</li>
</ul>
<h1 class="select">좋아하는 과일</h1>
<ul>
<li class="select item">애플망고</li>
<li>바나나</li>
<li class="select item">오렌지</li>
<li>딸기</li>
<li class="select item">참외</li>
</ul>
</body>
</html>
실습 - Attribute Selector
<!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>
input[type="text"] {background: blue;}
input[type="password"] {background: mediumspringgreen;}
</Style>
</head>
<body>
<form>
<input type="text">
<input type="password">
</form>
</body>
</html>
실습 - descendant
- 특별한경우에 자손 선택자를 쓰고, 후손선택자를 많이씀.
<!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>
#header h1, #header h2 {color: red;}
#section h1 {color: orange;}
</style>
</head>
<body>
<!--div>h1+div>h1 -->
<div id="header">
<h1 class="title">Lorem ipsum dolor sit amet.</h1>
<div id="nav">
<h2>Navigation</h2>
</div>
</div>
<!-- div>h1+p -->
<div id="section">
<h1 class="title">Lorem, ipsum.</h1>
<p>Lorem ipsum dolor sit amet consectetur.</p>
<h2>Lorem ipsum dolor.</h2>
</div>
</body>
</html>
실습 - descendants
-
Table>tr>th가 안먹는 이유. 검사해서 보면 tbody가 알아서 생성.
-
해결법 1. tbody를 넣어줌.
-
해결법 2. table tr th
-
Css에서 주석처리 : /* */
<!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>
#header > h1 {color :chartreuse;}
#section > h1 {color : orange; }
/* table>tbody>tr>th { color: midnightblue;} */
table tr th { color: cornflowerblue;}
</style>
</head>
<body>
<!--div>h1+div>h1 -->
<div id="header">
<h1 class="title">Lorem ipsum dolor sit amet.</h1>
<div id="nav">
<h2>Navigation</h2>
</div>
</div>
<!-- div>h1+p -->
<div id="section">
<h1 class="title">Lorem, ipsum.</h1>
<p>Lorem ipsum dolor sit amet consectetur.</p>
<h2>Lorem ipsum dolor.</h2>
</div>
<!--table>tr>th*2-->
<table border="1">
<tr>
<th>이름</th>
<th>지역</th>
</tr>
<!--Tr>td*2-->
<tr>
<td>강채린</td>
<td>서울시 강서구 등촌3동</td>
</tr>
</table>
</body>
</html>
실습 - 반응, 상태, 구조 Selector
- : 은 상태, 반응 넣을때 씀.
<!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>
h1:hover { color : red; }
h1:active {color : blue; }
input:enabled { background-color: greenyellow;}
input:disabled {background-color: blueviolet;}
input:focus {background-color: brown;}
</style>
</head>
<body>
<h1>반응선택자</h1>
<h2>사용가능</h2>
<input>
<h2>사용불가능</h2>
<input disabled>
</body>
</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 {
list-style:none;
float: left;
padding: 15px;
}
li:first-child {border-radius: 10px 0 0 10px;}
li:last-child {border-radius: 0 10px 10px 0;}
li:nth-child(2n) {background-color: rgb(209, 209, 209);}
li:nth-child(2n-1) {background-color: rgb(55, 63, 66);}
</style>
</head>
<body>
<ul>
<li>첫번째</li>
<li>두번째</li>
<li>세번째</li>
<li>네번째</li>
<li>다섯번째</li>
<li>여섯번째</li>
<li>일곱번째</li>
</ul>
</body>
</html>
CSS3 단위
-
% : 백분율 단위.
-
em : 배수 단위. (ex 1em =16px)
-
rem : em의 단위를 설정.
-
px : 픽셀 단위.
-
RGBA : RGB와 함께 투명도를 줄 수 있다. HEX 코드 : RGB를 #000000 같은 16진수로 입력함.
-
URL : 이미지나 글꼴 파일을 불러올때 사용.
실습 - URL 단위
<!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>
body {background-image: url(wink.png);
}
</style>
</head>
<body>
<h1>배경이미지 넣기</h1>
<p>Lorem ipsum dolor sit amet consectetur.</p>
</body>
</html>
CSS3 - 속성
실습 - 박스 속성
<!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>
div {
width: 100px;
height: 100px;
background-color: cornflowerblue;
border: 10px solid black;
margin: 100px;
padding: 30px;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
실습 - 가시 속성 display
- Inline-block의 차이 inline은 사이즈를 줄 수 있다.
<!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 { display: none; }
#box2 { display:block; }
#box3 { display:inline;
width: 100px;
height: 50px;
background-color: aqua;
}
#box4 { display:inline-block;
width: 100px;
height: 50px;
background-color: rosybrown;
}
</style>
</head>
<body>
<!--span+div+span-->
<span>더미 객체</span>
<div id="box">대상 객체</div>
<span>더미 객체</span>
<hr>
<span>더미 객체</span>
<div id="box2">대상 객체</div>
<span>더미 객체</span>
<hr>
<span>더미 객체</span>
<div id="box3">대상 객체</div>
<span>더미 객체</span>
<hr>
<span>더미 객체</span>
<div id="box4">대상 객체</div>
<span>더미 객체</span>
</body>
</html>
정리
HTML - 블록 레벨(Block level) 요소와 인라인(Inline) 요소
1. 블록 요소
- DIV, H1, P
- 사용 가능한 최대 가로 너비를 사용.
- 크기를 지정할 수 있다.
- Width: 100%; , height: 0; 로 시작.
- 수직으로 쌓임
- margin, padding 위, 아래, 좌, 우 사용 가능하다.
- 레이아웃
2. 인라인 요소
- SPAN, IMG
- 필요한 만큼의 너비를 사용한다.
- 크기를 지정할 수 없다.
- Width: 0; , height: 0; 로 시작.
- 수평으로 쌓임.
- margin, padding 위, 아래는 사용을 할 수 없다.
- TEXT
댓글남기기