티스토리 뷰
웹페이지를 구성하는 기본 요소
1. 문서형식정의 === DOCTYPE
출력할 웹페이지의 형식을 브라우저에게 전달한다.
문서의 최상위에 위치해야한다..
2. html 태그
html태그는 모든 html요소의 부모요소이며 단 하나만 존재한다.
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>문서 제목</title>
</head>
<body>
화면에 표시할 모든 콘텐츠는 이곳에 기술한다.
</body>
</html>
3. head 태그
화면에 보여지지않는다.
메타데이터를 포함하기 위한 요소이다.
meta, style, link, script등이 여기에 포함된다
3.1 title 태그
문서의 제목을 나타낸다.(브라우저의 탭에 표시)
3.2 style 태그
HTML문서를 위한 style 정보를 정의한다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>문서 제목</title>
<style>
body {
background-color: yellow;
color: blue;
}
</style>
</head>
<body>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</body>
</html>3.3 link 태그
외부 리소스와 연게할때 사용한다. 주로 HTML과 외부 CSS 파일 연계에 사용된다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>문서 제목</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</body>
</html>3.4 script 태그
client-side Javascirpt를 정의한다. src를 이용하여 외부 자바스크립트 파일을 로드한다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="main.js"></script>
</head>
<body>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</body>
</html>3.5 meta 태그
meta태그안의 charset 은 브라우저가 사용할 문자셋을 정의하며 meta태그는 주로 브라우저와 검색엔진등에 의해 사용된다.
- SEO를 위해 검색엔진이 사용할 keywords를 정의한다.
<meta name="keywords" content="HTML, CSS, XML, XHTML, JavaScript">- 웹페이지의 설명을 정의한다.
<meta name="description" content="Web tutorials on HTML and CSS">- 웹페이지의 저자를 명기한다.
<meta name="author" content="John Doe">
4. body 태그
웹페이지에 단 하나만 존재하며, 메타 데이터를 제외한 웹페이지를 구상하는 대부분의 요소가 body요소 내에 기술된다.
텍스트 관련 태그
1. 제목태그
Heading태그는 제목을 나타낼때 사용한다.
<h1></h1>~~<h6></h6> 까지의 태그가있다.
시멘틱웹의 의미를 살려 제목 이외에는 사용하지 않는 것이 좋다.
2. 글자태그
2.1 b 태그
bold체 지정한다. 의미론적으로는 중요한 의미는 없다.
2.2 strong 태그
b 태그와 동일하게 bold 체를 지정한다. 하지만 의미론적으로 중요성을 가진다.
표현되는 외양은 b태그와 동일하지만 웹표준을 준수하고자 한다면 strong을 사용하는것이 바람직하다.
2.3 i 태그
Italic체를 지정한다. 의미론적(Semantic) 중요성의 의미는 없다.
💡 icon또한 i태그를 사용하는데 inline 컨테이너 형식의 span 태그에 icon 을 넣는것이 좀더 용도에 맞게 사용되는 것이라고한다.
2.4 em 태그
emphasized (강조, 중요) text를 지정한다. i태그와 동일하게 italic체로 지정한다. 의미론적 중요성의 의미를 가진다.
2.5 small 태그
small 텍스트를 지정한다.
2.6 mark 태그
highlighted text를 지정한다.
2.7 del 태그
deleted text를 지정한다.
2.8 ins 태그
inserted text를 지정한다.
2.9 sub/sup 태그
sub= subscripted 아래에 쓰인, sup= superscripted 위에쓰인
<!DOCTYPE html>
<html>
<body>
<p>This is <sub>subscripted</sub> text.</p>
<p>This is <sup>superscripted</sup> text.</p>
</body>
</html>
본문태그
1. p태그
단락을 지정한다.
2. br태그
emty태그로 닫히는 태그가업다. 줄바꿈 태그다.
<!DOCTYPE html>
<html>
<body>
<p>This is<br>a para<br>graph with line breaks</p>
</body>
</html>
💡연속적 공백을 삽입하는 방법
<!DOCTYPE html>
<html>
<body>
<p>This is a para graph</p>
</body>
</html>
3. pre 태그
형식화된 text를 지정한다. pre 태그 내의 content는 작성된 그대로 브라우저에 표시된다.
4. h 태그
수평줄을 삽입한다.
5. q 태그
짧은 인용문(quotation)을 지정한다.
<!DOCTYPE html>
<html>
<body>
<p>Browsers usually insert quotation marks around the q element.</p>
<p>WWF's goal is to: <q>Build a future where people live in harmony with nature.</q></p>
</body>
</html>
'HTML' 카테고리의 다른 글
| [HTML] Image & Multimedia 태그, Forms태그 (0) | 2022.04.26 |
|---|---|
| [HTML] Hyperlink - a태그 , 목록과 표 형식을위한 태그 (0) | 2022.04.19 |
| [HTML] HTML5 기본문법 , 시멘틱 요소와 검색엔진 (0) | 2022.04.14 |