[새싹X코딩온]웹 풀스택 2주차(7/24)회고록|CSS(7)-display

벌써 2주차가 되었네요..! 이번에는 display속성에 대해서 알아보도록 할 거에요!(조금 밀렸지만 그만큼 꼼꼼하게 다뤄보도록 하겠습니다)

display속성들간의 차이점을 알아두는 것이 중요하고 특히 그 중에서도 flex가 중요하니 잘 알아두도록 합시다!!

 

display 속성의 종류에는 

• inline
• block
• inline-block
• flex
• grid

등이 있습니다! 그럼 하나하나 알아보도록 할까요?

 

---

1. display: block, display: inline, display:inilne-block

먼저, display속성은 어떻게 사용하는 것인지? 사용하는 목적은 무엇인지 부터 알아야겠죠? 

https://developer.mozilla.org/ko/docs/Web/CSS/display 

display - CSS: Cascading Style Sheets | MDN

mdn에서 검색을 해보면 크게 display는 두가지 역할을 한다고 볼 수 있어요. 첫번째는 HTML의 요소를 block/inline/inline-block처리할 지를 결정하는 것이 있고, 다른하나는 flex, grid, flow와 같은 녀석들로 자식요소의 레이아웃을 결정하는 역할을 할 수 있어요. 

 

어?? 그런데 block, inline 어디서 많이 들어본 말 아닌가요? 맞습니다 ㅎㅎ 우리가 HTML에서 배웠던거 맞아요! 

그 요소들의 특성은 각각 block, inline으로 정해져있었죠? 예를 들어서 <div>,<h1~6>등등은 block 요소 <span>은 inline요소...(저도 아직 다 외우지는 못해서 mdn에 자주 검색을..ㅎ)

그런데 이런 요소들의 속성을 css display를 통해서 바꿀 수 있는게 block, inline, inline-block입니다! 

그렇다면 block과 inline은 대충 감이 오시죠? 그런데 inline-block 은 뭘까요? 

block VS inline-block

둘의 차이가 느껴지시나요? 파란색 border를 잘 보면 block은 차지하고 있는 줄 자체를 다 감싸고 있는 반면, inline-block의 경우 요소가 차지하고 있는 영역만큼만 border가 감싸고 있는 것을 확인할 수 있습니다! 

어 그럼 inline-block과 inline의 차이는 뭘까요? 

inline요소는 해당 요소가 차지하고 content의 크기 만큼만 영역을 차지했었죠! 그래서 width와 height의 크기를 따로 설정할 수 없었습니다. 하지만 css에서 inline-block처리를 하면 width와 height의 설정이 가능해집니다! 

 

그럼 

코드를 통해서 알아보도록 하겠습니다...! 

먼저 html

<h1>CSS display 속성에 대해 알아보자!</h1>

    <ul>

        <li>display 속성은 화면에 어떻게 보여질지 결정하는 속성</li>

        <li>html 태그는 기본적으로 block과 inline 요소 둘 중에 하나를 기본값으로 가짐</li>

    </ul>

    <hr>

    <h2>inline</h2>

    <ol>

        <li>span, a, img 태그와 같이 내용물만큼(content)만 공간 할당됨</li>

        <li>content 만큼 공간을 할당하기 때문에 width, height, padding, margin 사용 불가</li>

        <li>줄바꿈 없이 바로 옆에 배치</li>

    </ol>

    <div class="d-inline1">d-inline1 클래스를 갖고 있는 div입니다.</div>

    <div class="d-inline2">d-inline2</div>

    <hr>

    <h2>block</h2>

    <ol>

        <li>div, p, ul, ol 태그와 같이 한 줄을 다 차지함</li>

        <li>inline 요소와 달리 width, height, padding, margin 사용 가능</li>

    </ol>

    <div class="d-block1">d-block1 클래스를 갖고 있는 div입니다.</div>

    <div class="d-block2">d-block2</div>

    <hr>

    <h2>inline-block</h2>

    <ol>

        <li>block 요소처럼 크기 지정을 하되</li>

        <li>inline 요소처럼 다른 내용들과 같은 줄을 공유하고 싶은 경우</li>

        <li>block과 inline 요소의 장점을 가짐</li>

    </ol>

    <div class="d-inline-block1">d-inline-block1 클래스를 갖고 있는 div입니다.</div>

    <div class="d-inline-block2">d-inline-block2</div>

