안녕하세요!

FE 개발자 유진주입니다.

Web/HTML+CSS+JS

웹프로그래밍첫걸음 2장. HTML5 문서 기본 이해하기

ypearl 2023. 5. 1. 14:06

2장. HTML5 문서 기본 이해하기

HTML (HyperText Markup Language)

  • 웹을 위한 하이퍼텍스트 문서 작성 언어
  • 웹 브라우저에서 보여지는 문서의 내부형식을 규정
  • *.htm, *.html

2.1 문서 기본구조

<DOCTYPE html> : HTML5 문서 규약으로 만들어진 웹 문서 표시
<html> : 현재 파일이 html 문서라는 지시사항을 나타낸 태그
	<head> : html 문서에 대한 일반적인 정보를 표시하는 머리말 역할의 태그(화면 출력x)
		<title>제목</title> : 문서 제목 표기 태그
		<meta charset="utf-8"> : 웹 문서에서 사용하고 있는 문자
	</head>
</html>

- 요소(Element)

: HTML 문서 일부분의 특징을 지정하는 개별적 부분

단독태그 / 복합태그

- 속성(Attribute)

: 요소에 추가 정보를 주기 위해 사용

- 특수문자

<!-주석-->
&nbsp; 공백
&lt; <
&gt; >
&quot; "
&amp; &
&copy; 카피라이트

2.2 문서 꾸미기

2.2.1 단락 제목과 줄

  • 제목(Headline) <hn> : n=1(큰)~6(작은)
  • 단락(Paragraph) <p> : 줄을 바꾸면서 동시에 한 줄 띄게 됨 (한줄 여백 생김)

(+) align=”left, center, right” 등의 속성

  • 줄바꿈(Line Break) <br>
  • 가로줄(Horizontal Line) <hr>

2.2.2 단락 꾸미기

  • 작성된 형식 유지 <pre> : 화면 입력 상태 그대로! (공백문자: 빈칸, 탭, 줄바꿈 등)
  • 단락 인용 <blockquote> : 다른 글의 내용을 단락 단위로 인용해 포함시킬 때! 들여쓰기로 구분

2.2.3 다양한 텍스트 꾸미기

  • <em> : 텍스트 강조 (기울여)
  • <strong> : 강한 강조 (진하게)
  • <small> : 작은 글자로
  • <mark> : 하이라이트 효과 (형광펜)
  • <sub>, <sup> : 아래첨자, 위첨자

@ HTML5 비권장(deprecated) 요소

-요소로는 가급적 문서 구조나 의미가 있는 특성을 표현 (출력 모양은 스타일시트 사용 권장)

-텍스트의 모양 관련 요소

  • <font>, <center>, <u>, <b>, <i>, <blink>

2.3 목록 나열하기

  • 순서 없는 목록 <ul>
  • 순서 있는 목록 <ol>

         ㄴ 나열된 항목(list item)은 둘다 <li>

  • 정의 목록 <dl>

         ㄴ 용어(term)은 <dt>, 설명(description)은 <dd>