Web (1) - HTML, CSS

paramad·2026년 2월 24일
CSShtml웹

Web

목록 보기
1/1
post-thumbnail

I. 들어가기 전에...

1. 표준과 공식 문서

웹을 배우기 전에 알고가야 할 표어가 있다면, 그건 바로 '정답은 없지만, 표준은 있다'는 마음가짐. 웹 기술은 발전 속도가 매우 빠르므로 개인 기술 블로그보다는 검증된 공식 문서를 최우선으로 참조해야 한다. (5년만 지나도 사용이 불가능한 경우가 종종 있다)

  • MDN (Mozilla Developer Network): HTML, CSS, JavaScript의 표준이자 교과서. 학습의 시작과 끝까지 항상 확인해야 할 곳이다.
  • 주요 프레임워크 공식 문서: Django 공식 문서, Vue 공식 문서 등을 활용하자.

2. 추천 VS Code 확장 프로그램

open in browser


HTML 파일을 브라우저에서 즉시 실행하게 해주는 확장 프로그램. 설치 후 Alt + B로 실행 가능하다.

Auto Rename Tag


수정 시 한쪽 태그만 바꿔도 쌍이 되는 태그 자동 수정 확장 프로그램. 태그 수정 시간을 단축하고, 실수를 방지할 수 있다.

Highlight Matching Tag


현재 위치한 태그와 일치하는 쌍 태그를 강조 표시해 준다. 복잡한 중첩 구조 파악에 용이하다.

3. 개발자 도구

크롬이나 익스플로러의 경우 웹페이지의 코드를 분석하고 수정하는 도구인 '개발자 도구'를 지원한다. 크롬은 단축키 F12 또는 Ctrl + Shift + I, 아니면 브라우저 우측 상단 [도구 더보기] - [개발자 도구]로 들어갈 수 있다. 위 사진은 네이버의 로그인 화면을 개발자 도구로 본 화면이다.

4. 웹(Web)의 정의와 구성

기본 용어

  • WWW (World Wide Web): 인터넷으로 연결된 컴퓨터들이 정보를 공유하는 거대 정보 공간.
  • Web: 사용자들이 정보를 검색하고 상호작용하는 기술 그 자체.
  • Web Site: 여러 웹 페이지(Web Page)가 모여 정보나 서비스를 제공하는 집합적인 공간.

웹의 3요소

역할에 따라 세 가지로 나뉜다.

  1. HTML: 문서의 구조를 설계.
  2. CSS: 시각적인 스타일링을 담당.
  3. JavaScript: 동적인 행동과 상호작용을 구현.

II. HTML (HyperText Markup Language)

1. HTML의 정의

HTML은 웹 페이지의 의미와 구조를 정의하는 언어. 단순히 텍스트를 나열하는 것이 아닌, 각 요소가 어떤 역할을 하는지 컴퓨터에게 알려주는 설계도와 같다. 결국 HTML을 배운다는 것은, 단순히 화면에 글자를 띄우는 법을 배우는 것이 아니라 어떻게 하면 컴퓨터에게 이 데이터의 의미를 가장 정확하게 전달할 것인지 구조화를 고민하는 과정인 셈.

1-1. HyperText

  • 개념: 웹 페이지를 다른 페이지로 연결하는 링크를 의미.
  • 특징: 사용자가 링크를 클릭해 즉시 다른 문서로 이동할 수 있는 비선형성과 상호연결성을 가진다.
  • 효과: 공급자가 정한 순서대로 읽는 것이 아니라, 사용자가 주도적으로 정보를 탐색할 수 있다.

1-2. Markup Language

  • 개념: 태그(<>) 등을 사용하여 문서나 데이터의 구조를 명시하는 언어.
  • 특징: 텍스트에 "이것은 제목이다", "이것은 본문이다"라는 식의 의미를 부여한다.
  • 대표 예시: HTML, XML, Markdown 등.

2. 데이터 구조화 (Data Structuring)

