되돌아보기
HTML/CSS는 전공에서도 그렇게 자주 다뤄보질 않았던 바람에 굉장히 어렵게 느껴지는 것 같다.
태그 자체를 외우지 않더라도 어떤 상황에서 어떤 태그가 쓰여야 하는지 정도는 알고 있어야한다 싶은데, 그걸 짧은 시간 내에 굉장히 많은 양을 주입하려니까 거의 머릿속에 안 들어오는 느낌..
화면을 보고 따라 만드는 실습에도 현재 한계가 많은 상태라 따로 서적 등을 통해 한 부분씩 천천히 이해하고, 응용을 해 볼 수 있는 예제 문제나 사이트를 찾아야 할 것 같다.
CSS
6. 폰트
font-family 에 대해서부터 시작함.
폰트를 가져다 쓰는 방법
- fonts.google.com 등에서
<link>로 가져다 쓰는 방법- fonts.google.com 등에서
@import로 가져다 쓰는 방법- 로컬에 서체를 직접 저장해 두고
@font-face로 가져다 쓰는 방법
폰트 사용시에는 브라우저 단에서 기본적으로 지원하는 폰트가 아닌 폰트를 사용하는 경우, 유사 시 (폰트를 타 웹에서 가져다 쓰는 와중, 해당 웹이나 폰트가 사라진 경우) 를 대비해 폰트를 하나 더 지정해야 한다.
<style>
.font1 {
font-family: 'Jua', sans-serif;
}
</style>이런 느낌으로.
실습 2. font-family
<!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>
<!--<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&display=swap" rel="stylesheet">-->
<style>
@import url('https://fonts.googleapis.com/css2?family=Jua&display=swap');
@font-face {
font-family: 'CookieRun';
src: url(./fonts/CookieRun\ Regular.ttf);
}
div {
font-size: 30px;
margin-bottom: 30px;
}
.font1 {
/* serif : 바탕체 계열 */
font-family: serif;
}
.font2 {
/* sans-serif : 고딕체 계열 */
font-family: sans-serif;
}
.font3 {
/* monospace : 가로폭이 동등한 글꼴 계열 */
font-family: monospace;
}
.font4 {
/* cursive : 필기체 계열, 한글은 궁서체에 대응*/
font-family: cursive;
}
.font5 {
/* fantasy : 화려한 계열 */
font-family: fantasy;
}
.font6 {
font-family: 'Jua', sans-serif;
}
h1 {
/* font-family: 'CookieRun', cursive;
font-size: 30px;
font-weight: bold;
font-style: oblique;
line-height: 1.4em; */
/* 하단과 같이 단축속성으로 적을 수도 있음.
style, weight, size, / line-height, font-family 순
기울기, 두께, 크기 / 줄높이, 글꼴
단축 속성 사용 시 font-size와 font-family는 필수로 지정!!*/
font: oblique bold 30px / 1.4 'CookieRun', cursive;
}
</style>
</head>
<body>
<div class="font1">Hello World!</div>
<div class="font2">Hello World!</div>
<div class="font3">Hello World!</div>
<div class="font4">Hello World!</div>
<div class="font5">Hello World!</div>
<div class="font6">우리가 어떤 민족입니까!</div>
<h1>용감한 쿠키가 달립니다</h1>
</body>
</html>실습 3. color
폰트 색상을 지정하는 방법에는 #FFFFFF 과도 같은 웹 컬러, RGB 값을 전달하는 방법, RGBA 값을 전달하는 방법 등이 있다.
웹 컬러 코드의 경우 VSCode 등의 확장 프로그램에서 확인할 수 도 있지만, https://htmlcolorcodes.com/ 과 같은 웹 사이트에서 확인하는 것도 도움이 된다.
<!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 {
font-size: 40px;
}
.c1 {
color: #123456;
}
.c2 {
color: rgb(255, 170, 170);
}
.c3 {
color: rgba(255, 170, 170, 0.5);
}
</style>
</head>
<body>
<div class="c1">Hello</div>
<div class="c2">Hello</div>
<div class="c3">Hello</div>
</body>
</html>실습 4. text-align
텍스트에 효과를 주려면 스타일에서 text-decoration 을 통해 줄 수 있는데, underline 이라면 밑줄 효과, line-through 라면 취소선 효과 등을 줄 수 있다.
text-indent 는 전달된 값 만큼 들여쓰기를 해 주고,
letter-spacing 은 글자 사이의 간격, word-spacing은 단어 사이의 간격을 정한다.
text-align 의 경우 몇 가지 옵션이 있는데, center 라면 가운데 정렬, justify 면 양쪽 정렬을 의미한다.
<!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>
h1 {
text-decoration: underline;
}
h2 {
text-decoration: line-through;
}
.img-box {
text-indent: 500px;
}
h3 {
letter-spacing: 30px;
word-spacing: 30px;
}
p {
font-size: 24px;
padding: 20px;
text-align: justify;
}
</style>
</head>
<body>
<h1>안녕</h1>
<h2>메롱</h2>
<div class="img-box">[이거 이미지에요]</div>
<h3>Hello World!!!</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque a diam vehicula, accumsan velit et, ornare
eros. In at est eros. Phasellus diam neque, dictum ac vehicula in, accumsan nec risus. In pretium eleifend enim,
at feugiat mi euismod ac. In tortor tellus, venenatis ac blandit eu, ornare sit amet dui. Vivamus orci eros,
bibendum id tellus eu, commodo euismod purus. Donec dictum lectus eget est tempus, id dignissim metus tristique.
Cras sed condimentum nisi. Suspendisse blandit metus risus, eget suscipit lacus ultricies id. Fusce vel neque
ante. Morbi scelerisque ultrices tincidunt. Donec dapibus tristique nisl, in posuere nunc egestas at.
<br>
Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Morbi rutrum eros sit
amet urna hendrerit varius. Sed sapien quam, lacinia nec porttitor maximus, pellentesque vel libero. Vestibulum
lacinia velit sed libero imperdiet, id viverra libero efficitur. Proin ac diam eget sapien tempor ultricies in
vel magna. Donec malesuada nibh augue, sit amet dapibus lacus pulvinar gravida. Morbi lobortis, urna ac
tincidunt consectetur, ex risus varius augue, elementum vestibulum mi leo et neque. Integer nibh nibh, varius
non neque imperdiet, luctus euismod nisi. Curabitur efficitur faucibus purus. Nunc congue dolor ultrices sem
iaculis molestie.
</p>
</body>
</html>7. 배경
실습 1. background
배경 이미지를 지정 시에는 background-image 의 속성값으로 url() 함수 안에 이미지의 주소를 전달하면 된다.
배경 이미지 크기를 cover, contain 등의 속성 값을 전달해 줄 수도 있는데, cover 는 박스 영역의 가로 비율에 맞춰 세로 크기를 지정하므로 세로로 긴 사진이면 짤릴 염려가 있고, contain 의 경우 짧은 쪽의 너비 기준으로 맞춰서 짤리진 않지만 빈 공간이 생길 수 있다.
<!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>
.box {
/*width: 550px;
height: 350px;
border: 2px solid gray;
background-color: yellow;
background-image: url(./images/sky.jpg);
background-size: auto;
background-repeat: no-repeat;
background-position: 20%;*/
background: yellow url(./images/sky.jpg) no-repeat 0% 0% / cover;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>실습 2. bg-attatchment
background-attatchment 의 속성값을 주는 방법에 따라 배경 이미지의 표시 방법이 달라지는데,
- scroll : 배경 이미지가 요소를 따라 같이 스크롤됨 (기본값)
- fixed : 배경 이미지가 뷰포트(보고있는 겉의 화면)에 고정되어 요소와 같이 스크롤되지 않음
- local : 요소 내 스크롤 시 배경 이미지가 같이 스크롤됨
<!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>
body {
height: 3000px;
}
.box {
width: 90%;
height: 200px;
margin: 200px auto 0;
overflow: auto;
background-image: url(./images/sky.jpg);
background-size: 300px 200px;
background-repeat: no-repeat;
background-attachment: local;
}
</style>
</head>
<body>
<div class="box">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum mattis id velit tempus eleifend. Proin
posuere turpis at iaculis commodo. Nam ante erat, imperdiet non mollis non, pretium sodales arcu.
Suspendisse at scelerisque risus. In malesuada viverra ipsum interdum dignissim. Nam maximus egestas dui, ac
lobortis orci viverra vitae. Nunc vel ultricies enim. Nam sollicitudin, nisl vel gravida pellentesque, nibh
ipsum placerat metus, quis congue lorem est sed nisi. Pellentesque accumsan fringilla massa id ornare. Cras
ut augue tristique, porta nisl vel, scelerisque ante. Vestibulum feugiat sollicitudin odio nec iaculis. Cras
venenatis turpis sed ex vestibulum, ac volutpat urna finibus.
<br>
Cras id tristique nisl. Aliquam erat volutpat. Sed nec est tortor. Fusce rutrum eros est, eu consequat nibh
iaculis ut. Proin lobortis elit ut nisi gravida, non viverra odio cursus. Vestibulum gravida massa augue,
non bibendum ante venenatis at. Phasellus pharetra purus sed eros egestas, eget tincidunt enim fringilla.
Maecenas tellus elit, congue sed felis nec, luctus accumsan nunc. Etiam pulvinar et eros non accumsan.
Phasellus ante tellus, consequat non dolor ut, dictum dapibus magna. Vestibulum lacinia lacus justo, at
pellentesque enim placerat a. Mauris id vehicula ipsum, quis fermentum erat. Mauris mattis lacus id
dignissim hendrerit. Aliquam pellentesque ut ex non posuere. Nulla tincidunt diam orci, id aliquam sem
convallis quis.
<br>
Proin eu sagittis magna, ut fringilla quam. Duis non tortor ex. Mauris congue eget odio sed fringilla.
Pellentesque feugiat urna convallis urna sollicitudin, sit amet eleifend tellus commodo. Pellentesque
eleifend condimentum vulputate. Vestibulum facilisis tortor sit amet lectus convallis malesuada quis sit
amet est. In vulputate, est at porttitor consectetur, risus risus hendrerit tortor, nec porta neque neque ac
ante. Vivamus pellentesque, nibh non vestibulum lacinia, lacus diam faucibus elit, ac auctor leo arcu quis
ligula. Vivamus dapibus enim at pulvinar viverra. Morbi imperdiet rhoncus consectetur. Quisque luctus,
sapien a ultricies consectetur, mauris mauris tincidunt leo, id porttitor tellus ligula eget dolor. Nunc
pharetra rutrum bibendum. In sagittis, felis eu rutrum condimentum, elit libero porta quam, ut aliquam ex mi
vel enim. Mauris ut rutrum turpis. Sed est ante, sagittis in mi a, malesuada tincidunt mi.
</p>
</div>
</body>
</html>8. 박스 띄우기
실습 1. basic
float 속성을 사용하여 속성값을 전달하면, 좌측/가운데/우측 등 요소를 띄우게 되고, 아래의 예시의 경우엔 텍스트가 옆으로 딸려올라와서 붙게 되었다.
<!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>
.picture {
width: 200px;
height: 150px;
background-color: red;
float: right;
margin-right: 15px;
}
</style>
</head>
<body>
<div class="picture"></div>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec turpis tellus, congue sit amet imperdiet eget,
euismod eu lorem. Pellentesque dui nibh, porttitor sed enim id, cursus blandit tellus. Nam vestibulum erat eget
viverra rutrum. Interdum et malesuada fames ac ante ipsum primis in faucibus. Sed placerat porta elit vitae
tincidunt. Sed lacus nibh, congue vel cursus ac, viverra quis mauris. Donec arcu dolor, ullamcorper vitae
vulputate sit amet, bibendum sed augue. Vestibulum ante nunc, suscipit vitae imperdiet a, molestie vitae sem. Ut
tincidunt, nisi non mollis aliquam, nibh dolor scelerisque lorem, ac lacinia lorem ex id odio. Etiam massa
ligula, tempor non nulla at, aliquam dapibus mauris. Pellentesque a blandit metus. Sed mattis ante quam, at
iaculis nisi feugiat vitae. Maecenas lacinia lacus elit, et pharetra mauris vestibulum nec. Etiam facilisis est
elit, ac consequat eros rutrum quis.
<br>
Sed at posuere neque, in vehicula ligula. Pellentesque fringilla magna sem. Phasellus ipsum tellus, gravida vel
lorem iaculis, imperdiet egestas magna. Suspendisse feugiat eros in ultrices pulvinar. Aliquam posuere euismod
ante. Pellentesque pulvinar quis justo non placerat. Aliquam erat volutpat. Suspendisse eu justo quam. Vivamus
id consectetur ante. Maecenas consequat feugiat libero in vulputate. Curabitur vel odio nec ipsum lacinia
interdum non id velit. Nunc ultricies rutrum urna non vestibulum. Phasellus in rhoncus purus. Morbi tincidunt
varius purus, sed hendrerit velit vestibulum a.
<br>
In tincidunt ullamcorper odio, nec bibendum nisi commodo at. Aenean faucibus efficitur ipsum, a sagittis ex
euismod id. Vivamus viverra lacus sit amet nunc fermentum, sit amet fermentum erat consequat. Phasellus commodo
tincidunt aliquet. Proin et sapien mauris. Vestibulum neque diam, vestibulum nec imperdiet ut, vulputate et
mauris. Proin varius porta mi, nec sagittis nulla tincidunt eu. Maecenas efficitur commodo libero, eget
ultricies dui gravida vitae. Vivamus condimentum pellentesque tempor. Curabitur tincidunt luctus egestas. Aenean
vehicula augue id odio ornare scelerisque. Mauris justo eros, euismod non justo eu, posuere scelerisque nisl.
</p>
</body>
</html>실습 2. 박스 수평 정렬
1~3의 박스들은 float 로 떠있고, orange로 표시된 div 는 clear 속성을 사용해서 float 로 띄운 요소를 떨어뜨렸다.
<!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>
.box {
width: 150px;
height: 100px;
background-color: red;
font-size: 30px;
color: #fff;
margin: 10px;
float: left;
}
.new-box {
width: 200px;
height: 150px;
background-color: orange;
clear: left;
}
</style>
</head>
<body>
<div class="box">1</div>
<div class="box">2</div>
<div class="box">3</div>
<div class="new-box">4</div>
</body>
</html>실습 3. float 해제
overflow: hidden 과 같이 해결하는 경우가 있지만 가상 클래스로 해결하는 것이 정석적이라고 한다.
이 예제의 경우 clearfix 가 없으면, 자식 요소들이 float 되면서 부모 요소의 height가 없어져서, 형식이 무너짐을 방지하기 위해 이렇게 한다고 한다.
<!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>
.container {
width: 700px;
padding: 20px;
border: 3px solid red;
/* overflow: hidden; */
}
.box {
width: 200px;
height: 150px;
border: 3px solid green;
background-color: yellow;
font-size: 50px;
float: left;
}
.clear-box {
clear: both;
}
.clearfix::after {
content: '';
display: block;
clear: both;
}
</style>
</head>
<body>
<div class="container clearfix">
<div class="box">1</div>
<div class="box">2</div>
<!-- <div class="clear-box"></div> -->
</div>
</body>
</html>실습 4. 문제 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>
section.tea {
width: 500px;
padding: 10px;
border: 5px solid #caa;
margin: 20px auto 0;
background-color: pink;
}
h1 {
font-size: 24px;
font-weight: bold;
text-align: center;
padding: 10px;
}
div {
width: 200px;
padding: 15px;
}
div p {
text-align: justify;
text-indent: 5px;
line-height: 1.5;
}
.green {
background-color: #ab7;
float: left;
}
.coffee {
background-color: #ba7;
float: right;
}
.clearfix::after {
content: '';
display: block;
clear: both;
}
</style>
</head>
<body>
<section class="tea clearfix">
<h1>녹차와 커피</h1>
<div class="green">
<p>
녹차는 은은한 향을 좋아하는 사람들이 애용하는 차이다. 녹차를 마실 줄 모르는 사람들은
티백들을 모두 뜯어 주전자에 넣고 끊이기도 하는데 강한 차의 향기도 견디기 힘들겠지만
보관도 힘들고 그때그때 방금 끓인 듯한 맛을 느끼지 못하게 되며 진한 카페인 덕에 밤에
잠들기도 힘들 것이다.
</p>
</div>
<div class="coffee">
<p>
커피는 독한 향을 좋아하는 사람도 매우 좋아하며 심한 경우 태어나기 전부터 커피를 마신
듯 강한 중독 증세를 보이는 경우가 많다. 심지어 원두를 씹어서 향에 자신을 담그는 사람도
있고 설탕, 시럽 등 다른 조미를 절대로 허락하지 않는 오직 커피맛만을 고집하는 마니아들
이 늘고 있다.
</p>
</div>
</section>
</body>
</html>실습 5. 문제 2
<!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>
.container {
margin: 0 auto;
width: 50%;
border: 1px solid black;
padding: 5px;
}
.inner {
width: 25%;
padding: 5px;
box-sizing: border-box;
float: left;
}
.clearfix::after {
content: '';
display: block;
clear: both;
}
.inner .content {
border: 1px solid black;
}
</style>
</head>
<body>
<section class="container clearfix">
<div class="inner">
<div class="content">
<img src="./img/img.png" alt="">
<div>
모든 패딩 5px
</div>
</div>
</div>
<div class="inner">
<div class="content">
<img src="./img/img.png" alt="">
<div>
모든 패딩 5px
</div>
</div>
</div>
<div class="inner">
<div class="content">
<img src="./img/img.png" alt="">
<div>
모든 패딩 5px
</div>
</div>
</div>
<div class="inner">
<div class="content">
<img src="./img/img.png" alt="">
<div>
모든 패딩 5px
</div>
</div>
</div>
<div class="inner">
<div class="content">
<img src="./img/img.png" alt="">
<div>
모든 패딩 5px
</div>
</div>
</div>
<div class="inner">
<div class="content">
<img src="./img/img.png" alt="">
<div>
모든 패딩 5px
</div>
</div>
</div>
<div class="inner">
<div class="content">
<img src="./img/img.png" alt="">
<div>
모든 패딩 5px
</div>
</div>
</div>
<div class="inner">
<div class="content">
<img src="./img/img.png" alt="">
<div>
모든 패딩 5px
</div>
</div>
</div>
</section>
</body>
</html>실습 6. 문제3
<!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>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/reset-css@5.0.1/reset.min.css">
<style>
section {
width: 800px;
border: 3px double #123456;
margin: 20px auto 0;
color: #333;
}
section h1 {
font: bold 42px cursive, sans-serif;
background-color: #ccc;
text-align: center;
padding: 20px;
}
section .intro {
font-size: 18px;
background-color: #464141;
color: white;
border-bottom: 3px solid gray;
text-align: center;
padding: 10px;
}
section .intro em {
color:yellow;
font-size: 1.1em;
}
section .gallery {
padding: 20px 0;
background-color: #6e6a6a;
}
section .gallery li {
width: 23.75%;
height: 330px;
border: 1px solid #ccc;
padding: 5px;
box-sizing: border-box;
margin-right: 1%;
float: left;
}
.clearfix::after {
content: '';
display: block;
clear: both;
}
.gallery li h2 {
height: 150px;
border: 1px solid lightgray;
background: #fff;
}
.gallery li p {
margin-top: 20px;
padding: 0 10px;
font-size: 15px;
font-weight: bold;
line-height: 1.3;
color: #000000;
}
#tulip {
margin-left: 1%;
background-color: #d31515;
}
#tulip h2 {
background-image: url(./img/tulip.jpg);
background-size: cover;
background-repeat: no-repeat;
background-position: 40%;
}
#jebi {
background-color: #e941f9;
}
#jebi h2 {
background: url(./img/jebi.jpg) no-repeat 100% / cover;
}
#hobak {
background-color: #fe692b;
}
#hobak h2 {
background: url(./img/hobak.jpg) no-repeat 40% / cover;
}
#sunflower {
background-color: #f3ea33;
}
#sunflower h2 {
background: url(./img/sunflower.jpg) no-repeat 40% / cover;
}
</style>
</head>
<body>
<section class>
<h1>나의 아름다운 정원</h1>
<p class="intro">
사람들은 아마 자신에게 <em>자신감을 북돋워주는</em>
표정 있는 꽃들을 선호할 것이다.
</p>
<ul class="gallery clearfix">
<li id="tulip">
<h2></h2> <!-- 각 h2에 background 속성을 사용하여 url로 꽃 이미지 넣기 -->
<p>
너무 화려하지 않으며 고귀한 느낌을 가지고 있다.
붉은 색이 단연 으뜸이며 한 송이만 있어도 빼어나다.
</p>
</li>
<li id="jebi">
<h2></h2>
<p>
드물게 푸른색을 띠고 있으며 작지만 시원해 보이는 어린 꽃이라고 할 수 있다.
여럿이 함께 있을 때 더욱 아름답다.
</p>
</li>
<li id="hobak">
<h2></h2>
<p>
색도 모양도 화려하며 이름과 걸맞지 않게 아름다운 꽃으로
매우 완숙한 이미지를 풍기는 꽃이다.
</p>
</li>
<li id="sunflower">
<h2></h2>
<p>
태양만 바라보는 일편단심의 꽃으로 얼굴이 큰 편에 속하며
송이가 적어야 제격이다.
</p>
</li>
</ul>
</section>
</body>
</html>실습 7. 레이아웃잡기
<!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>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/reset-css@5.0.1/reset.min.css">
<style>
h1 {
font-size: 36px;
font-weight: bold;
margin: 20px;
text-align: center;
}
h2 {
font-size: 24px;
font-weight: bold;
text-align: center;
padding: 10px;
}
p {
font-size: 14px;
line-height: 1.4;
padding: 10px;
}
.container {
border: 3px solid orange;
width: 800px;
margin: 0 auto;
}
header {
border: 3px solid yellow;
}
nav {
border: 3px solid purple;
width: 150px;
height: 200px;
float: left;
}
section {
border: 3px solid green;
margin-left: 300px;
}
footer {
border: 3px solid blue;
}
.clearfix::after {
content: '';
display: block;
clear: both;
}
</style>
</head>
<body>
<h1>float 속성을 이용한 레이아웃</h1>
<div class="container">
<header>
<h2>header 영역</h2>
</header>
<div class="main-content clearfix">
<nav>
<h2>nav 영역</h2>
</nav>
<section>
<h2>section 영역</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus at laoreet quam, aliquam rutrum
risus. Vestibulum eget turpis faucibus, ornare odio vitae, viverra quam. Phasellus convallis ligula
ut lorem consectetur tincidunt. Cras in hendrerit nulla. Integer a dictum urna. Curabitur nisl quam,
dapibus vitae felis quis, facilisis dignissim velit. Vivamus nibh dui, pulvinar non nibh vel,
elementum laoreet erat. Cras sit amet nibh dignissim, viverra turpis ac, semper lectus. Pellentesque
nec diam a risus finibus semper. Nulla sollicitudin orci ut massa auctor, eget aliquam ligula
tempus. Nulla lorem dui, tincidunt accumsan odio et, rhoncus pellentesque leo. Fusce sit amet
vestibulum turpis. Donec feugiat sodales dolor ut elementum.
</p>
</section>
</div>
<footer>
<h2>footer 영역</h2>
</footer>
</div>
</body>
</html>9. Position
실습 1. basic
<!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>
.container {
width: 400px;
height: 300px;
border: 4px dashed lightgray;
margin: 100px 0;
}
/* left : 왼쪽 기준으로 px만큼 멀어짐
bottom : 바닥 기준으로 px만큼 멀어짐
지정한 방향으로 멀어지는게 아님. */
.box {
width: 150px;
height: 100px;
background-color: red;
border: 4px dashed orange;
position: relative;
left: 160px;
top: 150px;
}
</style>
</head>
<body>
<div class="container">
<div class="box"></div>
</div>
</body>
</html>