2nd DAY
BOX를 가로로 눕혀보자
아주아주 중요!
<!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="../css/reset.css" />
<link rel="stylesheet" href="../css/box03.css" />
</head>
<body>
<section class="basic01">
<h1>HA...</h1>
<h2>힘들 때 웃는 자가 싸패다.</h2>
<p>"놀다가 출퇴근 다시 할 생각하니 막막하다."</p>
<p>"주말은 짧고, working day는 길다."</p>
<div class="container">
<figure>
<img src="../img/profile_images_1412024052999286784_3O_p4AG0_400x400.jpg.crdownload" alt="" />
</figure>
<figure>
<img src="../img/profile_images_1412024052999286784_3O_p4AG0_400x400.jpg.crdownload" alt="" />
</figure>
<figure>
<img src="../img/profile_images_1412024052999286784_3O_p4AG0_400x400.jpg.crdownload" alt="" />
</figure>
<figure>
<img src="../img/profile_images_1412024052999286784_3O_p4AG0_400x400.jpg.crdownload" alt="" />
</figure>
</div>
<selection class="apple01">
<u>"일요일에서 월요일로 넘어가는 밤이 제일 싫음"</u>
<div class="container">
<figure>
<img src="../img/다운로드.jpg" alt="">
</figure>
<figure>
<img src="../img/다운로드.jpg" alt="">
</figure>
<figure>
<img src="../img/다운로드.jpg" alt="">
</figure>
</div>
</selection>
</section>
</body>
</html><html>
figure를 먼저 만들고, img 태그를 넣어준다!
.basic01 {
padding: 100px 0;
background: #fd0665;
text-align: center;
}
.basic01 h1 {
font-size: 70px;
font-weight: bolder;
color: chartreuse;
margin: 0 10px 10px 10px;
}
.basic01 h2 {
font-size: 21px;
font-weight: bold;
color: #d8cef6;
margin: 0 0 20px 0;
}
.basic01 p {
font-size: 15px;
color: #fff;
margin: 0 0 20px 0;
}
.basic01 .container {
display: flex;
gap: 30px;
width: 1200px;
margin: 0 auto;
}
.basic01 .container img {
width: 100%;
}
.basic01 figure {
flex: 1;
}
.apple01 u {
display: block;
margin: 30px 0 30px 0;
color: #80ff00;
font-weight: bold;
}
.apple01 .container {
display: flex;
gap: 30px;
width: 1200px;
margin: 0 auto;
}<css>
❕width: 100% 와 width: auto 의 차이점❕
width: 100% (=쓸 수 있는 만큼 다 써라)
margin, padding, border 영역 모두 포함한다.
포함하지 않는 방법은 box-sizing: border-box;
border, margin에 따라 스크롤바 생길 수 있다고 한다.
width: auto (=알아서 적당히 조절해라)
브라우저가 알아서 자동으로 계산
margin, padding, border 영역 포함하지 않는다.
border, margin을 조절하여 스크롤바 생성 하지 않는다고 한다.
display: flex;
가로로 정렬한다.
결과물 : http://127.0.0.1:5502/doc/box03.html
'수업내용' 카테고리의 다른 글
| [HTML, CSS with JS] position의 기초_2022.05.19.THU (0) | 2022.06.01 |
|---|---|
| [HTML, CSS with JS] position의 기초_2022.05.19.THU (0) | 2022.06.01 |
| [HTML, CSS] display: flex;를 이용한 박스배열_2022.05.18.WED (0) | 2022.06.01 |
| [HTML, CSS] BOX의 성질(2)_2022.05.17.TUE (0) | 2022.06.01 |
| [HTML, CSS] BOX의 성질(1)_2022.05.17.TUE (0) | 2022.05.31 |