단계명칭특징
1단계Raw Text아무런 가공 없이 텍스트만 냅다 적어놓은 상태 (컴퓨터가 의미 파악 불가)
2단계Logical Structure넘버링, 들여쓰기 등을 통해 인간이 이해할 수 있게 논리 구조를 부여한 상태
3단계HTML Markup약속된 태그를 사용하여 컴퓨터가 구조와 의미를 정확히 이해하도록 완성한 상태

2-1. HTML 문서의 기본 구조

HTML 문서는 일정한 계층 구조를 가지고 있는데, 크게 설정 영역(head)과 본문 영역(body)으로 나뉜다.

태그역할주요 특징
<!DOCTYPE html>문서 형식 선언"이 문서는 HTML5 형식이다"라고 브라우저에 알림
<html>루트(Root) 요소전체 페이지의 모든 콘텐츠를 감싸는 최상위 태그
<head>메타데이터 영역브라우저 탭 제목, 인코딩 설정 등 사용자에게 보이지 않는 설정 작성
<title>문서 제목브라우저 탭에 표시되며, 즐겨찾기(북마크) 시 이름으로 사용됨
<body>콘텐츠 영역텍스트, 이미지 등 실제 화면에 표시되는 모든 내용을 작성. 한 HTML 문서에는 단 하나의 <body> 요소만 존재해야 한다.
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>나의 첫 웹 페이지</title>
</head>
<body>
    <h1>안녕하세요! 반갑습니다.</h1>
    <p>이곳은 실제 화면에 표시되는 콘텐츠 영역(body)입니다.</p>
</body>
</html>

TIP : 그냥 ! 하나만 쳐도 기본 템플릿을 만들 수 있다. 뺑뺑이 안 해도 괜찮음.


2-2. HTML 요소 (Element)

일반적으로 여는 태그(Opening tag), 내용(Content), 닫는 태그(Closing tag)로 구성된다.

  • 닫는 태그: 이름 앞에 슬래시(/)를 포함하여 요소의 끝을 알림.
  • 빈 요소 (Empty Elements): 내용을 가질 수 없거나 그 자체로 기능을 수행하는 태그는 닫는 태그가 없다. (예: <br>, <img>, <input>)

2-3. 속성 (Attribute)

요소의 동작을 조절하거나 추가적인 정보를 부여하기 위해 사용한다. 주로 CSS 스타일링을 위한 선택자로 활용되기도 한다.

속성 작성 규칙

속성을 올바르게 작성하지 않으면 코드가 의도대로 작동하지 않을 수 있으니 주의해야 한다.

  1. 공백 필요: 요소 이름과 속성 사이, 그리고 여러 속성 사이에는 반드시 공백이 있어야 한다.
  2. 구분: 속성이 여러 개인 경우에도 각각 공백으로 구분한다. (쉼표가 아니다)
  3. 따옴표 사용: 속성 값은 반드시 열고 닫는 따옴표("" 또는 '')로 감싸야 한다.
<p class="editor-note">안녕하세요! 반갑습니다.</p>

2-4. 텍스트 구조 (Text Structure)

제목과 본문 (Headings & Paragraphs)

  • <h1> ~ <h6> (Headings): 문서의 제목을 나타낸다.
    • <h1>은 최상위 제목을 의미하며, 숫자가 커질수록 하위 수준의 제목을 나타낸다.
    • 단순히 글자 크기를 조절하는 용도가 아니라, 정보의 위계(중요도)를 결정하는 역할을 한다.
  • <p> (Paragraphs): 하나의 문단을 정의한다.

목록 (Lists)

  • <ul> (Unordered List): 순서가 중요하지 않은 글머리 기호 목록.
  • <ol> (Ordered List): 순서가 있는 번호 매기기 목록.
  • <li> (List Item): <ul>이나 <ol> 안에서 개별 항목을 정의.

