[HTML] 02. 기본 태그

HTML 주석

<!-- 주석 -->

1. 기본 태그

1) <!DOCTYPE >

모든 HTML 문서의 최 상단에 기술

어떤 버전으로 작성되었는지 미리 선언해 웹 브라우저가 내용을 올바로 표시할 수 있도록 해준다.

HTML5에서의 선언 방법

<!DOCTYPE html>

2) <html>~</html>

HTML 문서의 최상위 태그로 HTML 문서의 시작과 끝을 나타냄

- head 요소와 body 요소를 포함
- lang 속성으로 내용에서 사용할 언어를 지정 가능

<html lang="ko"> ~ </html>

3) <title>~</title>

HTML 문서의 제목 표시 부분을 기술

이 부분에 기술된 내용은 브라우저의 제목 표시줄에 나타남

<title>Insert title here</title>

4) <body> ~ </body>

body 요소는 문서의 주된 콘텐츠를 나타냄
HTML 문서에는 body 요소를 반드시 하나 기술

속성

참고 : HTML 5에서는 대부분의 속성을 지원하지 않음(style로 처리)

alink : 사용자(시각 브라우저 용)가 선택한 하이퍼 링크 표시 텍스트의 색상을 설정 background : 배경이미지 지정
bgcolor : 배경색을 지정
link : 방문하지 않은 하이퍼 링크의 색상을 설정
text : 텍스트의 전경색을 설정
vlink : 방문한 하이퍼 링크 텍스트의 색상을 설정

5) <hx>~</hx>

글자크기를 지정하는 태그로 x는 『1~6』 사이의 숫자(1 : 가장 큰 글씨, 6 : 가장 작은 글씨)

<h> 태그는 자동으로 줄 바꿈이 이루어지며 타이틀을 입력 할 경우에 보통 사용

6) ~

문단 태그(Paragraph)

- 단락을 정의하며 한 문단을 나타내는 데 사용한다.
- 태그는 과 유사한 정도의 줄 간격이 생긴다.

- 태그는, 이는 웹브라우저들이 태그와 만나게 되면 그 이전의 문단이 끝났다고 해석하기 때문 HTML

7)

줄 바꿈 태그(Line Break).

줄 바꿈을 지정하는 데 사용

8) <hr>

수평선 태그(Horizontal Rule). 문서 내에 수평선을 넣어주는 태그

size = "선 굵기"
width = "선 길이" : %를 사용하면 브라우저의 폭을 기준으로 선의 길이를 지정

noshade : 입체감 삭제

2. HTML 요소

1) 블럭 요소(block-level element)

블록(block) 레벨 요소는 전후 줄 바꿈이 들어가 다른 요소들을 다른 줄로 밀어내고 혼자 한 줄을 차지

div, h1 ~ h6, p, ol, ul, li, hr, table, form

2) 인라인 요소(inline element)

인라인(inline) 레벨 요소는 전후 줄 바꿈 없이 한 줄에 다른 요소들과 나란히 배치

줄을 바꾸지 않고 다른 요소와 함께 한 행에 위치

span, a, strong, img, br, input, select, textarea, button

html 특수문자

HTML에서 『<, >, &, "』등은 특별한 의미를 갖고 있으므로 다음과 같이 표현

4. formatting 주요 태그

1) ~

- 글자강조 태그(Bold). 볼드체(굵은 글씨체)
- 키워드, 리뷰에서의 상품명, 기타 보통 볼드체로 표현하는 텍스트에 사용

2) ~

- 텍스트 강조 태그(Emphasis). 주관적인 강조를 나타낼 뿐, 중요성을 나타내지는 않는다. -

강조체(이탤릭체). i 태그와 동일하게 출력

3) ~

- 이탤릭체 태그(Italic)

-다른 언어에서 널리 쓰이는 숙어의 인용, 생각, 꿈, 분류학명칭, 기타 보통 이탤릭체로 표현하는 텍스트에 사용

4) <dfn> ~ </dfn>

- 용어 정의 태그(Defining Instance of a Term)
- 웹 페이지 내의 용어, 단어 등의 정의할 때 사용(이탤릭체로 표시)

5) <pre> ~ </pre>

- 서식 설정 텍스트 태그(Preformatted Text)
- 서식이 설정된 텍스트를 표시하는 데 사용

-<pre> 태그는 텍스트 박스에 입력된 그대로 상태를 웹 페이지상에 보여주는 태그

예를 들면, 공백, 탭(Tab), 엔터키 등을 그대로 화면상에 표현할 수 있다.

6) ~

- 첨자 텍스트 태그(Subscript)

아래첨자

7) ~

- 슈퍼 스크립트 태그(Superscript)

위첨자

8) <s>~</s>

- 텍스트 가운데 선 정의 태그(Strikethrough)
- 문자의 가운데에 선을 넣어 준다. HTML 5에서는 지원하지 않음

9) ~

- 밑줄 태그(Underline). HTML 5에서는 지원하지 않음.

10) <cite> ~ </cite>

- 인용 태크(Citation)
- 제목(예를 들면 책, 노래, 영화, TV 쇼, 그림, 조각 등 제목)을 나타낼 때 사용

11) <code> ~ </code>

- 코드 예제 태그(Code Listing)
- 컴퓨터와 관련된 모든 코드 마크업 하는 코드, XML 속성이름, 파일이름 등 표시하기 위해 사용

'💻Programming > 👩‍🎨HTML&CSS' 카테고리의 다른 글

[CSS] 03. 배경 및 이미지 관련 스타일 (0)	2022.09.14
[CSS] (0)	2022.09.14
[HTML] 04. 테이블 관련 태그 (0)	2022.09.09
[HTML] 03. 레이아웃 관련 태그 (0)	2022.09.09
[HTML] 01. 개요 (0)	2022.09.06

[HTML] 02. 기본 태그

HTML 주석

1. 기본 태그

1) <!DOCTYPE >

2) <html>~</html>

3) <title>~</title>

4) <body> ~ </body>

5) <hx>~</hx>

6) <p>~</p>

7) <br>

8) <hr>

2. HTML 요소

1) 블럭 요소(block-level element)

2) 인라인 요소(inline element)

html 특수문자

4. formatting 주요 태그

1) <b> ~ </b>

2) <em> ~ </em>

3) <i>~</i>

4) <dfn> ~ </dfn>

5) <pre> ~ </pre>

6) <sub> ~ </sub>

7) <sup> ~ </sup>

8) <s>~</s>

9) <u> ~ </u>

10) <cite> ~ </cite>

11) <code> ~ </code>

'💻Programming > 👩‍🎨HTML&CSS' 카테고리의 다른 글

티스토리툴바