참고 책 : https://www.yes24.com/Product/Goods/108748709
코딩 자율학습 HTML + CSS + 자바스크립트 - 예스24
코딩을 몰라도 걱정 제로, 이 책 하나로 충분히 웹 개발을 시작할 수 있다!이 책은 코딩 초보자가 문법을 빠르고 재밌게 배울 수 있도록 실무에서 주로 사용하는 내용을 쏙쏙 골라 다양한 예제와
www.yes24.com
HTML의 기본 구성 요소: 태그와 속성
태그: 구성 요소를 정의하는 역할. <> 안에 태그명을 넣는다.
속성: 태그에 의미나 기능을 보충하는 역할. 사용하지 않아도 되고 여러 개 사용해도 된다. 속성명="속성"
<태그명>
<태그명 속성명="속성값">
<태그명 속성명="속성값1, 속성값2, 속성값2 ...>
HTML 문법
콘텐츠가 있는 문법, 콘텐츠가 없는 문법
1. 콘텐츠가 있는 문법
시작 태그, 콘텐츠, 종료 태그가 존재
<!--콘텐츠가 있는 문법의 요소-->
<태그명> 콘텐츠 </태그명>
2. 콘텐츠가 없는 문법
시작 태그만 존재. 빈 태그라고 한다
<!--콘텐츠가 없는 문법의 요소-->
<태그명>
주석
<!-- -->
형태로 사용한다.
웹 브라우저의 소스 보기에서는 주석이 보이기 때문에 중요한 것이나 보안이 필요한 것은 적으면 안된다.
HTML의 기본 구조
-DTD
-html 태그
-head 태그
-body 태그
1. DTD(Document Type Definition)
웹 브라우저가 처리할 HTML문서의 형식을 나타낸다.
맨 처음에 써줘야 한다.
<!DOCTYPE html>HTML5 등장 후에는 문서 형식을 정의할 필요가 없으므로 <!DOCTYPE html>을 쓰면 된다.
2. html 태그
HTML 문서의 시작과 끝으로 모든 태그는 html 태그 안에 써줘야 한다.
<html> </html>
3. head 태그
HTML 문서의 메타 데이터(HTML 문서에 대한 정보)를 정의한다.
웹 브라우저에 직접 보이지 않는다.
meta 태그와 title 태그 등이 있다.
<head> </head>
4. body 태그
웹 브라우저에서 보이는 부분이다.
<body> </body>
HTML 특징
1. 블록 요소와 인라인 요소
블록 요소: 가로의 너비가 콘텐츠의 길이와는 상관 없이 가로 한 줄을 차지하는 것 (줄 바꿈)
인라인 요소: 가로의 너비가 콘텐츠의 길이만큼 차지하는 것 (줄 안바꿈)
https://sdsupport.cafe24.com/reference/html/block-inline.html
스마트디자인 서포트
sdsupport.cafe24.com
2. 부모, 자식, 형제 관계가 있다.
태그의 사용 위치에 따라 관계가 맺어진다.
3. 줄 바꿈과 들여쓰기
줄 바꿈과 들여쓰기가 강제는 아니지만 HTML 문서의 가독성을 위해 암묵적으로 지켜지는 룰이다.
'코딩 자율학습' 카테고리의 다른 글
| [길벗 코딩자율학습단] 학습 후기 (1) | 2023.12.20 |
|---|---|
| CSS 문법 (0) | 2023.12.03 |
| HTML 태그 종류 (0) | 2023.11.26 |