강조와 중요성 (Emphasis & Importance)

  • <em> (Emphasis): 텍스트를 기울임꼴로 표시하며, 구어체적인 강조를 나타낸다.
  • <strong> (Importance): 텍스트를 굵게 표시하며, 해당 부분이 매우 중요하거나 긴급함을 의미.
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>오늘의 학습 리포트</title>
</head>
<body>
    <h1>HTML 기초 학습 가이드</h1>
    <p>웹 페이지를 구성하는 가장 기본적인 요소들을 배우고 있습니다.</p>

    <h2>1. 오늘의 핵심 요약</h2>
    <p>태그는 단순히 디자인을 위한 것이 아니라, <strong>정보의 중요도</strong>를 브라우저에 알리는 역할을 합니다.</p>

    <h3>공부할 태그 목록</h3>
    <ul>
        <li>제목 태그 (h1 ~ h6)</li>
        <li>문단 태그 (p)</li>
        <li>목록 태그 (ul, ol, li)</li>
    </ul>

    <h3>학습 순서</h3>
    <ol>
        <li>태그의 의미 파악하기</li>
        <li><em>직접 코드를 타이핑</em>하며 실습하기</li>
        <li>브라우저에서 결과 확인하기</li>
    </ol>

    <p>주의사항: <strong>문서 내 h1 태그는 가급적 한 번만 사용</strong>하는 것이 검색 엔진 최적화에 유리합니다.</p>
</body>
</html>

III. CSS (Cascading Style Sheets)

CSS는 HTML로 만든 뼈대에 살을 붙이고 옷을 입히는 디자인 및 레이아웃 언어.

왜 폭포수(Cascading)인가?

Cascading은 '위에서 아래로 흐르는 폭포수'라는 뜻. CSS에서 이 용어를 사용하는 이유는 여러 스타일 규칙이 충돌할 때, 우선순위에 따라 아래로 흐르며 최종 스타일이 결정되기 때문.

  • 상속: 부모 요소의 스타일이 자식에게 전달된다.
  • 우선순위: 더 구체적이거나 나중에 선언된 규칙이 이전 규칙을 덮어씀.
  • 폭포 효과: 여러 설정이 겹치면 우선순위가 높은 '물줄기'가 최종적으로 화면을 적시게 된다.

1. CSS 적용 방법

방식작성 위치특징
인라인(Inline)HTML 태그의 style 속성특정 요소 하나에만 즉시 적용
내부(Internal)HTML <head> 내 <style> 태그해당 HTML 페이지 전체에 적용
외부(External)별도의 .css 파일여러 HTML 문서에서 공통 사용 가능

외부 파일을 불러올 때는 HTML의 <head> 영역에 다음과 같이 작성한다.

<link rel="stylesheet" href="style.css">

1-1. 스타일 적용 우선순위 (Specificity)

동일한 요소에 서로 다른 스타일이 정의되었을 때, 브라우저는 다음 순서에 따라 적용한다.

  1. 인라인 스타일: 태그에 직접 적은 것이 가장 강력하다.
  2. 내부 스타일 시트: <head>에 작성된 스타일이 그다음.
  3. 외부 스타일 시트: 가장 일반적이지만 우선순위는 가장 낮다.

가장 좋은 것은 외부(External) 방식. HTML은 구조만, CSS는 디자인만 담당하도록 분리하는 것이 나중에 코드를 수정하거나 관리할 때 훨씬 유리하기 때문이다.

2. CSS 구문 (CSS Syntax)

CSS는 선택자와 선언부로 구성되며, 선언부는 다시 속성과 값의 쌍으로 이루어진다.

/* 선택자 { 속성: 값; } */
h1 {
  color: red;        /* 글자 색상을 빨간색으로 설정 */
  font-size: 30px;   /* 글자 크기를 30px로 설정 */
}
  • 선택자(Selector): '누구'를 꾸밀지 지정하는 부분.
  • 선언(Declaration): '어떻게' 꾸밀지에 대한 구체적인 한 줄의 명령. 속성과 값이 한 쌍을 이루며, 반드시 세미콜론(;)으로 끝내야 한다.
    • 속성(Property): 바꾸고 싶은 스타일의 종류(예: 색상, 글자 크기)를 나타낸다.
    • 값(Value): 해당 속성에 적용할 구체적인 설정을 나타낸다.

2-1. 선택자의 분류

  • 기본 선택자: 전체, 요소, 클래스, 아이디, 속성 선택자 등이 있다.
  • 결합자 (Combinators): 여러 선택자를 조합하여 요소 간의 관계(자손, 자식 등)를 기반으로 선택한다.

기본 선택자 종류 및 특징

