베짱이와 노는 개미

웹개발 프로젝트(CSS/HTML)-#7 미니홈피 프로젝트 (2.flex속성으로 홈페이지 레이아웃 구성) 본문

웹개발(CSS,HTML)프로젝트 (feat.모각코)

웹개발 프로젝트(CSS/HTML)-#7 미니홈피 프로젝트 (2.flex속성으로 홈페이지 레이아웃 구성)

jsistop16 2021. 8. 15. 14:31

flex 역시 일단은 display의 속성값이다. display:flex 처럼 쓰일수 있는것이다.

 

dispaly: block, inline, inline-block만으로는 복잡한 화면 레이아웃을 구성하기에는 역부족이다.

 

그래서 요즘 새로 나온 기술이 바로 dispaly: flex이다.

 

flex에 대해서 설명하기 전에 컨테이너와 아이템의 관계를 알아야 한다.

 

화면을 구성하는 것은 레이아웃을 배치하는것과 같은데

 

화면을 특성에 맞는 모양에 맞게 틀을 끼우는 과정이라고 생각하면 된다.

 

 

이때 레이아웃끼리는 상화좌우에 위치할수도 있고 하나의 레이아웃이 다른 레이아웃을 포함할수도 있고

 

그 위치관계는 다양하다.

 

바깥에 있는 레이아웃을 컨테이너라고 하고 그 안에 포함된 레이아웃을 아이템이라고 이해하면 될것같다.

 

물론 아이템안에 다른 레이아웃을 넣는다면 그 아이템은 다시 컨테이너가 될수도 있는것이다.

 

그럼 이제 flex속성에 대해서 설명해보겠다

 

바깥에 있는 컨테이너의 display속성을 flex로 설정하면 그안에 포함되는 아이템들에 비율값을 정해주면 되는것이다.

<컨테이너>
  display:flex;
</컨테이너>

<아이템1>
  flex:0.4;
</아이템1>

<아이템2>
  flex:0.7;
</아이템2>

이런느낌이다. 위의 코드는 정확한 html,css코드가 아니라 이해를 돕기위해서 적은 코드이다.

 

그럼 이제 미니홈피의 구체적인 레이아웃을 구성하기 위해서 이 flex라는 속성을 이해해보겟다.

 

flex라는 속성상 클래스를 여러개 만들어야 하고 그 구조가 복잡하지만 천천히 코드를 읽어보면 다 이해된다.

 

복잡만 할 뿐이지 어려운건 아니다

<!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="column1">
            <div class="para">
              <p>TODAY</p>
              <p>|</p>
              <p>TOTAL</p>
            </div>
            <div class="rect1 box1"></div>
          </div>
          <div class="column2">
            <div class="textbox">
              <div class="title">쭈구ri의 minihomepage</div>
              <div class="url">https://url주소/나중에입력</div>
            </div>
            <div class="rect1 box1"></div>
          </div>
          <div class="column3">
            <div class="box2"></div>
          </div>
        </div>
      </div>
    </div>
  </body>
</html>

->html코드

.bookcover{
    background-color: #b4d1da;
    border-radius: 9px;
    border:1px solid #738186;
    margin-top: 6%;
    margin-left: 25%;    
    width: 960px;
    height: 660px;
    position: relative;
}
body {
    background-color: #a3a3a3;
    background-image: url("../static/images/pattern.png");
    background-size: 100px;
    position: fixed;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
  }

.bookdot{
    position: absolute;
    border: 1px dashed white;
    top: 10px;
    left: 10px;
    bottom:10px;
    right: 10px;
    border-radius: 9px;
}

.page{
    position: absolute;
    background-color: lightgray;
    top: 5px;
    left: 5px;
    bottom:5px;
    right: 5px;
    border-radius: 9px;
    display: flex;
}

.column1{
    flex: 2.5;
    margin-right: 3%;
    margin-left: 1%;
    margin-top: 1%;
    margin-bottom: 1%;
    display: flex;
    flex-direction: column;
}

