Ambitious

Web/모각코

[ Visual Studio Code ] 싸이월드 페이지 만들기 - ③

곽수진 2021. 12. 29. 01:01
반응형
<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <title>2021 MINI HOMEPAGE</title>
    <link rel="stylesheet" href="./static/style.css" />
  </head>
  <body>
    <div class="bookcover">
      <div class="bookdot">
        <div class="page">

          <div class="container1">
            <div class="item1 box">TODAY <sapn style="color:red">28</sapn> | TOTAL 123456
            </div>
            <div class="item2">
              <div class="profile">
                <img src="./static/images/cyworld1.png">
                <br><br>수지니(♪♬)
              </div>
            </div>
          </div>

          <div class="container2">
            <div class="item3">수지니의 추억상ㅈr..(*ˊᵕˋo💐o<span class="tab">https://cafe.naver.com/codeuniv</span>
            </div>
            <div class="item4">
              <div class="updated_news">Updated news</div>
              <div class="updated_news_content">
                <div class="category">
                    <div class="category_box">
                      <div class="category_box_photo">사진첩</div>
                      <div class="category_box_content">일상★</div>
                    </div>
                    <div class="category_box">
                      <div class="category_box_board">게시판</div>
                      <div class="category_box_content">Dream★</div>
                    </div>
                    <div class="category_box">
                      <div class="category_box_board">게시판</div>
                      <div class="category_box_content">먹방★</div>
                    </div>
                    <div class="category_box">
                      <div class="category_box_photo">사진첩</div>
                      <div class="category_box_content">여행★</div>
                  </div>
                </div>

                <div class="summary">
                  <div class="summary_main">
                    <div class="summary_main_content">
                      <div class="summary_content_category">다이어리</div>
                      <div class="summary_content_count">8/25</div>
                    </div>
                    <div class="summary_main_content">
                      <div class="summary_content_category">사진첩</div>
                      <div class="summary_content_count">8/25</div>
                    </div>
                  </div>
                  <div class="summary_main">
                    <div class="summary_main_content">
                      <div class="summary_content_category">게시판</div>
                      <div class="summary_content_count">8/25</div>
                    </div>
                    <div class="summary_main_content">
                      <div class="summary_content_category">방명록</div>
                      <div class="summary_content_count">8/25</div>
                    </div>
                  </div>
                </div>
              </div>
              <div class="Miniroom">Miniroom</div>
              <div class="Miniroom_content">
              </div>
            </div>
            </div>

          <div class="container3">
          </div>
        </div>
      </div>
    </div>
  </body>
</html>

 

@import url('https://fonts.googleapis.com/css2?family=Do+Hyeon&family=Hi+Melody&display=swap');

body {
  background-color: #a3a3a3;
  /** body에 배경이미지 적용 */
  background-image: url("../static/images/pattern.png");
  /** 고정된 사이즈로 설정 */
  background-size: 100px;

  /** 기본 body 사이즈를 화면 크기로 고정 */
  position: fixed;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  font-family: 'Hi Melody', cursive;
  font-size: 17px;

}

.bookcover {
  /** 배경 색깔 지정  */
  background-color: #b4d1da;
  /** 모서리 둥글게 */
  border-radius: 9px;
  /** 윤곽선 */
  border: 1px solid #738186;

  /** 기본 너비, 높이 지정 (반응형 X) */
  width: 960px;
  height: 660px;

  /** 좌우 마진을 auto(중앙에 배치), 상하 마진을 100px로 지정 */
  margin: 100px auto;

  /** .bookdot 요소에서 absolute 속성값을 이용하기 위해 position: relative 로 설정 */
  position: relative;
}

.bookdot {

  border: 2px dashed white;
  border-radius: 9px;
  left: 15px;
  top: 15px;
  right: 15px;
  bottom: 15px;
  position: absolute;

}

.page{

  width: 905px;
  height: 605px;
  background-color: #d4d4d4;
  margin: 10px;
  border-radius: 9px;
  position: absolute;
  display: flex;

}

.container1{

  flex:0.4;
  display: flex;
  flex-direction: column;
  margin-left: 15px;
  margin-right: 5px;
  margin-top: 15px;
  margin-bottom: 15px;

}

.item1{

  flex: 0.1;
  border: none;
  padding: 5px;

}

.item2{
  
  flex:2;
  border: 2px solid #d4d4d4;
  border-radius: 9px;
  background-color: white;
  flex-direction: column;

}

.profile{

  flex: 1;
  text-align: center;

}

.container2{

  flex:1;
  display: flex;
  flex-direction: column;
  margin-left: 10px;
  margin-top: 15px;
  margin-bottom: 15px;

}

.item3{

  flex:0.1;
  border: none;
  padding: 5px;
  font-size: 18px;

}

.item4{
  
  flex:2;
  border: 2px solid #d4d4d4;
  border-radius: 9px;
  background-color: white;

}

.updated_news{

  display:flex;
  border-bottom: 2px groove gray;
  margin-top: 15px;
  margin-left: 15px;
  margin-bottom: 15px;
  margin-right: 15px;
  font-family: 'Do Hyeon', sans-serif;
  color: deepskyblue;
  font-size: 20px;

}

.updated_news_content{
  
  flex: 0.3;
  display: flex;
  flex-direction: row;
  margin-left: 15px;

}

.category{

  display: flex;
  flex: 1;
  flex-direction: column;
  justify-items: space-between;

}

.category_box{
  
  display: flex;
  flex-direction: row;

}

.category_box_photo{

  display: flex;
  flex: 0.2;
  background-color: #F15F5F;
  color: white;
  border-radius: 8px;
  margin-right: 7px;
  margin-bottom: 5px;
  text-align: center;

}

.category_box_board{

  display: flex;
  flex: 0.2;
  background-color: #4174d9;
  color: white;
  border-radius: 8px;
  margin-right: 7px;
  margin-bottom: 5px;
  text-align: center;

}

.category_box_content{

  display: flex;
  flex: 1;

}

.summary{
  
  display: flex;
  flex: 1;
  flex-direction: column;

}

.summary_main{
  
  display: flex;
  flex-direction: row;
  margin: 10px;

}

.summary_main_content{

  display: flex;
  flex-direction: row;
  flex: 1;
  border-bottom: 2px dotted gray;
  margin-right: 5px;

}

.summary_content_category{

  display: flex;
  flex-direction: row;
  margin-right: 10px;

}

.summary_content_count{

  display: flex;
  color: dodgerblue;

}

.Miniroom{

  display: flex;
  margin-top: 50px;
  border-bottom: 2px groove gray;
  margin-left: 15px;
  margin-right: 15px;
  font-family: 'Do Hyeon', sans-serif;
  color: deepskyblue;
  font-size: 20px;

}

.Miniroom_content{
  
  display: flex;
  flex: auto;

}

.container3{

  flex: 0.1;
  border: 1px solid grey;
  margin-right: 15px;
  margin-top: 15px;
  margin-bottom: 15px;

}

.box{

  display: inline-block;
  text-align: center;
  font-size: 18px;

}

.tab{

  display: inline-block;
  margin-left: 70px;

}

 

반응형
저작자표시

'Web > 모각코' 카테고리의 다른 글

[ Visual Studio Code ] 싸이월드 페이지 만들기 - ⑤  (0) 2021.12.31
[ Visual Studio Code ] 싸이월드 페이지 만들기 - ④  (0) 2021.12.29
[ Visual Studio Code ] 싸이월드 페이지 만들기 - ②  (2) 2021.12.28
[ Visual Studio Code ] 싸이월드 페이지 만들기 - ①  (0) 2021.12.26
[ Visual Studio Code ] 웹 페이지 생성  (0) 2021.12.24

'Web/모각코'의 다른글

  • 현재글[ Visual Studio Code ] 싸이월드 페이지 만들기 - ③

관련글

티스토리툴바