종류표현 방식설명
전체 선택자*페이지 내의 모든 HTML 요소를 선택한다.
요소 선택자태그명지정한 모든 태그를 선택한다 (예: h2, p).
클래스 선택자.클래스명특정 class 속성을 가진 모든 요소를 선택한다. 재사용성을 염두에 두고 만들어진 선택자.
아이디 선택자#아이디명특정 id 속성을 가진 요소를 선택한다. 문서 내에 단 하나만 존재해야 한다.
속성 선택자[속성]주어진 속성이나 속성값을 가진 요소를 선택하며, 존재 여부나 값의 일치 여부를 따진이다.
<!DOCTYPE html>
<html>
<head>
    <style>
        /* 전체 선택자: 모든 요소의 여백 제거 및 폰트 설정 */
        * {
            margin: 10px;
            font-family: 'Arial', sans-serif;
        }

        /* 요소 선택자: 모든 <p> 태그의 글자 크기 조절 */
        p {
            font-size: 16px;
            line-height: 1.5;
        }

        /* 클래스 선택자: 'highlight' 클래스를 가진 요소들 (재사용 가능) */
        .highlight {
            background-color: yellow;
            color: red;
        }

        /* 아이디 선택자: 'main-title' 아이디를 가진 단 하나의 요소 */
        #main-title {
            color: navy;
            border-bottom: 2px solid navy;
        }

        /* 속성 선택자: 'target' 속성을 가진 링크만 선택 */
        [target] {
            font-weight: bold;
            text-decoration: none;
        }
    </style>
</head>
<body>

    <h1 id="main-title">CSS 선택자 학습하기</h1>

    <p class="highlight">이 문장은 클래스 선택자로 강조되었습니다.</p>
    <p>이것은 일반적인 요소 선택자가 적용된 문단입니다.</p>

    <ul>
        <li class="highlight">리스트 항목에도 같은 클래스를 적용할 수 있습니다.</li>
        <li><a href="https://google.com" target="_blank">새 창으로 열리는 링크 (속성 선택자 적용)</a></li>
    </ul>

</body>
</html>

2-2. 결합자 (Combinators)

요소 간의 계층 구조를 이용하여 특정 조건에 맞는 요소를 선택한다.

  • 자손 결합자 ( ; 공백): 선택자 사이에 공백을 두어, 특정 요소 안에 포함된 모든 하위 요소(자식, 손자 등)를 선택한다.
  • 자식 결합자 (>): 특정 요소 바로 한 단계 아래에 있는 자식 요소만을 선택한다.
<div class="parent">
    <p>나는 자식(Child)입니다. (1단계)</p>
    <div class="box">
        <p>나는 손자(Grandchild)입니다. (2단계)</p>
    </div>
</div>
<p>나는 부모님 밖에 있는 다른 문장입니다.</p>
구분CSS 선택자선택되는 대상설명
자손 결합자.parent p모든 <p> 태그.parent 안에 있기만 하면 자식, 손자 상관없이 모두 선택 (빨간색)
자식 결합자.parent > p자식 <p> 태그만.parent 바로 아래에 있는 첫 번째 단계의 <p>만 선택 (파란색)

2-3. CSS 상속 (Inheritance)

CSS는 부모 요소에 적용된 스타일이 자식 요소에게 전달되는 특성을 가진다.

  • 상속되는 속성: 주로 텍스트 관련 속성들 (color, font-family, font-size, text-align 등).
  • 상속되지 않는 속성: 레이아웃 관련 속성들 (margin, padding, border, display 등).

구체성/명시도 (Specificity)

동일한 요소에 여러 스타일이 충돌할 때, 브라우저는 '더 구체적인' 선택자의 손을 들어준다.