여기에 css를 연결해줍니다

<link rel="stylesheet" href="./index10.css">

그리고 css

.d-inline1{

background-color:blue;

display:inline;

/* 인라인 처리를 함으로써 content의 내용만큼만 색칠됨 */

}

/* div는 블록요소이기때문에 기본적으로 줄바꿈이 된다. */

.d-inline2{

background-color:red;

}

.d-block1{

    display:block;

background-color:blue;

width:500px;

}

.d-block2{

    display:block;

background-color:red;

width:400px;

}

/* 블럭요소는 줄바꿈이 디폴트값이기 때문에 너비가 작아진다고 해서 한줄로 붙지 않는다!! */

/* 블럭요소처럼 width와 height를 자유롭게 설정하면서도 인라인요소처럼 줄바꿈이 되지 않도록 하기 위해서 inline-block을 사용한다 (width,height같은 걸 설정하지 않으면 inline요소처럼 content만큼 크기를 차지함)*/

.d-inline-block1{

    display:inline-block;

    background-color:blue;

}

.d-inline-block2{

    display:inline-block;

    background-color:red;

    width:200px;

    height:300px;

    margin:20px;

    margin-top:20px;

    margin-bottom:20px;

    margin-right:40px;

    margin-left:40px;

    /* css단출 프로퍼티 */

    /* ==margin: 상 우 하 좌 */

    margin: 20px 40px 20px 40px;

    /* ==margin: 상하 좌우 */

    margin:20px 40px;

   

}

class를 통해서 각요소들에 연결을 해 주었습니다. 요소가 차지하는 영역을 확인하기 쉽게 background-color를 주었어요.

.d-inline-block2를 보면 아시겠지만 width height뿐만아니라, margin, padding등도 설정할 수 있습니다! 

여기에서 margin을 여러번 설정했지만 css에서는 마지막에 설정한 스타일이 적용되니

 margin:20px 40px; 이것만 적용되었겠죠? 그럼 html을 열어서 한번 확인해 볼까요? 

 

margin이 상하로20px, 좌우로 40px 적용되어 있음을 학인할 수 있습니다! 

---

2.display:none(visibility:hidden과 구분!!)

이 외에도 display:none 이라는 속성도 있어요. none이라니 화면속에서 사라지는 거겠죠? 그런데 이와 구분해야하는 것이 있습니다. visibility:hidden입니다! 둘다 화면속에서 사라지는 것은 마찬가지이지만 none은 해당 요소가 차지하던 영역까지도 함께 사라지는 것이고, visibility:hidden은 영역은 그대로 남아있는 것입니다! 

차이를 눈으로 확인하기 위해서 배경색을 주고 보도록 하겠습니다! 

 <hr>

    <h2>none</h2>

    <ol>

        <li>요소를 화면에 표시하지 않음</li>

        <li>주의) display: none;은 요소가 차지하는 공간도 사라진다!!!</li>

    </ol>

    <div class="d-none">

        none

    </div>

    <h2>vs. visibility:hidden 속성</h2>

    <ol>

        <li>display:none;은 요소가 차지하는 공간이 사라지지만,

            visibility:hidden은 요소만 사라지고 차지하던 공간은 그대로 남는다.

        </li>

    </ol>

    <div class="box">

     visibility:hidden

    </div>

.d-done에는 display:none을 입힐꺼고, box에는 visibliity:hidden을 입힐 거에요! 

.d-none {

  /*display:none;*/

  /* display:none;을 하면 웹브라우저에서 초록색 박스가 없어진다. 갖고 있던 영역까지도 없앤다! */

  background-color: green;

  width: 100px;

  height: 100px;

}

/* display:none과 visibility:hidden의 차이점 */

