[CSS] CSS의 블럭(block)과 인라인(inlines)의 차이 및 관련 속성과 태그

목차

---

1. 블럭과 인라인의 차이점
2. 관련 속성 및 태그
3. 실습 코드

 

 

시작하기에 앞서..

 

HTML과 CSS를 처음 접하면서 정말 수도 없이 많은 태그들과 속성들이 스쳐 지나갔지만 정작 내 머릿속에 남는 건 별로 없었다. 백엔드 위주의 언어만 공부했던 탓인지 레이아웃을 배치하고 색상을 지정하는 등의 프로그래밍은 너무 낯설었고 쉽게 적응이 되지 않았다. 따라서 내가 알기 쉽게 이해하기 위해 프론트엔드 언어의 공부 비중을 조금 늘려야겠다고 생각했다.

 

 

 

1. 블럭과 인라인의 차이점

HTML 혹은 CSS를 배우면서 블럭과 인라인이라는 말을 접하게 됐다. 그때 내 머릿속에는 추상적 개념만 둥둥 떠다녀 이해가 잘되지 않았다. 그리고 그 두개의 차이가 정확히 무엇인가에 대한 의문이 생겼었다. 간단하게 설명하자면 <div>태그로 작성된 것은 블럭이고 <span>태그로 작성된 것은 인라인이라고 생각하면 된다. 그럼 <div>태그와 <span>태그가 각각 어떤 역할을 하는지, 차이점이 무엇인지에 대한 의문으로 연결될 것이다. div와 span태그는 텍스트에 속성도 지정할 수 있고 태그 자체만으로 CSS를 이용해 크기를 지정하고 색깔을 입혀 하나의 박스를 만들어낼 수도 있다. 여기서 블럭과 인라인의 차이가 나타난다. 이 블로그 글에서 HTML을 설명할 때 div와 span태그의 줄바꿈에 대해서 설명한 적이 있다. 블럭과 인라인을 나누는 요소는 바로 그것과 관련이 있다.

div태그로 작성된 사각형은 세로로 정렬이되고 span으로 정렬된 사각형은 가로로 정렬이 됐다(css코드는 생략). 이것으로 div는 줄바꿈이 자동으로 되는 블럭이고 span은 줄바꿈이 되지 않는 인라인이라는 사실을 알 수 있다. 

 

 

 

 

2. 관련 속성 및 태그

이처럼 인라인과 블럭은 서로 다른 특징을 가지고 있는 만큼 css의 속성의 사용에 있어서도 차이를 나타낸다. 우선 우리가 저러한 사각형들로 어떠한 레이아웃을 구성한다고 했을 때 가로로 정렬시키고 싶을 수도 있고 인라인을 블럭과 같이 크게 나타내고 싶을 수도 있을 것이다. 이럴떄 사용하는 css의 대표적 속성 몇가지에 대해서 알아보자. 그 전에 첨언하자면 우리가 css에서 스타일을 줄 때 선택자{}내부에서 속성을 부여할 때 그 속성과 뒤에 따라오는 것들의 명칭은 다음과 같다. color : red;와 같이 선언했을 때 color는 속성, red는 속성값이라고 한다.

 

1. display : 속성값 

display속성의 속성값으로는 flex, inline, block. inline-block이 있다. flex는 세로로 돼있는 블럭(div태그)들을 가로로 정렬 시켜준다. flex는 flexible의 약자로써 우리가 블럭을 배치하기에 조금 더 융통성 있게 이용하기 위한 속성이라고 이해하면 된다. block과 inline은 서로 다른 특징을 가지고 있는 span태그와 div태그가 서로의 속성을 가질 수 있게끔 도와주는 태그이다. 단 여기서 모호한 것은 같은 속성값이라도 부모태그의 선택자에 display 속성을 주냐 개별적으로 div태그나 span태그로 속성을 주냐에 따라 정렬여부가 또 달라진다. 경우의 수가 많아지기 때문에 직접 실습해보기를 바란다.

 

2. flex-direction, flex-wrap, justify-content, align-content (괄호안의 내용은 속성값으로 올 수 있는 것들)

이 속성들은 display가 flex로 선언됐을 시 flex 속성을 적용받는 요소들에게 부가적으로 지정할 수 있는 속성들이다.

display의 속성값으로 flex가 주어진 블럭, 혹은 인라인에 부여할 수 있는 새로운 속성이다.

1) flex-direction : (row or column) ->  flow direction의 기본값은 row(가로)로 요소들을 정렬하는 것인데 이것을 바꾸어 세로로 정렬할 수도 있다.

2) flex-wrap : (wrap, nowrap) -> flex로 가로로 정렬된 블럭들을 크기 상관없이 한줄에 다 표현할 것인지 크기에 맞게 자동으로 줄바꿈 시킬 것인지 정할 수 있는 속성

3) justify-content : (space-around, space-between, center 등) -> 이 속성은 가로를 기준으로 요소들을 각각 창의 어디에 정렬할 것인지 지정할 수 있다. 

4) align-content : (start, end, center 등) -> justify-content 속성과 반대로 세로를 기준으로 블럭을 어디다 정렬할 것인지 지정할 수 있는 속성.

 

이외에도 정말 많은 속성과 그 속성에는 무수히 많은 속성값들이 존재한다. 개인적인 경험으로는 HTML과 CSS는 특히나 반복해서 실습해서 태그들이나 속성을 눈에 익혀두고 자연스레 외우는 것이 좋을 듯하다. 

 

 

 

3. 실습 코드

---

좌측은 블럭의 기본 디자인 스타일을 나타내는 코드, 우축은 블럭의 기본 HTML코드이다. 실습 예제는 HTML코드와 블럭의 스타일은 동일하고 세부적인 속성들을 다르게 줬을 때 블럭이 어떻게 움직이는지 비교해보는 것이다.

display : flex를 적용한 블럭 -> 가로 정렬됐다.

justify-content 속성으로 가운데 정렬한 블럭

좌측(flex-wrap : wrap) 우측(flex-wrap : nowrap)

이외에도 정말 다양한 케이스들이 많이 있으니 꼭 직접 코드를 작성하며 실습해보기를 바란다. 또한 위에서 언급한 속성들에 익숙해지는데 도움이 되는 사이트를 소개하고자 한다.

https://flexboxfroggy.com/#ko

Flexbox Froggy

CSS diner와 비슷하게 그림으로 쉽게 설명이 돼있어 가독성이 좋고 이해가 잘되므로 여러번 반복해서 해보는 것을 추천한다(나도 마찬가지고..).