코딩자율학습단 19기 | 2일차 학습일지 – HTML 기본내용 파악하기(태그/속성/문법)

0) 오늘 학습 범위

• 날짜/Day: 26/01/13 (Day 2)
• 교재 범위: ~ 2.3 HTML의 특징 파악하기 (종이책 p.46~57)

[HTML 2일차] ~ 2.3 HTML의 특징 파악하기(p.46~57) 범위 안내

출처: 코딩 자율학습단 카카오톡 채널 메시지 캡처

1) 오늘의 핵심 키워드 3개

• 핵심 키워드 1: 태그(Tag)와 속성(Attribute)
• 핵심 키워드 2: HTML 문서의 기본 구조(doctype, html, head, body)
• 핵심 키워드 3: 블록/인라인 요소 + 태그 관계(부모/자식/형제)

2) 학습 내용 정리(개념 위주)

2-1) 정리 1: 태그/속성/문법/주석

오늘 파트에서 “HTML이 어떻게 생겼는지” 기본 규칙을 정리했어요.

• 태그는 <태그명> 형태로 웹페이지 구성 요소를 만든다.
• 속성은 속성명=”값” 형태로 태그의 의미나 동작을 보완한다.
• 주석은 <!– –>로 남기는데, 소스 보기로 노출될 수 있으니 민감한 내용은 쓰지 않는 게 좋다.

태그/속성/문법/주석 개념 정리(p.56)

2-2) 정리 2: 기본 구조 + 블록/인라인 + 관계 + 들여쓰기

기본 구조랑 요소 구분/관계가 같이 정리돼 있어서, 이후 실습할 때 기준이 될 것 같아요.

• HTML은 기본 구조 안에서 태그를 추가하면서 문서를 만들어간다.
• h, p처럼 줄이 바뀌는 건 보통 블록 요소, a, span처럼 내용 흐름 안에 들어가는 건 인라인 요소로 이해하면 편하다.
• 태그 위치에 따라 부모/자식/형제 관계가 생기고, 들여쓰기를 해두면 구조가 한눈에 보인다.

HTML 기본 구조 + 블록/인라인 요소 + 태그 관계 + 들여쓰기(p.57)

3) 이슈 로그

• 오늘은 개념 정리 파트라서 따로 막힌 부분은 없었습니다.

4) 학습단 도서

「코딩 자율학습 HTML + CSS + 자바스크립트」(김기수 지음, 길벗)