.box {

  /*visibility: hidden;*/

  background-color: violet;

  width: 100px;

  height: 100px;

}

우선 주석처리를 해서 얼마만큼의 영역을 차지하고 있었는지 보도록 할게요! 

원래는 각각 가로,세로 100px인 정사각형의 크기만큼의 영역을 초록색, 보라색으로 차지하고 있었습니다.

 이제 display:none, visibility:hidden을 각각 입혀보도록할게요! 

.d-none {

  display:none;

  /* display:none;을 하면 웹브라우저에서 초록색 박스가 없어진다. 갖고 있던 영역까지도 없앤다! */

  background-color: green;

  width: 100px;

  height: 100px;

}

/* display:none과 visibility:hidden의 차이점 */

.box {

  visibility: hidden;

  background-color: violet;

  width: 100px;

  height: 100px;

}

개발자 도구를 열어서 영역이 남아있는지 확인해 보았더니 확실히 차이가 나죠? display:none을 입혔던 초록색 박스가있던 영역은 아예사라졌지만 visibility:hidden을 입혔던 부분은 영역자체는 남아있음을 볼 수 있습니다! 

---

⭐3. display:flex⭐

flex - CSS: Cascading Style Sheets | MDN (mozilla.org)

flex - CSS: Cascading Style Sheets | MDN

flex가 중요하다는 말에 mdn에서 flex에 대해 우선 찾아보았습니다. 

display 속성 중 하나로 flex가 있는 거 아니겠습니까? 그래서 display에서 flex를 찾아보니 우선

"CSS Flexible Box Layout"

부터 알아두면 좋을 것 같아서 이것부터 정리해보려 합니다 ㅎㅎ

'CSS Flexible Box Layout은 사용자 인터페이스 디자인과 단방향 레이아웃에 최적화된 CSS 모듈입니다. 플렉스 레이아웃 모델에서는, 플렉스 컨테이너의 자식을 어떤 방향으로도 배치할 수 있으며, 자식의 크기도 유연하게("플렉시블") 빈 공간을 채우거나, 컨테이너를 넘어가지 않도록 줄어듭니다. 자식 간의 수평 및 수직 정렬 또한 쉽게 조작할 수 있습니다.'라고 Mdn에 나와있는데요... display:flex를 사용하면 컨테이너 안의 자식요소들을 자유롭게 배치할 수 있다! 정도로 알아두면 좋을 것 같습니다! 

어떻게 배치하는지 그럼 flex에는 어떤 것들이 있는지 한 번 알아보도록 하겠습니다! 

1) flex사용시 주의사항⚠️

flex가 직접적으로 적용되는 것은 display:flex;라고 입력한 자식 요소들에 적용이 되는 것입니다! 

그러니까, HTML

<h1>Flexbox와 친해지기</h1>

    <div class="container">

        <div class="item1 items">1</div>

        <div class="item2 items">2</div>

        <div class="item3 items">3</div>

        <div class="item4 items">4</div>

        <div class="item5 items">5</div>

    </div>

이런 코드가 있고, CSS에 

.container{

    width:300px;

    height:400px;

    background-color:#333;

    margin:0 auto;

    /*여기에서 auto는 좌우방향으로 가운데에 배치! auto는 width가 설정되어 있어야 계산해서 쓸 수 있음*/

    display:flex;

}

.items{

width:100px;

height:100px;

font-size: 30px;

text-align:center;

line-height:100px;

/* line-height:100px를 통해서 글자가 높이 측면에서도 칸의 중앙으로 올 수 있도록 함 */

}

.item1{

background-color: pink;

}

.item2{

    background-color: skyblue;

    }

.item3{

    background-color: yellowgreen;

    }

.item4{

background-color:orange;

    }

.item5{

    background-color:red;

}

이렇게 .container에서 "display:flex"라고 선언되어 있다면 conatainer를 클래스로 갖는 자식요소인

   <div class="item1 items">1</div>

        <div class="item2 items">2</div>

        <div class="item3 items">3</div>

        <div class="item4 items">4</div>

        <div class="item5 items">5</div>

