게으른 나에게

[코딩 자율학습 HTML + CSS + 자바스크립트] 1. HTML로 웹 구조 설계하기 - "2장 HTML 문서 작성을 위한 기본 내용 살펴보기" 본문

My Study/서적 공부

[코딩 자율학습 HTML + CSS + 자바스크립트] 1. HTML로 웹 구조 설계하기 - "2장 HTML 문서 작성을 위한 기본 내용 살펴보기"

handbefore 2024. 7. 20. 18:10

2.1 HTML의 기본 구성요소

 

1. 태그

- HTML 문법을 이루는 가장 작은 단위

- 웹페이지 구성요소 정의.

<태그명>

 

 

2. 속성

- 태그를 의미나 기능적으로 보충.

<태그명 속성명="속성값">

 

3. 문법 

- HTML 문법은 태그와 속성으로 구성

- 속성은 생략가능

- 속성은 여러개 사용 가능

- 태그없이 단독 사용 불가능.

- 콘텐츠가 있는 문법 (시작태그+종료태그)

<title>My First Web Page!</title>

 

- 콘텐츠가 없는 문법 (시작태그)

<br>

 

4. 주석

- 코드에 메모나 설명을 남기고 싶을 때 사용.

- 웹 브라우저의 소스 보기로 주석이 노출되므로 보안이 필요한 내용 작성 x

<!-- 주석 -->

 

2.3 HTML의 기본 구조

5.HTML의 기본 구조

<!DOCTYPE html>				*DTD: 문서형 정의. 문서 작성할 때 항상 처음에 넣어야 함*
<html lang="ko">			*문서의 시작과 끝*
<head>					*메타 데이터 정의 영역. 문서에 대한 정보*
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>문서의 제목/title>		*문서의 제목 (중복되지 않도록 주의)*
</head>

<body>					*웹 브라우저에 노출되는 내용을 작성하는 영역*
 
</body>
</html>

 

 

2.3. HTML의 특징 파악하기

6. 블록 요소와 인라인 요소

- 블록요소: 공간과 상관없이 항상 줄 바꿈 되는 태그로 작성한 코드

- 인라인 요소: 공간이 부족할 때만 줄 바꿈 되는 태그로 작성한 코드

 

7. 부모, 자식, 형제 관계

- 태그 사용위치에 따라 부모, 자식, 형제 관계 성립

 

8. 줄 바꿈과 들여 쓰기

- 코드의 가독성 높임 (암묵적 규칙)

 

 

 

 

출처

 

코딩 자율학습 HTML + CSS + 자바스크립트

기초부터 반응형 웹까지 초보자를 위한 웹 개발 입문서

www.gilbut.co.kr

 

 

'My Study > 서적 공부' 카테고리의 다른 글

[Do it! 한권으로 끝내는 웹 기본 교과서 HTML+CSS+자바스크립트 웹 표준의 정석] "CSS-셋째마당: 06.CSS의 기본"  (0) 2024.07.21
[코딩 자율학습 HTML + CSS + 자바스크립트] 1. HTML로 웹 구조 설계하기 - "3장 HTML 실무에서 자주 사용하는 HTML 필수 태그 다루기"  (2) 2024.07.20
[Do it! 한권으로 끝내는 웹 기본 교과서 HTML+CSS+자바스크립트 웹 표준의 정석] "5장: 마무리 문제"  (3) 2024.07.20
[Do it! 한권으로 끝내는 웹 기본 교과서 HTML+CSS+자바스크립트 웹 표준의 정석] "4장: 마무리 문제"  (1) 2024.07.20
[Do it! 한권으로 끝내는 웹 기본 교과서 HTML+CSS+자바스크립트 웹 표준의 정석] "HTML-둘째마당: 입력양식 작성하기"  (3) 2024.07.20
'My Study/서적 공부' Related Articles more