수업내용

[HTML, CSS] BOX의 성질(3)_2022.05.17.TUE

쿨키드 2022. 6. 1. 17:42
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