[무작정css]Week1. Lesson2. inline 속성, block 속성

Css의 기본 문법을 배웠다면 그 다음으로 중요한 것은 우리가 입력한 내용이 inline속성인지 block 속성인지 알아야 한다. 인라인(inline) 속성과 블록(block) 속성은 우리가 입력한 html 태그를 컴퓨터가 이해하는 방식이다. 인라인 속성으로 이해를 하면 어떻게든 한줄에 우겨넣으려고 하고, 블록 속성이라면 한줄 통째로 영역을 차지하려고 한다. 조금 더 쉽게 이야기하면 인라인 속성은 소심한 친구라 가능한 작은 영역을 차지하려하고, 블록 속성은 욕심쟁이라 일단 영역을 차지하고 보는 친구다.

내가 입력한 태그들이 인라인 속성을 가지는지 블록속성을 가지는지 어떻게 알 수 있을까? 가장 간단한 방법은 background-color 속성을 주어보는 것이다.

간단하게 a태그와 p태그를 가지고 살펴보자. 각각 css를 통해 background-color를 주었다. html파일을 열어보면…

이런 차이를 보인다. a태그는 inline 속성이 적용되어 있고, p태그의 경우 block속성이 적용되어 있는 것이다.
사실 inline이냐 block이냐는 속성을 지정해 바꾸어 줄수 있다. 하지만 각각 속성이 어떤 기능을 하는지 이해하고 쓰는것과 모르고 쓰는 것은 다르다. Inline, block 말고도 inline-block, flex 등 다양한 내용이 있다. 원하는 모양을 만들기 위해 하나하나 만져보며 이해하자.

해당 태그가 inline이냐 block이냐 관리하는 css 속성은 display이다. Display를 활용하면 block속성을 가지고 있는 녀석을 inline 속성으로, inline 속성을 가지고 있는 녀석을 block 속성으로 바꿀 수 있다.

display를 이용해 block속성과 inline속성을 지정해 주었다.

이렇게 속성을 지정해주면..

이렇게 바뀐다. (관찰력이 좋다면 바뀐건 display밖에 없는데 각 태그들이 붙어 나온걸 알 수 있다. 각 태그별로 기본적으로 적용되는 css 속성들이 있는데 이 차이 때문에 생기는 것이니 너무 신경쓰지 않아도 된다.)

지금은 이걸 알아서 어따써… 라는 생각을 할 수 있지만 분명 도움이 된다.

---

Css를 어떻게 가르칠지 고민하다가 기본 개념설명은 때려치기로 했다. 실제 예제를 통해 만들어 보면서 그때그때 필요한 부분을 가르치는 쪽으로 가닥이 잡혔다. 아이들에게 보여주기 위함이니 어쩔수 없지..!

---

본게시글은 초중생 대상으로 작성되는 콘텐츠이므로... html이나 css, javascript에 관심이 있다면 아래 링크들로 학습하길 권합니다. 인프런 - https://www.inflearn.com/ 코드카데미 - https://www.codecademy.com/ 생활코딩 - https://opentutorials.org/course/1