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>
h1, p, h2
{
color: rosybrown;
font-size: 16px;
display: inline;
font-weight: normal;
}
/* 반응선택자 */
a:hover {
color: black;
text-decoration: none;
}
/* 마우스로 클릭한 요소를 선택 */
button:active{
color: orange;
background-color: white;
}
div:hover{
color: yellow;
}
div:active{
color: red;
}
</style>
</head>
<body>
<h1>CSS 선택자</h1>
<p>HTML 요소를 접근할 때 사용하는 형식</p>
<h2>CSS 스타일</h2>
<br><br>
<a href="https://www.naver.com">네이버</a>
<button>
버튼
</button>
<br><br>
<div>
CSS는 사랑입니다.
</div>
</body>
</html>
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>
/* 명시도 계산으로 스타일 우선적용
전체선택자 : 0
타입선택자 : 1
클래스선택자 :10
아이디선택자 : 100
*/
/* 102점 */
#box p s{
color: yellow;
}
/* 111점 */
#box .my_color span{
color: red;
}
</style>
</head>
<body>
<div id="box">
<p class="my_color">
<span>
CSS 스타일 우선순위 (명시도 계산법)
</span>
</p>
</div>
</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>
/* display속성
- 화면에 보여지는 형태를 지정
- inline, block, inline-block, none
- inline: 내용만큼의 영역을 가지는 속성
- block: 웹페이지의 전체 너비를 영역으로 가지는 속성
- inline-block : 내용만큼의 영역을 가지면서 여백, 크기 조절이 가능한 속성
- none : 요소를 화면에서 제거하는 속성
*/
/* 타입을 바꿔보자 */
h1{
/* inline 은 크기조절 할 수없기에 대부분 block , inline-block 사용경향이 큼 */
display : inline;
margin: 100px;
padding : 100px;
}
/* a{
display: block;
/* 여백을 줄때는 margin padding
margin: 100px;
padding : 100px;
}
*/
span{
/* 인라인에서도 반영하기 위해서 */
display: inline-block; margin: 100px; padding : 100px;
}
div{display: none;}
sup{
display: none;
}
/* a태그에 마우스를 올리면 옆에있는 요소를 선택하겠다. 옆에 sup가있기에 sup를 가르킴
보이지가 않아 선택할 수 없으니 a태그를 기준으로 display값을 inline으로 지정하겠다!! */
a:hover + sup{
display: inline;
}
</style>
</head>
<body>
<h1>Block 특성을 가진 요소</h1>
<a href="">inline 특성을 가진 요소</a>
<span>span요소</span>
<div>
display 속성 - none
</div>
<br><br>
<!-- sup는 약간 위에 보이게 가능함 -->
<a href=""#">네이버</a><sup>www.naver.com</sup>
<br><br>
<a href=""#">다음</a><sup>www.daum.net</sup>
</body>
</html>
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>
div{
/*
1.값을 하나만 정의하면 4방향에 들어감
2.값을 두개 넣으면 top bottom
3.값을 세개넣으면 위쪽 , 좌우, 아래쪽
4.값을 4개넣으면 시계방향임 12시부터 시작
*/
width: 100px;
height: 100px;
border: 1px solid black;
/* 요소를 가운데 배치 단 display속성이 inline 적용불가 */
margin: auto;
/* 바깥쪽 여백 */
margin: 50px 30px 50px 10px;
/* 안쪽 여백 */
/* 패딩을 주면 원래 넓이 높이에 더해져서 크기에 영향을 미침 */
padding: 10px
}
</style>
</head>
<body>
<div>box</div>
</body>
</html>