얘네들에 flex가 적용되는 것이라 볼 수 있겠죠!

그럼 display:flex가 어떤 역할을 하는 것인지  HTML파일을 LIVESERVER로 열어서 개발자 도구를 통해서 알아보도록 하겠습니다!

display:flex 적용X

개발자 도구에서 display:flex를 선택하지 않으면 div 컨테이너 안의 div아이템들은 애초에 block요소이기때문에 이렇게 위에서 아래로 쌓여있게 됩니다. 요소가 차지하는 영역도 함께 확인해 보았습니다! 

 

그럼 display:flex를 적용하면?

이렇게 가로로 배열이 됩니다! 그런데 영역에서 저 화살표 이상하지 않나요? 우리가 위에서 item의 width를 100px로 주었는데 가로로 배열하다 보니 공간이 부족해서 줄어들었음을 확인해볼 수 있습니다. 아까전에 MDN에서 봤던 문장에서 "자식의 크기도 유연하게"가 어떤말인지 이제 아시겠죠? 

 

2) 주축과 교차축 그리고 flex-direction

위에서 display:flex를 적용하니 적용 전 세로로 배열되어 있던 아이템들이 가로로 배열 되었어요! 그럼 여기에서는 가로가 주축이 되는거에요. 이렇게 아이템이 배열되는 기본 방향을 주축, 그에 수직이 되는 방향을 교차축이라고 해요. 

이렇게 주축을 설정하는 방법이 flex-direction 입니다! 

flex-direction을 사용하면 주축 방향 뿐만 아니라, 아이템의 정렬 순서도 역순(reverse)로 바꿀 수 있어요! 

이미 눈치챈 분들도 있겠지만, display:flex;만 했을 때 flex-direction을 따로 설정하지 않으면 default값은 flex-direction:row;입니다! 

그래서

이렇게 flex-direction:row;를 체크해도 위의 결과와 똑같이 나옵니다! 

그럼 이번엔 flex-direction: row-reverse;를 하면 12345->54321순으로 배열 되겠죠? 

flex-direction:row-reverse;

그럼 주축이 세로로 하려면? flex-direction:col;을 해주면 됩니다! 

flex-direction:col;

그럼 역순으로 하면 어떤일이 일어날까요? 

flex-direction:col-reverse;

그럼 이제 주축설정하는 것 알았으니 다른 속성들도 알아봅시다! 

3) justify-content: 주축 아이템을 어떻게 배치할 것인가? 

justify-content의 종류에는 사진에서 보시는 것과 같이 flex-start,flex-end, center, space-between, space-around등이 있어요. 여기에서 flex-start는 default값이고 나머지는 설정을 해주어야 해요! 그럼 이것들을 위의 코드에서 적용하면 어떻게 달라지는지 한번 확인해보도록 할게요! 

 

아까전에 flex-direction:col;을 했을때 위에서부터 맞추다보니 5만 삐져나와있었죠? 이걸 justify-content:flex-end;를 해주면 끝에서 부터 맞춰져서 1만 삐져나올 수 있게 할 수 있어요!

flex-direction:column; justify-content:flex-end;

다른 속성들도 더 잘 알아보기 위해서 이번엔 div class="contatiner"의 크기를 좀 더 키워보도록 할게요! 

여기서부터는 주축을 가로로 고정시켜놓고 살펴보도록 하겠습니다!

justify-content;flex-end;

justify-content:space-between;양 끝으로 붙여서 정렬하고 나머지 영역을 공평하게 나누어짐

 

justify-content:space-between;

justify-content:space-around;between과 비슷하지만 모든 영역이 같은 margin을 같게 된다(양 끝의 여백이 1이라면 사이사이의 여백은 2)

justify-content:space-around

justify-content:space-evenly;모든 간격의 여백이 동일하게 됨, 양쪽 끝에 여백이 around와 달리 같음 (양끝을 포함한 모든 여백이 1

justify-content:space-evenly;

4)align-items :교차축에 대해서 아이템을 어떻게 배치할 것인가?

 -align-items:stretch; default값. flex-direction:row(column)로 설정했을 경우 items에 대해서 높이(너비)가 지금은 정해져 있지만 height(width)값을 없애개 되면 위 아래(좌우)로 늘어남,container의 교차축을 채우기 위해 늘림

 -align-items:flex-start;교차축에 대하여 시작점으로 정렬