우선순위선택자 종류
1순위!important
2순위인라인 스타일 (Inline style)
3순위아이디 선택자 (#id)
4순위클래스/속성/가상 선택자 (.class)
5순위요소/가상 요소 선택자 (tag)
6순위전체 선택자 (*)

만약 우선 순위가 같을 경우, 나중에 선언된(가장 아래에 있는) 스타일이 최종 적용. (Cascading 원리)

<!DOCTYPE html>
<html>
<head>
    <style>
        /* 6순위: 전체 선택자 (가장 낮음) */
        * { color: gray; }

        /* 5순위: 요소 선택자 */
        p { color: blue; }

        /* 4순위: 클래스 선택자 */
        .my-text { color: green; }

        /* 3순위: 아이디 선택자 */
        #unique-text { color: orange; }

        /* 2순위는 아래 HTML의 inline style (red) 입니다. */

        /* 1순위: !important (무조건 승리) */
        .important-text { color: pink !important; }
    </style>
</head>
<body>

    <p id="unique-text" class="my-text important-text" style="color: red;">
        1. !important가 적용된 글자 (Pink)
    </p>

    <p id="unique-text" class="my-text" style="color: red;">
        2. 인라인 스타일이 적용된 글자 (Red)
    </p>

    <p id="unique-text" class="my-text">
        3. 아이디 선택자가 적용된 글자 (Orange)
    </p>

    <p class="my-text">
        4. 클래스 선택자가 적용된 글자 (Green)
    </p>

    <p>
        5. 요소 선택자(p)만 적용된 글자 (Blue)
    </p>

    <span>
        6. 아무 설정 없는 span 태그 (Gray)
    </span>

</body>
</html>

3. 박스 모델 (Box Model)

HTML의 모든 요소는 사각형 형태의 '박스'로 둘러싸여 있다. 이 박스의 크기와 간격을 조절하여 레이아웃을 잡는다.

  1. Content: 실제 내용(텍스트, 이미지)이 표시되는 영역.
  2. Padding: 테두리(Border)와 내용(Content) 사이의 안쪽 여백.
  3. Border: 요소의 테두리(경계선).
  4. Margin: 테두리(Border) 바깥의 바깥 여백. 다른 요소와의 간격을 조절한다.

박스 크기 계산의 주의점

  • 기본적으로 요소의 너비(width)는 Content 영역만을 의미한다.
    • 전체 너비 = width + padding + border (Margin은 제외).
  • 이를 편리하게 관리하기 위해 box-sizing: border-box; 속성을 자주 사용한다.

3-1. Display 속성

요소가 화면에서 어떻게 배치될지 결정.

  • block: 가로 너비 전체를 차지하며, 항상 새로운 줄에서 시작. (<div>, <h1>, <p>)
  • inline: 콘텐츠만큼의 너비만 차지하며, 새로운 줄을 만들지 않음. (<span>, <a>, <strong>)
    • 주의: inline 요소는 width, height, 상하 margin 등이 제대로 적용되지 않는다.
  • inline-block: inline처럼 한 줄에 놓이면서도, block처럼 크기 조절이 가능.
  • none: 요소를 화면에서 아예 없앤다. 공간도 차지하지 않음.

3-2. Block

책의 문단처럼 작동하며, 페이지의 큰 구조와 단락을 만든다.

  • 배치 특성: 항상 새로운 줄에서 시작하며, 가로 너비를 100% 차지한다. (옆에 다른 요소가 올 수 없음)
  • 크기 조절: width, height 속성을 자유롭게 사용할 수 있다.
  • 여백 영향: padding, margin, border가 주변 요소를 사방으로 확실히 밀어낸다.
  • 대표 태그: <div>, <h1>~<h6>, <p>, <ul>, <li> 등
    • 특히 <div>는 레이아웃을 그룹화하고 구조화하는 데 가장 많이 쓰임.

3-3. Inline

문장 속 단어에 칠한 형광펜처럼 작동하며, 흐름을 끊지 않고 스타일을 적용함.

  • 배치 특성: 줄 바꿈 없이 콘텐츠의 크기만큼만 영역을 차지.
  • 크기 조절: width, height 속성을 사용할 수 없음. (콘텐츠 양에 따라 결정됨)
  • 여백 영향: * 좌우(수평): margin, padding이 정상 적용되어 주변 요소를 밀어낸다.
  • 상하(수직): 적용은 되지만, 다른 요소를 위아래로 밀어낼 수는 없다.
  • 대표 태그: <span>, <a>, <strong>, <img> 등
    • 특히 <span>은 그 자체로는 변화가 없으나, 텍스트의 특정 부분만 조작할 때 유용.

Block과 Inline의 차이

구분Block 타입Inline 타입
줄 바꿈항상 새로운 줄에서 시작줄 바꿈 없이 옆으로 나열
너비(Width)부모 요소의 100% 차지콘텐츠 크기만큼 차지
크기 설정width, height 가능불가능
상하 여백margin, padding 완벽 적용적용되나 주변 요소를 못 밀어냄
주 목적레이아웃, 페이지 구조 설계문장 내 특정 부분 스타일링

3-4. inline-block

Inline과 Block의 장점을 모두 가진 특별한 속성.

  • 비유: '줄 서 있는 사람들'. 한 줄로 나란히 서 있지만(Inline), 사람마다 각자의 덩치(Block)를 가지고 있는 상태.
  • 주요 특징:
    • 줄 바꿈 없이 옆으로 나열.
    • Inline과 달리 width 및 height 속성을 사용하여 크기를 직접 지정할 수 있다.
    • padding, margin, border가 주변 요소를 사방으로 밀어낸다.
  • 활용: 가로로 정렬된 메뉴바, 여러 개의 버튼, 이미지 갤러리 등을 만들 때 유용한다.

3-5. none

요소를 화면에서 완전히 제거하며, 공간조차 차지하지 않게 만듦.

  • 비유: 축구팀의 '후보 선수'. 명단(HTML)에는 있지만 경기장(화면)에는 보이지 않으며, 주전 선수들은 후보 선수의 자리를 비워두지 않고 바짝 붙어서 배치된다.
  • 특징: display: none;을 적용하면 요소가 차지하던 공간이 사라져 다음 요소들이 그 자리를 메우게 됨.
구분BlockInlineInline-blockNone
줄 바꿈발생함 (새 줄)발생 안 함 (옆으로)발생 안 함 (옆으로)요소 자체가 사라짐
크기 지정가능불가능가능의미 없음
공간 차지너비 100%콘텐츠만큼만콘텐츠/설정만큼만공간 차지 안 함
상하 여백완벽 적용적용되나 밀어내지 못함완벽 적용해당 없음
<!DOCTYPE html>
<html>
<head>
    <style>
        .container { background-color: #f0f0f0; padding: 10px; border: 1px dashed #ccc; }
        .box { background-color: skyblue; border: 2px solid blue; margin: 10px; padding: 5px; }

        /* 1. Block: 너비 100%, 줄바꿈 발생 */
        .block-type { display: block; width: 200px; height: 50px; }

        /* 2. Inline: 크기 지정 불가, 줄바꿈 없음 */
        .inline-type { display: inline; width: 200px; height: 50px; background-color: lightgreen; border-color: green; }

        /* 3. Inline-block: 크기 지정 가능, 줄바꿈 없음 */
        .inline-block-type { display: inline-block; width: 150px; height: 50px; background-color: orange; border-color: darkorange; }

        /* 4. None: 아예 사라짐 */
        .none-type { display: none; }
        
        .desc { font-weight: bold; margin-top: 20px; display: block; }
    </style>
</head>
<body>

    <div class="container">
        <span class="desc">1. Block 타입 (width 200px 적용됨, 혼자 한 줄 차지)</span>
        <div class="box block-type">Block 1</div>
        <div class="box block-type">Block 2</div>

        <hr>

        <span class="desc">2. Inline 타입 (width 200px 무시됨, 옆으로 나열)</span>
        <span class="box inline-type">Inline 1</span>
        <span class="box inline-type">Inline 2</span>
        <span>← (글자 크기만큼만 차지함)</span>

        <hr>

        <span class="desc">3. Inline-block 타입 (width 150px 적용됨, 옆으로 나열)</span>
        <div class="box inline-block-type">Inline-block 1</div>
        <div class="box inline-block-type">Inline-block 2</div>

        <hr>

        <span class="desc">4. None 타입 (아래에 'None' 박스가 있지만 안 보임)</span>
        <span>이것은 앞 문장입니다.</span>
        <div class="box none-type">나는 보이지 않아요</div>
        <span>← 보이지 않는 박스 공간이 사라져서 바로 옆에 붙습니다.</span>
    </div>

</body>
</html>

4. CSS Layout / CSS Position

  • CSS Layout: 요소의 위치와 크기를 조정하여 전체적인 페이지의 뼈대를 구성하는 행위. (주요 속성: display 등)
  • CSS Position: 요소를 기본 흐름(Normal Flow)에서 제거하거나 특정 위치로 이동시키는 작업. (요소를 겹치거나 고정할 때 사용)
  • 이동 방향: top, bottom, left, right 네 가지 방향 속성으로 위치를 세밀하게 조정하며, Z-Axis를 통해 겹치는 순서도 결정할 수 있다.

4-1. Position 유형

  • static (기본값): 요소를 Normal Flow에 따라 순서대로 배치. 이동 속성(top, left 등)을 써도 반응하지 않는 가장 정직한 상태다.
  • relative (상대적 위치): 요소를 원래 있던 자리를 기준으로 이동시킴. 원래 있던 공간은 그대로 유지되므로, 다른 요소의 배치에 영향을 주지 않음.
  • absolute (절대적 위치): Normal Flow에서 완전히 탈출하여 공중에 뜬 상태가 된다. 기준점은 가장 가까운 'relative' 부모 요소를 기준으로 이동. 없다면 body를 기준으로 한다. 원래 차지하던 공간은 사라져 다른 요소들이 그 자리를 메운다.
  • fixed (고정 위치): 화면 전체(Viewport)를 기준으로 위치를 고정한다. 페이지를 스크롤해도 항상 같은 자리에 붙어 있다. (예: 상단 바, 플로팅 버튼)
  • sticky (임계점 고정): relative와 fixed의 장점을 합친 똑똑한 속성. 평소에는 relative처럼 있다가, 설정한 지점에 도달하면 화면에 착 붙는 fixed처럼 동작한다.
<!DOCTYPE html>
<html>
<head>
    <style>
        .container { background-color: #eee; height: 1500px; padding: 20px; border: 2px solid #ccc; }
        .box { width: 100px; height: 60px; color: white; display: flex; align-items: center; justify-content: center; font-weight: bold; margin-bottom: 10px; }

        /* 1. Static: 기본값, 이동 불가 */
        .static-box { position: static; background-color: gray; top: 50px; left: 50px; }

        /* 2. Relative: 자기 원래 자리 기준 이동 (공간 유지) */
        .relative-parent { position: relative; background-color: #333; height: 150px; padding: 10px; }
        .relative-box { position: relative; background-color: blue; top: 20px; left: 30px; }

        /* 3. Absolute: 부모(relative) 기준 이동 (공간 소멸) */
        .absolute-box { position: absolute; background-color: red; bottom: 10px; right: 10px; }

        /* 4. Fixed: 브라우저 화면(Viewport) 기준 고정 */
        .fixed-box { position: fixed; background-color: purple; top: 10px; right: 10px; width: 150px; z-index: 100; }

        /* 5. Sticky: 스크롤 하다가 특정 지점에서 고정 */
        .sticky-box { position: sticky; top: 0; background-color: orange; width: 100%; margin: 0; }
    </style>
</head>
<body>

    <div class="fixed-box">Fixed: 나만 따라와!</div>

    <div class="container">
        <div class="box sticky-box">Sticky: 헤더처럼 위에 붙을게요 (스크롤 해보세요)</div>

        <p>1. Static: top, left를 줘도 움직이지 않습니다.</p>
        <div class="box static-box">Static</div>

        <p>2. Relative & Absolute 부모 안의 자식들:</p>
        <div class="relative-parent">
            Relative 부모 (검은 영역)
            <div class="box relative-box">Relative</div>
            <div class="box absolute-box">Absolute</div>
        </div>
        
        <p style="margin-top: 50px;">
            * <b>Relative</b>: 원래 자리에서 20px 내려왔지만, 뒤의 Absolute 박스가 그 자리를 차지하지 못함 (자리 지킴)<br>
            * <b>Absolute</b>: 부모 박스의 오른쪽 아래에 딱 붙음 (공중에 뜸)
        </p>
    </div>

</body>
</html>

profile
paramad

0개의 댓글