-
[데브캠프 : 김민태의 프론트엔드 개발 3기] 기초학습(2) : HTML스터디/[패스트캠퍼스] 데브캠프: 김민태의 프론트엔드 개발 3기 2025. 1. 3. 13:09
HTML 개요
01. 기본 문법
HTML은 HyperText Markup Language의 약자로, 웹페이지의 구조를 정의하기 위해 사용된다. HTML 문서는 태그(tag)를 이용하여 요소(element)를 표시하며, 각 태그는 꺾쇠 괄호(<>)로 감싸여 있다. 태그는 보통 여는 태그와 닫는 태그로 구성되며, 닫는 태그는 앞에 슬래시(/)를 붙여 나타낸다. 예를 들어, <p>는 여는 태그, </p>는 닫는 태그이다.
HTML 문서는 <!DOCTYPE html> 선언으로 시작하며, <html> 태그 안에 전체 문서가 포함된다. <head>는 메타데이터를 정의하고, <body>는 사용자가 볼 수 있는 콘텐츠를 포함한다.
02. 부모와 자식 관계의 이해
HTML에서 태그들은 계층적인 구조를 이루며, 이 구조를 DOM(Document Object Model)이라 한다.
- 부모 요소는 다른 요소를 포함하는 요소를 뜻한다.
- 자식 요소는 포함된 요소를 뜻한다.
예를 들어, 아래 코드는 부모와 자식 관계를 보여준다.
<div> <p>이것은 자식 요소입니다.</p> </div>위 코드에서 <div>는 부모 요소이며, <p>는 자식 요소이다. 이 관계는 DOM 구조에서 요소 간의 상호작용을 정의하는 데 중요하다.
03. 빈 태그
빈 태그는 닫는 태그가 없고, 내용도 포함하지 않는 태그를 뜻한다. 대표적인 예로는 <br>(줄 바꿈)과 <img>(이미지 삽입)가 있다. 빈 태그는 HTML5부터 자기 닫힘 형식(/) 없이도 유효하다.
예시:
<img src="image.jpg" alt="이미지 설명"> <br>04. 글자와 상자
HTML에서 모든 요소는 박스(box) 모델로 구성된다. 박스 모델은 요소를 감싸는 콘텐츠(content), 패딩(padding), 보더(border), 마진(margin)으로 이루어진다.
글자는 <p>, <span>, <strong>, <em>과 같은 태그로 표시하며, 글자의 스타일은 CSS를 통해 변경할 수 있다. 예를 들어, <strong>은 굵은 글씨를, <em>은 기울임 글씨를 나타낸다.
Ch 6. HTML 핵심 정리
01. 핵심 요소 정리
HTML의 핵심 요소는 다음과 같다:
- 제목: <h1> ~ <h6>
- 단락: <p>
- 링크: <a href="URL">
- 이미지: <img>
- 목록: <ul>(순서 없는 목록), <ol>(순서 있는 목록), <li>(목록 항목)
- 테이블: <table>, <tr>, <td>, <th>
02. 핵심 요소 출력 연습
HTML 핵심 요소의 사용은 아래와 같다:
제목입니다
단락 텍스트입니다.
링크 텍스트- 첫 번째 항목
- 두 번째 항목
03. 주석
주석은 HTML 코드에 대한 설명을 추가하거나 특정 코드를 임시로 비활성화하는 데 사용된다. 주석은 <!--와 -->로 감싸여 작성된다.
예시:
<!-- 이것은 주석입니다 --> <p>이 코드는 활성화되어 있습니다.</p> <!-- <p>이 코드는 비활성화되어 있습니다.</p> -->04. 전역 속성
HTML 전역 속성은 모든 HTML 요소에서 사용할 수 있는 속성이다. 주요 전역 속성은 다음과 같다:
- id: 요소의 고유 식별자
- class: 요소의 클래스 이름
- style: 요소에 인라인 스타일 적용
- title: 요소의 추가 정보를 툴팁으로 표시
예시:
<p id="paragraph1" class="text" style="color: blue;" title="추가 정보">이것은 텍스트입니다.</p>'스터디 > [패스트캠퍼스] 데브캠프: 김민태의 프론트엔드 개발 3기' 카테고리의 다른 글
JavaScript에서 DOM과 이벤트 (2) 2025.01.17 [데브캠프 : 김민태의 프론트엔드 개발 3기] 기초학습(4) : JS (1) 2025.01.10 [데브캠프 : 김민태의 프론트엔드 개발 3기] 기초학습(1) : 개요 및 세팅 (2) 2024.12.27 [데브캠프 : 김민태의 프론트엔드 개발 3기] Git/GitHub 학습 (4) 2024.12.20 [데브캠프 : 김민태의 프론트엔드 개발 3기] OT 후기 (0) 2024.12.16