Keyword overview
HTML
Semantic tag
The Code Card
HTML structure and comment
https://lshjju.tistory.com/789
HTML structure and comment
웹의 가장 기본이 되는 언어인 HTML의 정의부터 작성 규칙까지, 표준 가이드에 따라 하나씩 짚어보겠습니다.1. HTML의 정의**HTML(HyperText Markup Language)**은 웹페이지의 뼈대를 만드는 마크업 언어입니
lshjju.tistory.com
Semantic tag
https://lshjju.tistory.com/791
Semantic tag
시맨틱 태그(Semantic Tag)란 브라우저와 개발자에게 그 **의미(Semantic)**를 명확히 설명해 주는 태그를 말합니다.단순히 구역을 나누는 나 은 그 안에 무엇이 들었는지 알 수 없지만, 시맨틱 태그를
lshjju.tistory.com
Code training
03-1 HTML과 첫 만남
HTML 이란?
03-2 HTML의 구조 파악하기
실습 - HTML 파일 살펴보기
1단계 웹브라우저로 HTML 파일 실행하기
2단계 VS CODE에서 예제 파일 불러오기
예제
https://github.com/lshjju/doit-hcj-new/blob/main/03/index.html
HTML 문서의 기본 구조 살펴 보기
웹 문서의 유형을 지정하는 <!DOCTYPE html> 태그
웹 문서의 시작을 알리는 <html> 태그
웹 브라우저에 문서 정보를 알려주는 <head> 태그
문자 세트를 비롯해 문서 정보가 들어있는 <meta>태그
문서 제목을 나타내는 <title> 태그
웹브라우저에 내용을 표시하는 <body> 태그
03-3 HTML 파일 만들기
실습 - VS code에서 새로운 HTML 파일 만들기
1단계 선택한 폴더에 새 파일 만들기
2단계 새파일 이름 입력하기
3단계 새파일 확인하기
실습 - VS code를 활용하여 HTML 파일 완성하기
1단계 기본코드 입력하기
2단계 문서 언어와 제목 바꾸기
3단계 문서 내용 입력하기
4단계 웹 문서 확인하기
5단계 수정한 후 확인하기
결과
https://github.com/lshjju/doit-hcj-new/blob/main/03/results/my-1.html
실습 - 라이브 서버 설치하고 수정 결과 바로 확인하기
1단계 라이브 서버 설치하기
2단계 편집 창에서 라이브 서버 실행하기
3단계 수정 결과 즉시 확인하기
결과
https://github.com/lshjju/doit-hcj-new/blob/main/03/results/my-2.html
태그, 이건 꼭 알아두세요.
태그는 소문자로 씁니다.
여는 태그와 닫는 태그를 정확히 입력 합니다.
적당하게 들여쓰기를 합니다.
일부 태그는 속성과 함께 사용합니다.
03-4 웹 문서의 구조를 만드는 시맨틱 태그
시맨틱 태그가 왜 필요할까요?
웹 문서의 구조를 만드는 주요 시맨틱 태그
헤더 영역을 나타내는 <header> 태그
네비게이션 영역을 나타내는 <nav> 태그
로고와 네비게이션이 있는 헤더
https://github.com/lshjju/doit-hcj-new/blob/main/03/structure.html
핵심 콘텐츠를 담는 <main> 태그
독립적인 콘텐츠를 담는 <article> 태그
콘텐츠 영역을 나타내는 <section> 태그
<section> 태그 2개로 구성한 본문
https://github.com/lshjju/doit-hcj-new/blob/main/03/structure.html
사이드바 영역을 나타내는 <aside> 태그
푸터영역을 나타내는 <footer> 태그
여러 코드를 묶는 <div> 태그
<div> 태그로 코드 묶기
https://github.com/lshjju/doit-hcj-new/blob/main/03/structure.html
HTML에서 주석 달기
Copyright
이 포스팅의 깃허브코드와 강의 목차 저작권은 이지스퍼블리싱에 있습니다.
https://www.easyspub.co.kr/20_Menu/BookView/696/PUB
'Do it! HTML 웹 표준의 정석' 카테고리의 다른 글
| Form and input tag (0) | 2025.11.06 |
|---|---|
| text / list / table / image / multi media / hyper link (0) | 2025.11.06 |
| Web Development setting (0) | 2025.11.06 |
| About Web (0) | 2025.11.06 |