본문 바로가기

Webstoryboy

Category

Explanation

HTML/Topic

블록구조/인라인구조

01.

참고 : 블록구조/인라인구조

난이도 쉬움

소스 다운로드

영상보기

소개

안녕하세요!. 웹스토리보이입니다. 웹 사이트 제작에 있어 가장 기본이 되는 블록 구조와 인라인 구조에 대해서 알아보겠습니다.

블록(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으로 변경해주면, 패딩이나 마진이 먹히는 것을 확인 할 수 있습니다.

더보기

인스타그램 보기 바로가기

포트폴리오 스터디 바로가기

유튜브 영상보기 바로가기