CSS 선택자 (1)
css 적용방법 : head태그 안에 style태그를 만든다
* {} : 전체 선택자
태그명 {} : 태그 선택자
# 변수명 {} : id 선택자
.클래스명 {} : 클래스 선택자
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
* {
color: red;
background: yellow;
b {
font-size: large;
}
#id_txt {
background: gray;
}
.class_txt {
color: black;
}
}
</style>
</head>
<body>
<dl>
<dt><b>CSS</b></dt>
<dd id="id_txt">스타일 시트 표준안</dd>
<dd class="class_txt">
웹 문서에 글꼴, 색상, 정렬과 각 태그의 배치 방법 등 디자인 적용
</dd>
<dt><b>CSS구성</b></dt>
<dd>선택자(selector) : 디자인을 적용할 대상 지정</dd>
<dd>속성 : 어떤 디자인을 설정할지</dd>
<dd>속성 값 : 속성에서 선택한 디자인을 어떻게 반영할지</dd>
</dl>
</body>
</html>
실행 결과
CSS 선택자 (2)
* id를 부여할 경우 문서내의 유일한 값으로 사용, 문서내에서 동일한 id를 부여 불가능
* class는 다른 태그에서 사용 가능, 여러개를 동시에 부여 불가능
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
#id01 {
color: red;
}
#id02 {
background: aqua;
}
.class01 {
color: blue;
}
.class02 {
background: aqua;
}
</style>
</head>
<body>
<div id="id01" class="class02">
id를 부여할 경우 문서내의 유일한 값으로 사용<br />
문서내에서 동일한 id를 부여하면 안된다
</div>
<div class="class01 class02">
class는 다른 태그에서 사용해도 된다<br />
여러개를 동시에 부여할 수 있다
</div>
</body>
</html>
실행 결과
CSS 선택자 활용
.클래스명 태그명 {} : 하위 선택자
.클래스명 > 태그명 {} : 자식 선택자
.클래스명 + 태그명 {} : 인접 선택자
.클래스명 ~ 태그명 {} : 형제 선택자
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
.box p {
color: lime;
}
.box > p {
color: orange;
}
.box + div {
background: gray;
}
.box ~ p {
background: green;
}
</style>
</head>
<body>
<div class="box">
<p>1. 하위선택자는 특정 선택자 하위의 모든 요소를 말한다</p>
<div>
<p>2. 자식 선택자는 직속 자식 요소를 말한다</p>
</div>
<p>3.다음 내용</p>
</div>
<div>1. 인접 선택자는 바로 뒤에 나오는 하나의 요소</div>
<div>2. 인접 선택자는 바로 뒤에 나오는 하나의 요소</div>
<p>형제 선택자는 같은 계층에 있는 요소에 적용 된다</p>
</body>
</html>
실행 결과
CSS hover
태그명:hover {} : 해당 태그에 마우스가 올라가면 변하게 설정
transition: all 1.5s linear 0.5s; : 구현되는 속도를 1.5초, 마우스가 올라간 후 실행까지 0.5초로 지정
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
div {
width: 200px;
height: 100px;
color: blue;
background: green;
opacity: 0.9;
}
div:hover {
width: 400px;
height: 50px;
color: red;
background: yellow;
opacity: 0.3;
transition: all 1.5s linear 0.5s;
}
</style>
</head>
<body>
<h2>가상 선택자</h2>
<div>가상 클래스를 이용한 애니메이션 효과</div>
</body>
</html>
실행 결과
CSS 기능 (1)
a:link {} : 웹 문서에서 사용자가 방문하지 않았던 곳
a:visited {} : 웹 문서에서 사용자가 방문한 곳
a:hover {} : 포인터가 올라갔을 경우
a:active {} : 클릭이 되는 순간
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
a:link {
color: green;
text-decoration: none;
}
a:visited {
color: red;
}
a:hover {
text-decoration: overline;
color: black;
}
a:active {
background: yellow;
}
</style>
</head>
<body>
<a href="#">test</a>
<a href="https://www.naver.com">naver</a>
<hr />
link : 웹 문서에서 사용자가 방문하지 않았던 곳<br />
visited : 웹 문서에서 사용자가 방문한 곳<br />
hover : 포인터가 올라갔을 경우<br />
active : 클릭이 되는 순간<br />
</body>
</html>실행 결과
CSS overflow
overflow: hidden; = 상위 블록에서 설정한 값 중 넘쳐나가는 것을 방지
overflow: auto; = 정해진 사이즈에 맞게 맞춰준다. 넘어가게 되면 스크롤로 지정
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
.div01 {
overflow: hidden;
background: blue;
height: 100px;
}
.div01 div {
background: red;
width: 200px;
height: 200px;
}
.txt {
overflow: auto;
height: 100px;
width: 100px;
background: aqua;
}
</style>
</head>
<body>
<div class="div01">
hello
<div>css</div>
</div>
<h1>다음 내용</h1>
<div class="txt">
제238조<br />
회원이 지켜야할 내용이 있다면 지켜주세요<br />
더이상 내용은 없음<br />
그래 반갑다<br />
즐거운 하루 되세요~^^<br />
</div>
</body>
</html>
실행 결과
CSS 기능 (2)
margin: auto; = 전체 기준 가운데가 아니라, 부모 블록 기준으로 해당 블록을 가운데로 지정
transform: scale(1.2); : 해당 사진을 1.2배 확대
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
img {
width: 200px;
height: 200px;
}
div {
background: gainsboro;
text-align: center;
}
.over {
overflow: hidden;
margin: auto;
width: 200px;
height: 200px;
}
img:hover {
transform: scale(1.2);
transition: all 1s;
}
.h01:hover {
display: none;
}
.h02 {
display: none;
}
.h01:hover + .h02 {
display: block;
}
</style>
</head>
<body>
<div style="height: 200px">
<h1>Hover Effect</h1>
<div class="h01"><img src="image.png" /></div>
<div class="h02"><button>기사</button><button>구독</button></div>
</div>
<hr />
<div>
<h1>Hover Effect</h1>
<div class="over">
aaa<br />
<img src="image.png" />
</div>
</div>
</body>
</html>
실행 결과
CSS 기능 (3)
justify-content: flex-end; = 블록 끝나는 지점에 지정
border: 1px solid orange; = 실선 박스로 표시
text-decoration: none; = 밑줄 제거
margin: 바깥쪽으로 밀어냄
padding: 안쪽으로 밀어냄
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
.nav > ul {
list-style: none;
display: flex;
justify-content: flex-end;
}
.nav ul li a {
text-decoration: none;
color: white;
}
.nav ul li a:hover {
color: orange;
border-bottom: 1px solid orange;
padding-bottom: 5px;
transition: all 0.25s;
}
.nav {
background-color: black;
}
.nav ul li {
padding: 10px 10px;
}
</style>
</head>
<body>
<nav class="nav">
<ul>
<li><a href="">HOME</a></li>
<li><a href="">BOARD</a></li>
<li><a href="">MEMBERSHIP</a></li>
</ul>
</nav>
<hr />
display : flex사용시 아래내용 적용 가능<br />
flex-start : 왼쪽 끝 정렬<br />
flex-end : 오른쪽 끝 정렬<br />
space-around : 요소 좌우 동일 간격 정렬<br />
</body>
</html>
실행 결과
CSS 또 다른 사용 방법
<link href="test09.css" rel="stylesheet"> = css파일을 불러오는 방식
px : 해상도에 따라 상대적으로 달라지는 단위
pt : 고정 크기
% : 부모 요소의 크기를 100%기준으로 계산
em : 부모 크기를 100% 기준으로 100분의 1단위
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<link href="test09.css" rel="stylesheet" />
</head>
<body>
기본 글자 크기는 16px<br />글자 크기 단위<br />
- px : 해상도에 따라 상대적으로 달라지는 단위<br />
- pt : 무조건 고정 크기<br />
- % : 부모 요소의 크기를 100%기준으로 계산<br />
- em : 부모 크기를 100% 기준으로 100분의 1단위
<hr />
<a href="http://pxtoem.com.au/" target="_blank">단위 변환 사이트</a>
<div class="px">내용</div>
<div class="pt">내용</div>
<hr />
<div>기본 크기 16px 크기</div>
<div class="per">부모가 없는 기본 16px의 150% 크기</div>
<div class="em">부모가 없는 기본 16px의 1.5em 크기</div>
<div class="px">
부모 크기 24px
<div class="px">자식 24px</div>
<div class="per">자식 150%</div>
<div class="em">자식 1.5em</div>
</div>
</body>
</html>
실행결과
CSS 기능 (4)
line-height: 400px; height: 400px; = 동일하면 중앙에 배치
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
.font {
font-weight: bold;
font-style: italic;
line-height: 400px;
height: 400px;
background: red;
}
.color01 {
color: red;
}
.color02 {
color: blue;
}
.color03 {
color: rgb(255, 100, 255);
}
.color04 {
color: rgba(0, 0, 0, 0.3);
}
</style>
</head>
<body>
<div class="color01">색상 확인</div>
<div class="color02">색상 확인</div>
<div class="color03">색상 확인</div>
<div class="color04">색상 확인</div>
<div>시작</div>
<div class="font">볼드체</div>
<div>끝</div>
</body>
</html>
실행 결과
CSS display
display: inline; = 글자크기만큼 들어온다
display: block; = 블록 크기만큼 들어온다
display: inline-block; = 사이즈가 조정가능하다
display: none; = 숨겨진다
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
div {
background: skyblue;
display: inline-block;
width: 200px;
text-align: center;
}
span {
background: olive;
display: block;
}
.visible:hover ~ .none {
display: inline;
}
.none {
display: none;
background: yellowgreen;
}
</style>
</head>
<body>
<div>div-01</div>
<div>div-02</div>
<span>span-01</span>
<span>span-02</span>
<h1 class="visible">마우스를 올려 주세요</h1>
<h1 class="none">내용</h1>
즐거운 날~~~~
</body>
</html>
실행 결과
CSS 기능 (5)
vertical-align : 인라인 블록 등을 포함한 모든 인라인요소의 수직 정렬을 위해 사용
display: table-cell; : 요소(td)처럼 표현
border-radius: 10px; = 각진 input창을 둥그렇게 바꿔줌
<!DOCTYPE html>
<html lang="en">
<head>
<style>
.in-block {
background: orange;
width: 200px;
height: 50px;
display: inline-block;
line-height: 50px;
text-align: center;
text-decoration: none;
}
div {
background: aqua;
width: 300px;
height: 300px;
/*line-height: 100px;*/
display: table-cell;
vertical-align: middle;
}
label {
height: 30px;
background: red;
width: 100px;
display: inline-block;
line-height: 30px;
}
input {
width: 300px;
height: 30px;
border-radius: 10px;
}
</style>
</head>
<body>
<a href="#" class="in-block">1홈으로 이동</a>
<a href="#" class="in-block">2홈으로 이동</a>
<a href="#" class="in-block">3홈으로 이동</a>
<div>여러줄<br />가운데<br />정령<br />되나요</div>
<label>아이디 입력</label><input />
</body>
</html>
실행 결과
Quiz1
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
#main {
background: gray;
}
#warp {
width: 300px;
}
h2:hover ~ #main > h2 {
color: aqua;
}
p:hover {
background: white;
}
</style>
</head>
<body>
<div id="warp" style="width: 300px">
<h2>오늘의 할 일</h2>
<div id="main">
<h2>12월 31일 할 일</h2>
<ul>
<b><li>오전 10시</li></b>
<p>아침밥 먹기</p>
<b><li>낮 12시</li></b>
<p>아침밥 먹기</p>
<b><li>오후 4시</li></b>
<p>아침밥 먹기</p>
</ul>
</div>
</div>
</body>
</html>실행 결과
Quiz2
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
div {
width: 200px;
height: 50px;
background: red;
text-align: center;
color: white;
margin-left: 10px;
padding-top: 25px;
}
div:hover {
background: gray;
}
section {
background-color: pink;
width: 450px;
height: 320px;
padding-top: 15px;
}
</style>
</head>
<body>
<section>
<div>Home</div>
<div>Profile</div>
<div>Board</div>
<div>Contact</div>
</section>
</body>
</html>실행 결과
