본문으로 건너뛰기
실습하기

웹페이지의 레이아웃이란?

HTML(HyperText Markup Language)는 웹 페이지의 구조와 내용을 정의하는 언어로, 웹 페이지의 뼈대를 구성합니다.

레이아웃(Layout)은 페이지의 구조와 정보에 대한 배치를 의미합니다.


HTML로 구성된 웹페이지의 기본 구조​

웹페이지를 구성하는 HTML 문서는 다음과 같은 기본 구조를 갖습니다.

HTML 기본 구조
<!DOCTYPE html>
<html>
  <head>
    <!-- 웹페이지 기본 정보 -->
    <title>페이지 제목</title>
  </head>
  <body>
    <!-- 사용자에게 보여지는 부분 -->
  </body>
</html>

<head>는 문서의 메타데이터와 스타일 등을 포함하고, <body>는 사용자에게 보여지는 내용을 담는 부분입니다.


블록 요소와 인라인 요소​

HTML 요소는 크게 블록(Block) 요소와 인라인(Inline) 요소로 나뉩니다.

  1. 블록 요소 : 블록 요소는 화면 전체 너비(width)를 차지하고, 각 요소는 새로운 줄에서 시작합니다. <div>, <h1>, <p> 등이 블록 요소에 해당됩니다.
HTML 블록 요소
<div>div는 블록 요소입니다</div>
<p>p는 블록 요소입니다</p>

  1. 인라인 요소 : 인라인 요소는 내용의 크기만큼만 공간을 차지하며, 줄바꿈 없이 연속적으로 표시됩니다. <span>, <a>, <img> 등이 인라인 요소에 해당됩니다.
HTML 인라인 요소
<span>span은</span> <span>인라인 요소입니다.</span>

컨테이너 & 아이템​

컨테이너는 여러 요소들을 묶어서 하나의 그룹으로 만듭니다. <div>와 <section>이 대표적인 컨테이너 요소입니다.

div 컨테이너 요소
<div>
  <p>안녕하세요!</p>
  <p>반갑습니다!</p>
</div>

위 코드에서 <div>는 <p> 요소들을 묶어서 하나의 그룹으로 만들었습니다.

여기서 <div>는 컨테이너(Container) 역할을 하며, <p>는 아이템(Item) 역할을 합니다.

다음 내용이 궁금하다면?

코드프렌즈 PLUS 멤버십 가입 or 강의를 등록해 주세요!