inline요소 안에는 block요소를 넣을 수 없다
float 뒤에 clear 주는 방법
1. float 속성을 주면 다음꺼 블록까지 영향이 가기 때문에 다음 블록에는 clear: both;속성을 줘야 한다.
마땅히 줄 곳이 없으면 <br>하나 주고 br에 style을 줘도 된다
www.youtube.com/watch?v=641i0NjaqBs&t=193s
VIDEO
2. 가상선택자a1:after{contnent:""; display:block; clear:both;} 클래스명이 a1인 곳에 가상선택자인 after를 준다. 이게 :after앞에 있는 a1클래스의 블록 마지막에 content를 넣는건데 content는 span이라고 보면 된다
다중클래스
a태그로 생기는 밑줄 없애는 방법은 a태그에다 text-decoration:none을 주면 밑줄이 사라진다.
들여쓰기 text-indent: Xpx; 는 첫줄에만 적용된다
text-align 에는 left, right, center, justify가 있는데
vertical-align 세로맞춤
<table>
<tr>
<td style="border: 1px solid red; height:100px; vertical-align:bottom;">
text
</td>
</tr>
</table>vertical-align 에 top, middle, bottom 을 주면 위 중간 아래에 글자를 위치시킬 수 있다
span이라는 요소는 inline이라는 형태를 가지고 있기 때문에 가로세로가 없다
<!DOCTYPE html>
<html lang="ko">
<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>
span{
display: block;
width: 100px;
height: 100px;
border: 1px solid red;
}
</style>
</head>
<body>
<span>inline요소 </span>
</body>
</html>여기서 display요소를 빼면 weight, height를 100px줘도 안먹힌다.
display: inline
블록 속성을 인라인으로 강제로 바꾸는거
<!DOCTYPE html>
<html lang="ko">
<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>
span{
display: block;
width: 100px;
height: 100px;
border: 1px solid red;
}
div{
display:inline;
width: 100px;
height: 100px;
border: 1px solid red;
}
</style>
</head>
<body>
<div>block요소</div>
</body>
</html>
그냥 block속성은 기본 가로사이즈가 100%인데
overflow
자료가 너무 길어서 넘칠때 사용하는거
overflow: visible; 기본속성
tabindex 탭을 눌렀을때 포커스이동이 가능하게 만드는것
tabindex="0" 1이상을 하면 무조건 거기로 가게하는건데 0을 주면 그냥 갈수있게만 만든다.
선택자
1번 자손선택자
원하는 선택자와 한칸을 띄우고 그다음 원하는 선택자를 누르면 그걸 선택이 가능
<!DOCTYPE html>
<html lang="ko">
<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 div{
color:red;
}
</style>
</head>
<body>
<div>
div안에 있는거
<div>div안의 div태그</div>
</div>
</body>
</html>
2번 선택자 안의 클래스를 지정
div 태그 안에 따로 있는 태그의 클래스 명을 지정하는게 아니라
<!DOCTYPE html>
<html lang="ko">
<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.div{
color:red;
}
</style>
</head>
<body>
<div class="div">div태그안에 클래스명이 div인거</div>
<div>그냥 div태그인거</div>
</body>
</html>
3번 2번이랑 다르게 div안의 자식태그에 사용하는거
<!DOCTYPE html>
<html lang="ko">
<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 .div{
color:red;
}
</style>
</head>
<body>
<div>
div안에 있는거
<p class="div">div안의 p태그인데 클래스명이 있는거</p>
</div>
</body>
</html>
4번 2번이랑 비슷한건데 이건 div태그인데 id명이 있는거
<!DOCTYPE html>
<html lang="ko">
<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#div{
color:red;
}
</style>
</head>
<body>
<div>
div안에 있는거
<div id="div">div태그안의 div인데 id명이 있는거</div>
</div>
</body>
</html>
5번 div태그 하위에 있는 요소들 중에 id 값을 가진걸 지정한다
<!DOCTYPE html>
<html lang="ko">
<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 #div{
color:red;
}
</style>
</head>
<body>
<div>
div안에 있는거
<p id="div">div태그안의 div인데 id명이 있는거</p>
</div>
</body>
</html>
6번 ,는 and랑 똑같다
7번 div태그에 클래스명을 div라 지었고
<!DOCTYPE html>
<html lang="ko">
<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.div p#div{
color:red;
}
</style>
</head>
<body>
<div class="div">
div태그, 클래스명이 div
<p id="div">div태그 안의 p태그, id명이 div</p>
</div>
</body>
</html>
8번 형제선택자
선택한요소 다음에 있는 요소를 선택하는거
<!DOCTYPE html>
<html lang="ko">
<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+div{
color: red;
}
</style>
</head>
<body>
<div>1</div>
<div>2</div>
</body>
</html>
9번 자식선택자
앞에있는 선택자의 바로 밑에 있는 선택자만 요소를 적용할 수 있다.
<!DOCTYPE html>
<html lang="ko">
<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.a > span{
color:red;
}
*/
div > span{
color: green;
}
</style>
</head>
<body>
<div class="a">
<span>1</span>
<div>
2
<span>3</span>
</div>
</div>
</body>
</html>
<style>div.a > span { color : red ; } </style>
<style> div > span { color: green; } </style>
10번 속성선택자
<!DOCTYPE html>
<html lang="ko">
<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"] {
border: 1px solid red;
}
input[type="radio"] {
margin: 30px;
}
input[type="password"] {
border: 1px solid blueviolet;
}
input[type="checkbox"] {
margin: 30px;
}
</style>
</head>
<body>
<input type="text"> <br>
<input type="radio"> <br>
<input type="password"> <br>
<input type="checkbox">
</body>
</html>
input의 type아니더라고 title, name, id 이런 속성도 이런방법으로 스타일을 적용할 수 있다.
<!DOCTYPE html>
<html lang="ko">
<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[name] {
border: 1px solid red;
}
input[id] {
border: 1px solid blue;
}
input[title] {
border: 1px solid green;
}
input[value] {
border: 1px solid orange;
}
</style>
</head>
<body>
<input type="text" name=""> <br>
<input type="text" id=""> <br>
<input type="password" title=""> <br>
<input type="password" value="">
</body>
</html>
11번~13번 가상선택자
11번 마우스를 올리면 스타일이 적용
<!DOCTYPE html>
<html lang="ko">
<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:hover{
color: red;
}
</style>
</head>
<body>
<a href="#">test</a>
</body>
</html>12번 마우스를 눌렀을때
<!DOCTYPE html>
<html lang="ko">
<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:active{
color: red;
}
</style>
</head>
<body>
<div>test</div>
</body>
</html>13번 포커스가 맞춰지면 반응하는 거 마우스로 누르거나 탭키로 포커스를 주면 반응한다
<!DOCTYPE html>
<html lang="ko">
<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:focus{
font-size: 20px;
}
</style>
</head>
<body>
<a href=#>test1</a> <br>
<a href=#>test2</a><br>
<a href=#>test3</a>
</body>
</html>응용
<!DOCTYPE html>
<html lang="ko">
<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 {
display: inline-block;
margin: 5px;
width: 100px;
height: 100px;
text-align: center;
line-height: 100px;
}
div:hover{
font-size: 30px;
}
.a{
border: 1px solid red;
}
.b{
border: 1px solid green;;
}
.c{
border: 1px solid firebrick;
}
</style>
</head>
<body>
<div class="a">test1</div>
<div class="b">test2</div>
<div class="c">test3</div>
</body>
</html>
14번 자식선택자 div태그 안에 첫번째 div를 뜻한다
<!DOCTYPE html>
<html lang="ko">
<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 div:first-child{
color: red;
}
</style>
</head>
<body>
<div>
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
</body>
</html>
