본문 바로가기
프론트엔드/생활코딩

[생활코딩] HTML 2. 태그

by cejin 2023. 11. 5.

HTML 목차
 
 

1. 학습용 사이트 : W3Schools

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. 부모 태그, 자식 태그

- 필요에 따라 관계가 달라질 수 있음
- 고정 관계도 있음