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

레이아웃(Layout) 기초

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

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


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>

포지셔닝​

요소의 위치를 조절하는 것을 포지셔닝(Positioning)이라고 합니다. 위치는 position 속성으로 조절할 수 있습니다.

  • static: 요소 위치의 기본값입니다.

  • relative: 원래 위치를 기준으로 상대적으로 이동합니다.

  • absolute: 부모 요소를 기준으로 절대적인 위치를 갖습니다.

  • fixed: 화면을 기준으로 고정된 위치를 갖습니다.

포지셔닝
<div>기본 요소</div>
<div style="position: fixed; bottom: 60px; right: 60px;">
  화면을 기준으로 고정된 위치 가진 요소
</div>

포지셔닝에 대해서는 이후 수업에서 자세하게 설명 드리겠습니다 🙂