이번 post에서는 float, display, flex, grid 등을 이용한 block element를 가로로 배치하는 방법에 대해서 알아보겠습니다. Bootstrap4 와 같이 모든 속성이 정의되어 있고 element의 class만 지정해서 layout을 잡는 방법도 있지만, 이번 series에서는 순수하게 html과 css만을 사용해서 layout을 배치하는 방법에 대해서 알아보겠습니다.
제가 처음 HTML과 CSS를 공부할 때 가장 먼저 맞닥뜨린 문제가 있었습니다. 바로 div element를 가로로 배치하는 것이었습다. 그때는 block 혹은 inline 에 대한 개념이 없을때라, div 같은 block element를 어떻게 가로로 배치해야 하는지에 대해서 알지 못했습니다.
이번 post에서는 HTML의 가장 기본적 요소인 block 과 inline 에 대해서 알아보겠습니다.
Contents
Block and Inline
HTML의 모든 element는 자신이 가지는 기본 display type이 있습니다. 대부분의 element가 가지는 기본 display type은 block 혹은 inline 입니다.
Block Level Elements
Block-level element는 항상 새로운 line에 위치하며, 가능한 전체 폭을 사용합니다. Block-level 에 해당하는 element는 다음과 같습니다.
<address>, <article>, <aside>, <blockquote>, <canvas>, <dd>, <div>, <dl>, <dt>, <fieldset>, <figcaption>, <figure>, <footer>, <form>, <h1>-<h6>, <header>, <hr>, <li>, <main>, <nav>, <noscript>, <ol>, <output>, <p>, <pre>, <section>, <table>, <tfoot>, <ul>, <video>
The div Element
See the Pen WLLwxJ by Heekyum Kim (@shlrur) on CodePen.
div element는 가장 대표적인 block type element로서, container로 사용됩니다. div element는 class, id 그리고 style 외에 따로 필요한 attribute는 없습니다. CSS와 함께 사용될 때는 div element 내의 element 들에게 style을 적용합니다.
Inline Level Elements
Inline-level element는 새로운 line에서 시작하지 않으며, 필요한 만큼의 폭만 사용합니다. Inline-level 에 해당하는 element는 다음과 같습니다.
<a>, <abbr>, <acronym>, <b>, <bdo>, <big>, <br>, <button>, <cite>, <code>, <dfn>, <em>, <i>, <img>, <input>, <kbd>, <label>, <map>, <object>, <q>, <samp>, <script>, <select>, <small>, <span>, <strong>, <sub>, <sup>, <textarea>, <time>, <tt>, <var>
The span Element
See the Pen BvvKMO by Heekyum Kim (@shlrur) on CodePen.
span element는 가장 대표적인 inline type element로서, 주로 text의 container로 사용됩니다. span element역시 class, id 그리고 style 외에 따로 필요한 attribute는 없습니다. CSS와 함께 사용될 때는 span element 내의 text에 style을 적용합니다.
Continue
다음 post 부터는 여러 방법을 사용하여 block elements를 가로로 배치하는 방법에 대해서 알아보겠습니다. 비교적 예전에 사용하던 기술부터 살펴보겠습니다.