HTML 기초 #1

 

<h1> : heading, 머릿말
- h{n} : n이 커질 때마다 폰트 크기가 작아짐

<p> : paragraph, 내용

<blockquote> : 인용문

<br> : 줄바꿈
<hr> : 수평선

 

See the Pen H1234 by Cheolho Jang (@chiro-J) on CodePen.

 

 

 

<pre> : 서식 그대로 출력

<strong> / <b> : 볼드체 (굵게)

<em> / <i> : 이태릭체 (기울임)

<q> : 인용 (" ")

<ruby> : 글자 바로 위에 주석이나 설명이 필요한 경우 (ex. 일본어 한자 → 후리가나)
- rt (ruby top) : ruby 태그 안에서 글자 위 주석을 담당.

 

See the Pen Untitled by Cheolho Jang (@chiro-J) on CodePen.

 

 

 

<li> : list item, 리스트안에 들어갈 요소

<ul> : unordered list, 순서 없는 리스트 영역 지정

<ol> : ordered list, 순서 있는 리스트 영역 지정
※ 글머리 기호를 a, b, c로 하고 싶다면 <ol type=a> 이런 식으로 지정하면 된다.

 

See the Pen lists by Cheolho Jang (@chiro-J) on CodePen.

 

 

 

<table> : 표 전체 영역 지정

<caption> : 표 제목

<thead> / <tbody> / <tfoot> : 표의 구조적 구분

<tr> : table row, 행

<th> : 헤더 셀

<td> : table data, 일반 셀

 

See the Pen Untitled by Cheolho Jang (@chiro-J) on CodePen.

 

 

 

 

 

 

 

 

<img> : 이미지 삽입
 - <src> : 이미지 경로
 - <alt> : 대체 텍스트
 - <width> / <height> : 이미지 크기 조절 (너비, 높이)

See the Pen image beginner by Cheolho Jang (@chiro-J) on CodePen.

 

 

 

<svg> : 직접 그리는 방식의 이미지

<circle>, <rect>, <line>, <path> 등 : 도형을 그리는 요소들

<map> : 특정 부분 클릭 가능한 링크로 지정 가능

<img usemap="#mapname"> : 맵을 적용할 이미지

<map name="mapname"> : 이미지 맵을 정의

<area> : 클릭 가능한 영역 설정 (좌표 기반)

 

See the Pen Untitled by Cheolho Jang (@chiro-J) on CodePen.

 

 

 

 

 

 

 

 

 

실습

 

See the Pen basic-practice by Cheolho Jang (@chiro-J) on CodePen.