-align-items:flex-end;교차축에 대하여 끝에서부터 정렬

-align-items:center;교차축에 대하여 가운데 정렬

-align-items:baseline;글자에 밑줄을 했을 때 그 라인을 동일하게 맞추어 줌(글자의 크기가 다를 때 이렇게 하면 네모칸의 크기가 같을 경우 위의 높이가 다 달라지겠지?

종류에는 이와 같은 것들이 있습니다! 

하나만 간단하게 살펴보고 가도록 할게요.

align-items:center;

5)flex-wrap: 줄바꿈(개행처리)을 어떻게 할 것인가? 

즉 , 아까전에 container의 크기를 키우기 전에보면 flex-direction:column;을 했을 떄 5만 삐져나와있었죠? 이떄 5를 어떻게 처리할것인가에 대한 것이 "flex-wrap"이라고 보면 됩니다! 

default값은 flex-wrap:nowrap;으로 삐져나와있는채로 두는 거겠죠? 

그럼 wrap, wrap-reverse를 하면 어떻게 되는지 다시 container크기를 줄여서 살펴보도록 하겠습니다.

 

 

flex-wrap:wrap;을 하니 5가 새로운 열이 되어서 추가되었죠?

그런데 어어???주축을 세로로 두고 space-between을 했는데도 여백이 없죠? 이건 아이템의 세로크기가 100px이고 container의 height가 400px이니 여백이 없어서 그렇다고 볼 수 있어요! 

 

justify-content:space-around;를 하면 어떻게 될까요?

여백이 있는 5번아이템이 있는 열에 대해서면 space-around;처리가 된 것을 확인해 볼 수 있었습니다!

그럼 가로축(현재 주축은 세로니까 가로축은 교차축임)에 대해서 아이템들을 배열하려면 align-items를 사용해서 배치를 바꿔주면 되겠죠? 

저는 align-items:flex-end를 통해서 container의 오른쪽 끝에서부터 배열을 바꿔 보았습니다!

 

6)align-content:교차축의 여러행(또는 열)에 대한 정렬(align-items와 구분해야합니다!!)

align-content의 경우 flex-wrap:이 wrap 또는 wrap-reverse상태인 경우에만 사용이 가능합니다(어떻게 보면 당연하겠죠? nowrap이 아니라면 여러행이나 여러열이 생기지 않으니 당연히 이와 관련된 속성도 사용할 필요가 없어니지까요) 

그럼 한번 적용해서 알아보도록 하겠습니다! 

이 속성의 default값은 stretch입니다! 그래서 align-content:stretch;를 해도 아무런 변화가 없습니다.

 

5)의 마지막 상태에서 align-content:flex-start;를 하면 어떻게 될까요? 교차축인 가로축에 대해서 여백없이 왼쪽부터 붙여서 시작하게 되겠죠?

align-content:flex-start;

1234와 5 사이의 여백도 없어짐을 확인할 수 있습니다.

 

그럼 align-conten:around;을 적용하면 어떻게 될까요? 1234와 5 사이의 여백이 생기고 1234왼쪽에도 여백이, 5의 오른쪽에도 여백이 생기겠죠?

align-conten:around;

---

오늘은 이렇게 display와 관련된 CSS속성들을 알아보았습니다...!

양이 꽤 많네요.. 저도 배우면서 많이 헷갈렸고 하나하나눌러보면서 공부해보니 조금은 더 명확하게 이해가 된 듯 합니다..

 

또 flex를 MDN에 검색해보니 많은 다양한 속성들이 많아서 시간날 때 또 적용해보면서 추가해서 작성하도록 하겠습니다!

flex - CSS: Cascading Style Sheets | MDN (mozilla.org)

flex - CSS: Cascading Style Sheets | MDN