* HTML 목차
1. 학습용 사이트 : W3Schools
![](https://blog.kakaocdn.net/dn/MKcdH/btszLZFDHI3/0J1uleKAX1sewbr8KmZ0J0/img.png)
HTML h1 to h6 tag
W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.
www.w3schools.com
영어지만 편리합니다.
2. 태그 사용 빈도
HTML Study | Advanced Web Ranking
This study looks at 11 mm index pages gathered from Top 20 Google results to uncover how people write HTML markup as new web tech emerge.
www.advancedwebranking.com
3. 주요 태그
- 닫는 태그와 닫지 않는 태그로 나뉨
1.
strong : 진하게
u : 밑줄, underline
h1 ~ h6 : 제목, heading
- 숫자가 작을수록 글자가 커짐
2.
br : 줄 바꿈
p : 단락 표현, paragraph
<p style="margin-top:45px;">
- CSS를 이용한 여백 생성
3.
img : 이미지, image
<img src="https://s3-ap-northeast-2.amazonaws.com/opentutorials-user-file/module/3135/7648.png">
<img src="coding.jpg">
- src : 이미지 위치, source (속성)
(1) 이미지 주소 입력
(2) 이미지가 프로젝트 폴더에 위치할 때: 파일 이름 적기
- width : 크기 조절 (숫자, %)
4.
li : 목차, list (자식)
ul : 번호 없음, unordered list (부모)
ol : 번호 있음, ordered list (부모)
5. 구조
title : 웹페이지 제목
meta : 웹브라우저한테 문자 표현 방식 알리기
head : 본문을 설명하는 태그
body : 본문
html : body 태그와 head 태그를 감싸는 태그
6.
a : 링크 걸기, anchor
<a href="https://www.w3.org/TR/html5/" target="_blank" title="html5 specification">
- href: HyperText Reference의 약자
- target="_blank": 새창에서 페이지가 열림
* 태그의 크기 (CSS)
4. 속성 (attribute)
- 태그의 심화된 문법
5. 부모 태그, 자식 태그
- 필요에 따라 관계가 달라질 수 있음
- 고정 관계도 있음
'프론트엔드 > 생활코딩' 카테고리의 다른 글
[생활코딩] HTML 6. 부록 정리 (0) | 2023.11.05 |
---|---|
[생활코딩] HTML 5. 웹호스팅 실습 (github 사용법) (0) | 2023.11.05 |
[생활코딩] HTML 4. 원시웹과 서버 (0) | 2023.11.05 |
[생활코딩] HTML 3. 웹사이트 만들기 (0) | 2023.11.05 |
[생활코딩] HTML 목차 (0) | 2023.11.05 |