CSS의 기본 (2)

31 Aug 2021

My 25th Post

CSS의 기본 (2)

by Enterprise Kim.T.H

const css_display = (display) => {
  console.log("display속성의 다양한 활용에 대해서 알아봅시다.");
};

1. display가 뭔데?

저번 시간에 display속성에서 flex값을 주었을 때 어떻게 박스들이 배치되는지

아주 간단하고 쉽게 겉핡기 식으로 배웠습니다.

dispaly는 한국말로 진열하다라는 뜻을 가지고 있습니다.

말 그대로 이 속성은 박스들이 어떻게 진열될지를 정해줍니다.

속성이 가지고 있는 값에 따라서 박스의 배치와 배열이 크게 달라지기 때문에 처음에는 매우 어렵게 다가올 수도 있습니다.

하지만 실제로 많이 사용해보면 해볼 수록 색다른 배치를 만들어 낼 수 있는 부분이기 때문에

그런 부분에서는 굉장히 매력적으로 다가오는 부분 중에서 하나입니다.

그런 의미에서 오늘은 display속성의 다양한 값 중에서 가장 많이 사용되는 4가지 값에 대해서 알아보겠습니다.

2. display : inline

먼저 display속성에서 가장 기본이 되는 inline값에 대해서 알아보겠습니다.

inline은 한국말로 같은줄인데요. 모든 프로그래밍 언어들은 기본적으로

사람의 언어를 기본으로 만들어졌기 때문에 뜻을 알고 공부하면 잘 잃어버리지 않습니다.

다시 inline으로 돌아와서, display속성의 값으로 inline이 지정되어 있으면

말뜻그대로 박스를 무슨일이 있어도 같은 줄에 배치한다는 의미입니다.

코드를 보도록 하겠습니다.

<div style="background-color: red; display: inline">BOX1</div>
<div style="background-color: blue; display: inline">BOX2</div>

실행결과

BOX1

BOX2

말로 설명한 것을 보다가 실제 코드로 구현한 것을 보면 엄청 쉽게 느껴지실 텐데 어떤가요?

여기서 조금 욕심을 내서 ‘도대체 왜 테스트 시에 div태그만 쓰지? h1, span등의 태그는 왜 안쓰지?’이렇게 생각할 수 있습니다.

그이유는 inline으로 설정하였을 때 가장 결과물이 잘 보이는 태그이기 때문이라고 할 수 있습니다.

밑에서 설명할 것이지만 div태그로 박스를 만들면 그 박스는 기본적으로 한줄에 하나씩만 배치를 합니다.

즉 inline태그를 빼고 아래 코드와 같이 사용하면

<div style="background-color: red;">BOX1</div>
<div style="background-color: blue;">BOX2</div>

실행결과

BOX1

BOX2

div태그의 기본 설정대로 한줄에 하나씩 배치가 되게 됩니다.

이제 div태그의 기본 설정인 display : block에 대해서 알아봅시다.

3. display : block

위에서 잠깐 보고 왔던 block속성에 대해서 계속 알아보겠습니다.

block은 div태그의 기본 display값이라고 할 수 있습니다.

즉 div태그에 별다른 display값을 주지 않으면 자동으로 block값이 들어가는 것입니다.

위에서 본 코드와 같이 div는 한줄에 하나씩 배치되는 것을 기본값으로 하고, 만약 다른 태그들과 함께 사용되어도

무조건 div태그가 있는 줄에 함께 배치될 수는 없습니다.

다만 display속성을 이용하여 값을 inline으로 변경해주면, 당연히 같은 줄에 배치할 수 있습니다.

4. display : flex

앞 강의(?)에서 잠시 다뤘던 flex박스 내용을 조금 깊게 다뤄보려고 합니다.

이 flex박스는 CSS에서 사용된지 얼마 안된 개념입니다.

실제로 현직에서 웹디자이너로 일하고 계신 분들중에서도 flex박스는 쓰기 어렵다,

효율성이 떨어진다, 모바일에 적용하기 어렵다 등등 많은 이유로 사용하지 않는 경우도 보았는데요.

하지만 개인적으로 flex박스를 한 번만 제대로 공부해서 이용해보면 그런 의견들은 없어질 거라고 확신합니다.

그정도로 간단하고, 간편하면서도 너무 강력하게 웹디자인을 할 수 있도록 도와주는 최신 CSS기능입니다.

실제로 현직에서 flex박스를 쓰지 않고 활동을 하시다가 flex박스를 한 번 써본 후에

지금까지 계속 flex박스로 디자인을 하시는 분도 계십니다.

소개말이 너무 길었는데요 ㅎ

이제 본격적으로 예시 코드를 보면서 공부를 해보도록 하겠습니다.

<div
  style="
  background-color: gray; 
  display : flex; 
  flex-direction: column; 
  padding: 10px; 
  text-align: center;"
>
  <div style="background-color: red; display : flex; flex: 1; padding: 10px;">
    <div style="background-color: green; flex: 3;">GREEN BOX</div>
    <div style="background-color: purple; flex: 1;">PURPLE BOX</div>
  </div>
  <div style="background-color: blue; flex: 1;">BLUE BOX</div>
</div>

실행결과

GREEN BOX

PURPLE BOX

BLUE BOX

실행결과와 코드를 비교하면서 보는 것을 추천드립니다.

이제 CSS에 들어와서 부터는 코드가 너무 복잡해보여서 ‘이게 뭐지’ 이런 생각이 드실 수도 있습니다.

하지만 그냥 읽으면서 ‘이게 한국어로 무슨 뜻이지? 아 이거지’ 이렇게 생각하시는 것을 추천드립니다.

코드설명을 하도록 하겠습니다.

저번시간 코드에서 추가된 부분은 flex-direction부분입니다.

direction은 방향이라는 뜻입니다. 때문에 당연히 이 속성이 의미하는 것은

가로방향으로 배치할 것인가, 아니면 세로 방향으로 배치할 것인가 입니다.

영어로 column은 세로, 즉 열을 의미합니다. flex-direction값을 설정하지 않으면 자동으로 들어가는 기본값입니다.

다음으로 세로가 있으면 가로도 있겠죠?

가로는 row, 즉 행, 가로를 의미합니다.

설명이 많이 길어졌는데, 이제 이 설명을 읽고 다시 위의 코드를 한줄한줄 읽어 보시기 바랍니다.

물론 실행결과하고 비교하면서 보시기 바랍니다. . . 어때요? 아까보다는 훨씬 쉽게 느껴지시지 않나요?

~~이게 뭐가 쉽다는 거야~~

오늘은 CSS에서 가장 중요하면서도 기본이 되는 display속성의 값에 따른 변화를 보면서

inline,

block,

flex

에 대해서 알아보았습니다.

조만간 직접 만들어보는 시간을 가질 예정인데 그 때 오늘 배운 display속성을 마음껏 활용하기 바랍니다.

그럼 안녕 !

Good Bye ~