HTML , CSS

03 - flex 속성

summeryu 2023. 6. 27. 13:54
728x90
 

 

- 레이아웃 (layout) ? 

   레이아웃이란, 사이트에 구성되는 요소들을 제한된 공간안에 효과적으로 배치하는 일을 의미합니다.

 

CSS상에서 레이아웃을 나눌때 display 속성을 많이 사용하게됩니다.

- display ?

   화면 표시 방법에 대한 속성 입니다. 종류로는 (block, inline, inline-block) 등이 있습니다.

   화면을 표시할 때  자식요소들을 정렬 시킬때 display:flex 속성을 사용합니다.

   한가지 주의할점은 display:flex 속성을 사용할때에는 자식요소 위에 있는 부모태그에 작성해주어야합니다.

   display 속성과 많이 엮어 사용 하는 속성도 있습니다.

 

- justify-content ?

  display:flex 속성을 사용 했을 때 사용할 수 있는 속성입니다.

  종류로는 (flex-start : 왼쪽부터 정렬 (left) , center 가운데정렬 , flex-end (right) 오른쪽 정렬) 등이 있고

  space-between (정렬하는 박스 사이 여백을 자동 계산해 나눠줌 )

  space-around ( 정렬하는 박스들 좌우에 균일하게 여백 자동으로 나눠줌) 등 여백을 자동으로 나눠주는 속성도 있습니다.

 

  justify-content 속성 처럼, display 속성을 사용했을 때 사용할 수 있는 다른 속성으로는

  align-items 속성이 있습니다.

 

-  align-items ?

  박스의 정렬 방향을 세로로 정렬했을 때 사용하는 속성입니다. flex-start ( 세로방향 위로 정렬 ) ,

  center ( 세로방향 가운데 정렬 ) , flex-end ( 세로방향 아래로 정렬) 등 을 사용할 수 있습니다.

 

 

 

-- 응용 해보기 

 

html, css 구간은 이렇게 작성되었습니다.

<div class="header">
        <div class="center">
            <div class="list one">박스1</div>
            <div class="list two">박스2</div>
            <div class="list three">박스3</div>
            <div class="list four">박스4</div>
        </div>
    </div>
.header {background:pink;
                 display:flex;
                 justify-content:center;}
            .header .center {background:green;
                             color:white;
                             width:800px;
                             display:flex;
                             justify-content:space-around; /* 가로축 */
                             align-items:center;} /* 세로축 위,중간,아래 */            
                .header .center .list {width:180px;
                                       height:200px;
                                       background:yellow;
                                       color:red;}
                    .header .center .one {height:300px;}
                    .header .center .three {height:250px;}

 

html와 css를 이렇게 작성하였을때 나오는 화면 입니다.

구분이 되기 쉽도록 background color를 각각 다른색으로 주었습니다