참고 : 블록구조/인라인구조
난이도 쉬움소스 다운로드
영상보기소개
안녕하세요!. 웹스토리보이입니다. 웹 사이트 제작에 있어 가장 기본이 되는 블록 구조와 인라인 구조에 대해서 알아보겠습니다.
블록(block)은 하나의 박스, 인라인(inline)은 하나의 텍스트라고 생각하시면, 이해하는데 도움이 됩니다.
블록 구조에는 대표적으로
div, p, h1~h6, ul, li,
ol, table 등이 있으며,
인라인 구조에는 대표적으로 span, a, em,
i, strong 등이 있습니다.
인간도 남자, 여자가 있는 것처럼, 태그도 이렇게 블록 구조, 인라인 구조로 분류할 수 있습니다. 이렇게 얘기하면 학생들 중에 게이는 어디인가요? 라고 물을 수 있겠지만, 태그에도 게이가 있습니다. 🤬 그건 아래 쪽에서 설명을 드리겠습니다.
표현 방법
블록 구조의 특징은 한 줄에 하나만 표현됩니다. 즉 가로로 정렬이 되지 않습니다. 또한 영역을 포현하는 부분이기 때문에, 마진 값이나 패딩 값이 먹힙니다.
인라인 구조의 경우에는 한 줄에 여러개가 표현이 되며, 가로로 정렬이 됩니다. 영역은 텍스트 부분만 영역으로 존재하기 때문에, 패딩이나 마진이 먹히지 않습니다. 하지만 좌우는 먹힙니다.
이 부분이 블록 구조와 인라인 구조의 가장 큰 특징입니다. 그래서 레이아웃을 작업할 때는 블록 구조를 이용해서 작업을 하고, 세부적인 부분은 인라인 구조로 작업하게 됩니다.
포함 관계
블록 구조는 블록 구조 안에 블록 구조가 올 수가 있습니다. 물론 인라인 구조도 올 수 있습니다.
인라인 구조는 인라인 구조 안에 블록 구조가 올 수 없습니다. 규칙입니다.
단 예외적으로 <a> 태그는 허용됩니다.
이런 구조로 코딩을 하여도, 표면적으로 이상이 없을지 모르지만,
웹 표준 개념을 무시한 코딩 방법이기 때문에, 올바른 방법이 아닙니다.
구조 변경
위에서 잠깐 얘기 했듯이 블록, 인라인 구조에도 게이가 존재합니다. 즉 블록과 인라인의 중간 성질 같은 존재가 있습니다. 바로 인라인 블록(inline-block)입니다.
<ul>, <li> 태그도 대표적인 블록구조이기 때문에
한 줄에 하나씩 나옵니다. 하지만 코딩을 하다 보면 목록을 표현 할 때 목록형 태그를 써야 하지만,
세로로 정렬이 필요할 때가 있습니다.
그 때 <li> 태그 대신에 <span> 태그를 쓰는 건
불편할 수 있습니다. 그때 <li> 태그의 성질을 인라인으로 변경해줍니다.
하지만 이렇게 되면 패딩이나 마진 등이 먹히지 않기 때문에 inline-block을 주면 됩니다.
<li> 태그의 블록 성질을 인라인으로 변경해주면 왼쪽처럼 가로 정렬이 됩니다.
인라인 구조는 원칙적으로 패딩이나 마진이 먹히지 않기 때문에 inline-block으로 변경해주면,
패딩이나 마진이 먹히는 것을 확인 할 수 있습니다.