.column2{
    flex: 6;
    margin-left: 1%;
    margin-top: 1%;
    margin-bottom: 1%;
    display: flex;
    flex-direction: column;
}

.column3{
    flex: 1;
    margin-bottom: 1%;
    margin-top: 1%;
}

.rect1{
    flex: 1;
}

.box1{
    border: 1px solid grey;
    border-radius: 9px;
    width: 100%;
    height: 100%;
    background-color:white;
}

.box2{
    border: 1px solid darkgray;
    height: 100%;
    background-color: lightgray;
    margin-left: 2%
}

.para{
    flex: 0.06;
    margin: auto;
}

.textbox{
    flex: 0.06;
    display: flex;
}

.title{
    flex: 1;
    margin-right: 1%;
}

.url{
    flex: 1;
    margin-left: 1%;
}

p{
    display: inline;
}

->css코드

 

css코드에서 flex속성이 쓰인 클래스를 중심으로 공부를 해보자

 

결과물도 올려보자면

이렇게 나온다

 

자 일단 이 틀을 만들기 위해서 큰 틀을 먼저 생각해야한다.

 

해당부분을 column1,2,3로 나눠서 해봤다. column1,2,3클래스를 잘보면 flex값이 2.5, 6, 1로 설정된것을 알 수 있다.

 

각각의 비율만큼 width값이 설정된것이라고 보면 된다

 

 

(큰화면의 틀을 세로 직사각형 3개가 좌우로 배열된 형태라고 보면되는것이다!!!! 중요)

 

(그 3개의 직사각형의 가로 비율이 바로 2.5:6:1 인것!!!)

 

여기서 flex의 중요한 속성이 있다. 바로 flex의 방향이 기본값(디폴트)는 가로(row)에 적용되고

 

만약 세로(column)으로 flex비율을 설정하고 싶다면

flex-direction: column;

이 코드를 설정해줘야한다. (.column2 클래스 참고)

 

자그럼 이제 column1, column2, column3 각각의 안에 다시 아이템들을 추가해서 위의 사진처럼 홈페이지를 꾸며 볼것이다.

 

먼저 column1

 

맨위에 TODAY와 TOTAL값을 넣어줄 텍스트를 추가해주고

 

그 아래 다른 컨텐츠가 들어갈 자리인 하얀 직사각형을 추가해줄것이다.

 

이때 이또한 flex속성을 이용하기 위해서 (css파일에서 column1클래스 코드를 보면 )

 

column1클래스안에 display:flex를 추가해주었다.

 

그래야 그 안에 들어가는 para클래스와 rect1클래스에 flex값을 지정해줄수 있음으로써 비율을 맞출수있다

 

이때 para클래스와 rect1는 세로 비율 즉 , column방향으로 비율이 적용되어야하므로

 

direction을 column1클래스에서 따로 설정해주는 과정이 필요한것이다.

 

이게 끝이다 생각해보면 이 글만 이해를 하면 나머지는 같은과정이라서 혼자서도 가능하다

 

복잡할뿐이지 어렵진 않다.

'웹개발(CSS,HTML)프로젝트 (feat.모각코)' 카테고리의 다른 글

웹개발 프로젝트(CSS/HTML)-#9 스크롤뷰  (0) 2021.08.20
웹개발 프로젝트(CSS/HTML)-#8 미니홈피 프로젝트 (기본 레이아웃 완성)  (0) 2021.08.19
웹개발 프로젝트(CSS/HTML)-#6 미니홈피 프로젝트(1. 기본레이아웃 구성)  (0) 2021.08.13
웹개발 프로젝트(CSS/HTML)-#5 position속성  (0) 2021.08.13
웹개발 프로젝트(CSS/HTML)-#4 <div> <span>태그  (0) 2021.08.13
'웹개발(CSS,HTML)프로젝트 (feat.모각코)' Related Articles more