목차
1.
2.
복습
•
사이즈에 대한 단위
◦
px, em, % 사용
•
div:nth-child
◦
table에서 많이 사용 - tr의 홀수, 짝수 구분
◦
div: 형제 그룹
<style>
/* % 사이즈 */
p:nth-child(1) {}
p:nth-child(2) {
/* font-size: 100%; */
/* font-size: 1em; */
/* 국내에서는 px를 주로 사용 */
font-size: 16px;
}
p:nth-child(3) {
/* font-size: 150%; */
/* font-size: 1.5em; */
font-size: 24px;
}
p:nth-child(4) {
/* font-size: 200%; */
/* font-size: 2em; */
font-size: 32px;
}
</style>
<body>
<div>box-1</div> <!--첫 번째 형제 -->
<div>box-2</div>
<div>box-3</div>
<header>
<div>box-4</div>
</header>
</body>
HTML
복사
•
border-radius
•
버튼 만들기 실습
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>css_btn</title>
<style>
#btn {
margin: 50px;
background-color: orangered;
width: 250px;
height: 150px;
border: 20px solid #dddddd;
/* 전체적으로 이벤트 적용됨 */
border-radius: 40px;
}
#btn>a {
display: block;
height: 150px;
color: #FFFFFF;
text-decoration: none;
cursor: pointer;
text-align: center;
line-height: 150px;
font-size: 48px;
font-style: italic;
font-weight: bold;
}
.fs-32 {font-size: 32px;}
.fs-2m {font-size: 2em;}
.fs-lg {font-size: large;}
.fs-sm {font-size: small;}
.font_gs {font-family: '궁서체';}
/* a:hover {
background-color: blueviolet;
color:azure
} */
#btn:hover {
background-color: cadetblue;
}
</style>
</head>
<body>
<h3 class="fs-32 font_gs">안녕하세요</h3>
<h3 class="fs-2m">안녕하세요</h3>
<h3 class="fs-lg">안녕하세요</h3>
<h3 class="fs-sm">안녕하세요</h3>
<div id="btn">
<a>click</a>
</div>
</body>
</html>
HTML
복사
•
웹 폰트 적용
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>css_webfont</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Jua&family=Nanum+Gothic&family=Nanum+Pen+Script&display=swap" rel="stylesheet">
<style>
h1 {
/* background-color: #cccccc; */
border: 1px solid black;
width: 500px;
margin: 30px;
}
.b_sd {
box-shadow: 10px 10px 10px gray;
}
h1:hover {
background-color: yellow;
color: blue;
}
/* 폰트 지정 */
.ff-nanum-pen {
font-family: "Nanum Pen Script", cursive;
font-weight: 400;
font-style: italic;
}
.ff-jua {
font-family: "Jua", sans-serif;
font-weight: 400;
font-style: normal;
}
.ff-nanum-gothic {
font-family: "Nanum Gothic", sans-serif;
font-weight: 400;
font-style: normal;
}
</style>
</head>
<body>
<h1 class="ff-jua b_sd">모든 인류 구성원의 천부의 존엄성과 동등하고 양도할 수 없는 권리를 인정하는</h1>
<h1 class="ff-nanum-gothic b_sd">모든 인류 구성원의 천부의 존엄성과 동등하고 양도할 수 없는 권리를 인정하는</h1>
<h1 class="ff-nanum-pen b_sd">모든 인류 구성원의 천부의 존엄성과 동등하고 양도할 수 없는 권리를 인정하는</h1>
</body>
</html>
HTML
복사
2. 속성
1.
절대 위치 좌표: 요소의 X 좌표와 Y 좌표 설정해 절대 위치 지정
2.
상대 위치 좌표: 요소 입력 순서에 따른 상대 위치 지정
키워드 | 설명 |
static | 상대 위치 좌표 설정 |
relative | 초기 위치에서 상하좌우로 이동 |
absolute | 절대 위치 좌표 설정 |
fixed | 화면을 기준으로 절대 위치 좌표 설정 |
•
폰트 지정
◦
폰트 : 사이즈, 컬러, 두께, 스타일, 폰트 패밀리(웹폰트)
•
이미지
◦
사이즈 (폭, 높이)
•
텍스트 : 정렬, 줄 간격
•
배경 : 색상, 이미지
•
block : 사이즈(높이, 폭), 보더, 마진, 패딩