개요
길벗 출판사에서 나온 "코딩 자율학습 - HTML+CSS+자바스크립트" 라는 책을 구매해 공부하게 되었다. 가장 큰 계기는 이 티스토리 블로그에 목차 하나 좀 만들어 보려는데 자꾸 버그가 나고 또 그 버그를 어떻게 해결할지 모르겠다는 것이다. 이왕 배우기로 한 김에 최대한 빠르게 책을 부셔버리고 다음 단계로 넘어가고 싶다. 그래도 명색이 개발 지망생인데 프론트엔드 벡앤드 모두 맛은 봐야 이래서 이게 내 적성이다 아니다 라는 판단을 내릴 수 있을 것이다.
HTML의 기본 구성 요소
- 태그 : 웹페이지의 다양한 구성 요소를 정의하는 역할이며, HTML 문법을 이루는 가장 작은 단위.
- 형식) <태그명> (</태그 종료>)
- 속성 : 태그에 어떤 의미나 기능을 보충하는 역할. 옵션.
- 형식) <태그명 속성명="속성값">
- Ex) <html lang="ko">
- 문법
- 콘텐츠가 있는 문법: 콘텐츠의 앞, 뒤를 태그로 감싼다.
- 형식 [ <시작 태그> 컨텐츠 <종료 태그> ] = 요소.
- Ex) <title>My First Web Page!</title>
- 콘텐츠가 없는 문법: 시작 태그만 사용.
- Ex) <br> : 태그인 동시에 요소.
- 콘텐츠가 있는 문법: 콘텐츠의 앞, 뒤를 태그로 감싼다.
- 주석 : 실행결과에는 표시되지 않지만 메모, 설명을 필요로 할 때 사용.
- 형식) <!-- 주석 내용 -->
HTML의 기본 구조
<!DOCTYPE html>
<html lang="ko">
<head>
<!--문자 집합 정의-->
<meta charset="UTF-8">
<!--인터넷 익스플로러의 렌더링 엔진을 최신으로 지정-->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!--기기의 화면 너비에 맞추기 위한 태그-->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!--제목 지정, 중복 주의-->
<title>My First Web Page!</title>
</head>
<body>
<!--웹 페이지에 표시할 내용을 적습니다-->
<p>나의 첫 웹 페이지</p>
</body>
</html>- DTD : 문서형 정의.
- 웹 브라우저가 처리할 HTML 문서가 어떤 형식을 따라야 하는지.
- Ex) <!DOCTYPE html>
- html 태그 : HTML 문서의 시작과 끝. 모든 태그는 html 태그 안에 작성되어야 함.
- head 태그 : 메타데이터를 정의하는 영역.
- 메타데이터: HTML 문서에 대한 정보. 웹 브라우저에 직접 노출되지 않음.
- meta 태그 : 메타데이터를 정의할 때 사용.
- title 태그 : HTML 문서의 제목을 지정할 때 사용.
- body 태그 : 웹 브라우저에 노출되는 내용을 작성하는 영역.
HTML의 특징 파악하기
- 블록 요소와 인라인 요소
- 블록 요소 : 공간 유무와 상관없이 사용할 때마다 줄 바꿈되는 태그.
- Ex) hn 태그, p 태그
- 인라인 요소: 공간이 부족할 때만 줄 바꿈되는 태그.
- Ex) a 태그, span 태그
- 블록 요소 : 공간 유무와 상관없이 사용할 때마다 줄 바꿈되는 태그.
- 부모, 자식, 형제 관계
- html 태그 --부모/자식--> head, body 태그
- head 태그 <--형제--> body 태그
- 줄 바꿈과 들여쓰기
- 사용하는 이유: 코드의 가독성을 위하여.
마무리
목차 상으로는 하나의 장으로 이루어져 있어 분량이 많을 줄 알았으나, 정리하면서 공부했음에도 불구하고 약 30분 정도밖에 걸리지 않았다. 이 내용들이 아직 완벽하게 이해되지는 않지만 복습할 때는 모두 깊이 있게 이해한 상태일 것이다.
'Software Engineering > 길벗 : HTML + CSS + JavaScript' 카테고리의 다른 글
| [CSS] 5장: CSS 선택자 다루기 (0) | 2024.10.15 |
|---|---|
| [도서 리뷰] 길벗 코딩 자율학습 : HTML + CSS + 자바스크립트 (1) | 2024.10.13 |
| [CSS] 4장: 웹 스타일링을 위한 CSS 기초 배우기 (0) | 2024.10.11 |
| [HTML] 3장: 실무에서 자주 사용하는 HTML 필수 태그 다루기 (2) (0) | 2024.10.09 |
| [HTML] 3장: 실무에서 자주 사용하는 HTML 필수 태그 다루기 (1) (8) | 2024.10.09 |
