728x90
📌 기본 세팅
<!DOCTYPE html>
-- 현재 문서 형식 지정
<html lang="en">
-- html 문서의 내용을 정의하는 태그
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
-- html 문서를 정의하는 태그
현재 문자 형식이 UTF-8로 되어 있음을 선언
title에 문서 제목 작성
<body>
</body>
-- body 태그 : 화면에 보여질 html 문서의 내용을 정의하는 태그
</html>📌 글씨 관련 태그
<!-- <h1> ~ <h6> 태그
제목을 입력할 때 사용하는 태그
1~6까지 6단계의 폰트 크기가 지정되어 있음
* 해당 태그는 시작부터 종료까지가 하나의 문담이 됨
== 종료 태그 이후 줄바꿈이 일어난다.
-->
<!-- hr(horizon : 수평선)태그 : 가로줄 긋기 태그 -->
<!-- 띄어쓰기 한칸 -->
<!-- br 태그 : line break -->
<!-- p 태그 (Paragraph : 단락, 문단)
- 글을 작성하는 용도의 태그
- 종료 시 줄바꿈
-->
<!-- pre 태그 (preformatted)
- 글을 작성하는 용도의 태그
- 줄바꿈
- 시작, 종료 태그 사이에 작성된 문자열의 형식을 그대로 출력함
-->
------------------------------------------------------------------------------------------
<h1> 글자 관련 기타 태그 </h1>
<b> b 태그 </b> : 단순히 글자를 굵게 표시하는 태그 <br>
<strong> strong 태그 </strong> : 글자를 강조하는 태그 (웹접근성) <br>
<i> i 태그 </i> : 단순히 글자를 기울이는 태그 <br>
<em> em 태그 </em> : 글자를 강조하는 태그 (웹접근성) <br>
<mark> mark 태그 </mark> : 형관펜 효과를 나타내는 태그 <br>
<u> u 태그 </u> : 밑줄을 긋는 태그 <br>
<s> s 태그 </s> : 취소선을 긋는 태그 <br>
<del> del 태그 </del> <br>
<small> small 태그 </small> : 글자를 작게<br>
sup 태그(윗첨자) : x<sup>2</sup><br>
sub 태그(아래첨자) : log<sub>10</sub><br>
abbr(abbreviation : 약어) 태그 : 마우스 오버시 툴팁 출력 태그
<abbr title="Hyper Text Transfer Protocol"> HTTP</abbr>📌 목록 관련 태그
<h1>02_목록 관련 태그</h1>
<h3>ul (unOrdered List)태그 : 순서 없는 목록을 작성하는 태그(영역) </h3>
<h3>li (List Item) 태그 : 목록에 들어가는 내용을 작성하는 태그</h3>
<h3> ol(Ordered List) 태그 : 순서가 있는 목록을 작성하는 태그(영역)</h3>
*ol 태그의 type 속성
type = "a" --> 영어 소문자 순서
type = "A" --> 영어 대문자 순서
type = "i" --> 로마 소문자 순서
type = "I" --> 로마 대문자 순서
+ 추가 속성
start = "5" --> 순서가 5부터 시작
reversed --> 순서가 반대로📌 표 관련 태그
table 태그
- 웹 문서에서 자료 정리를 위해 주료 사용하는 태그
- 행과 열로 이루어져 있으며, 행과 열이 교차하는 지점을 셀(cell)이라고 함
- table 태그는 테이블을 나타내는 행과 열이 작성될 수 있는 영역을 지정함 4
tr 태그
- Table Row 의 약자로 한행을 나타내는 태그
td 태그
- Table Data 의 약자로 한 행의 한 컬럼(==셀)을 나타내는 태그
th 태그
- Table Header의 약자로 컬럼명을 표시하는 용도의 태그가
- 기본 성질은 td 태그와 같으나 굵은 글씨, 가운데 정렬이 이루어짐
caption태그
- 테이블의 제목이나 설명 내용을 추가하는 태그
병합
- rowspan: (상하) 행 병합
- colspan: (좌우) 열 병합
테이블 구조 설정 태그
thead : 테이블의 상단 부분영역 (컬럼명)
tbody : 테이블의 중단 부분영역 (실제 값, 내용)
tfoot : 테이블의 하단 부분영역 (합계)📌 영역 관련 태그
block 형식
- 공간을 수직 분할
-> 수직으로 되어있는 화면을 가로로 잘라서
여러 행을 만드는 것
- 크기를 지정하는 width,height 속성을 사용할 수 있음(o)
ex) p/pre(문단 나누기),h1 ~ h6(제목 영역 나누기)
hr(수평선을 넣어서 화면 나누기), div(영역 나누기)
<div id="div1">첫 번째 영역</div>
<div id="div2">두 번째 영역</div>
<div id="div3">세 번째 영역 </div>
inline 형식
- 공간을 수평 분할
-> 수평으로 되어 있는 화면을 세로로 잘라서
여러 열(컬럼)을 만드는 것
- 크기를 지정하는 width,height 속성을 사용할 수 없음(x)
ex) strong/b(글자를 굵게), em/i(글자 기울기),
mark(글자의 배경색), span(한 줄을 나누는 용도)
<span id="span1">첫 번째 영역</span>
<span id="span2">두 번째 영역</span>
<span id="span3">세 번째 영역</span>728x90
'ON > HTML CSS' 카테고리의 다른 글
| [CSS] 클래스 선택 (0) | 2023.06.11 |
|---|---|
| [CSS] 문자열 속성 [ ~= / |= / ^= / $= ] (0) | 2023.06.09 |
| [CSS] 기본속성 | 자식선택자 | 후손선택자 (0) | 2023.06.08 |
| [CSS] 태그 | 아이디 | 클래스 (0) | 2023.06.08 |
| [HTML] 이미지 | 하이퍼링크 | 입력 | form (0) | 2023.06.07 |
