Guidelines

레이아웃(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>

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

Mission
0 / 1

일반적으로 <head> 태그에는 사용자에게 보여지는 내용을 담는다.

O
X

Guidelines

AI Tutor

Publish

Design

Upload

Notes

Favorites

Help