[HTML,CSS심화] 7,8 미니홈피 홈화면 레이아웃 만들기

개발자 핑구·2022년 3월 14일

HTML,CSS심화[코드메이트]

목록 보기

5/9

결과물

코드

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="utf-8">
    <title>2022 MINI HOMEPAGE</title>
    <link rel="stylesheet" href="./static/style.css">
  </head>
  <body>
    <div class="bookcover">
      <div class="bookdot">
        <div class="page">
          <div class="column1">
            <div class="row1">TODAY 28| TOTAL 238954</div>
            <div class="row2">
              <img src="./static/images/펭수.jfif" alt="펭수사진" class="image">
              <div class="text1">랄랄루</div>
              <div class="text2">sue06004</div>
            </div>
          </div>
          <div class="column2">
            <div class="row3">
              <div class="column3">sue06004의 미니홈피</div>
              <div class="column4">https://url주소/나중에입력</div>
            </div>
            <div class="row4">
              <div class="updated">
                <div class="cate">Updated news<hr class="line"></div>
                <div class="column6">
                  <div class="row5">
                    <span class="red">사진첩</span> 나보러 왔길래 손잡아줌<br>
                    <span class="blue">게시판</span> 웹코딩이 어렵다면 해봐 <br>
                    <span class="blue">게시판</span> 사실은 나도 어려워<br>
                    <span class="red">사진첩</span> 같이하자 html/css<br>
                  </div>
                  <div class="row6">
                    다이어리: 0/25 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;사진첩:0/25
                    <hr class="dot">
                    게시판: 0/25 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;방명록:0/25
                    <hr class="dot">
                  </div>
                </div>

              </div>
              <div class="updated">
                <div class="cate">Miniroom <hr class="line"></div>
              </div>
            </div>
          </div>
          <div class="column5"></div>
        </div>
      </div>
    </div>
  </body>
</html>

body{
  background-image: url('./images/pattern.png');
  background-color: rgb(163, 163, 163);
  background-size: 100px;
}

.bookcover{
  height: 560px;
  width: 960px;
  margin:100px auto;
  background-color: rgb(180,208,218,81);
  border-radius:9px;
  position:relative;
}
.bookdot{
  height:534px;
  width:934px;
  border: dashed white 2px;
  border-radius:9px;
  position: absolute;
  top:12px;
  left:12px;
}
.page{
  display:flex;
  height:512px;
  width:912px;
  background-color:rgb(230, 230, 230);
  border-radius: 9px;
  position: absolute;
  top:11px;
  left:11px;

}
.column1{
  display:flex;
  flex-direction: column;
  flex:0.25;
  margin-left:15px;
  margin-bottom:15px;
  margin-top:15px;
}
.row1{
  font-family: 'NeoDunggeunmo';
  text-align:center;
  line-height: 45px;
  flex:0.1;

}
.row2{
  display: flex;
  flex-direction: column;
  align-items:center;
  background-color:white;
  flex:0.9;
  border-radius:9px;
}

.column2{
  display:flex;
  flex-direction:column;
  flex: 0.6;
  margin-top:15px;
  margin-bottom:15px;
  margin-left:15px;
}
.row3{
  display:flex;
  flex-direction: row;
  flex:0.1;
}

.column3{
  flex:0.5;
  line-height:45px;
  text-align:left;
}

.column4{
  flex:0.5;
  line-height:45px;
  text-align:right;
}

.row4{
  flex:0.9;
  background-color:white;
  border-radius:9px;
}
.column5{
  flex:0.13;
  background-color:rgb(230,230,230);
  border: solid rgb(200,200,200) ;
  margin-top:15px;
  margin-bottom:15px;
  margin-left:1px;
}

.image{
  width: 150px;
  height:150px;
  margin: 15px;
}

@font-face {
    font-family: 'NeoDunggeunmo';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.3/NeoDunggeunmo.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

.text1{
  font-family: "KyoboHand";
  text-align:center;
  height:200px;
}
.text2{
  font-family: "KyoboHand";
  text-align:center;
}

.updated{
  display: flex;
  flex-direction: column;
  height:30%;
  margin:15px;

}
.column6{
  display:flex;
  justify-content: space-between;
}
.red{
  background-color:rgb(242, 98, 94);
  border-radius:3px;
  padding-left:4px;
  padding-right:4px;
  color:white;
}
.blue{
  background-color:rgb(102, 122, 193);
  border-radius:3px;
  padding-left:4px;
  padding-right:4px;
  color:white;
}
.row5{
  font-size:13px;
  line-height:20px;
}
.row6{
  font-size:13px;

}

.line{
  border: none;
  height:1.5px;
  background-color:#bbb;
  margin-top:0px;
  margin-bottom:3px;
}
.dot{
  border:none;
  border: 1px dashed #bbb;
  margin-top: 1px;
  margin-bottom: 1px;
}
.cate{
  font-family: "KOTRA_BOLD-Bold";
  color: rgb(66,162,215);

}
@font-face {
    font-family: 'KOTRA_BOLD-Bold';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_20-10-21@1.1/KOTRA_BOLD-Bold.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'KyoboHand';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_20-04@1.0/KyoboHand.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

📌 Flex레이아웃

이와 같은 복잡한 레이아웃을 만들 때는 display:flex로 설정하여 만든다.

✔ flex 레이아웃으로 배치하고 싶은 박스가 아이템이 된다.
✔ 아이템을 둘러싼 박스가 컨테이너가 된다.
✔ 컨테이너에 display:flex; 속성을 설정해주어야한다.

✅ flex-direction: row | column

✔ row : 가로로 쌓이는 속성
✔ column : 세로로 쌓이는 속성

✅ flex: 숫자(0~1,비율);

✔ direction이 row일 경우 컨테이너의 가로길이에 대한 아이템의 가로 길이
✔ direction이 column일 경우 컨테이너 세로길이에 대한 아이템의 세로 길이
(maybe)

✅ flex-wrap: wrap | nowrap | wrap-reverse

: 아이템들이 많아지거나 커져서 컨테이너 크기를 넘어갈 때 사용되면 줄바꿈을 할지말지 에 대한 속성이다.
✔ wrap: 컨테이너 크기를 넘어가면 다음 줄로 표시
✔ nowrap: 컨테이너 크기를 넘어가도 다음 줄로 표시하지 않음
✔ wrap-reverse: 컨테이너 크기를 넘어가면 마지막 아이템부터 거꾸로 여러줄로 표시

◼ ustify-content, align-items 속성은 정렬에 관한 속성으로 필요할 때 찾아보자

개발자 핑구

이전 포스트

[HTML,CSS심화] 5.미니홈피 기본 레이아웃 만들기

다음 포스트