[HTML] 2. HTML tag
02-1. 기본 HTML 파일의 구조
<!DOCTYPE>
<html>
<head>
</head>
<body>
</body>
</html>02-1-1. <!DOCTYPE>
- 제일 첫 줄에 위치하는 선언문
- 태그 X
- HTML의 버전 선언문
<!DOCTYPE html>(이 선언문은 HTML5 버전을 사용한다는 의미)
02-1-2. <html>
<!DOCTYPE\\>을 제외하고 최상위 태그- 브라우저가
<html>를 만나면, html이 시작됐는지 인지하고 요소를 그릴 준비
<html></html>02-1-3. <head>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>repl.it</title>
</head><html>다음에는 항상<head>태그가 위치- 사이트의 제목, 설명, 부가 정보, 기술적 내용(ex. 모바일용,PC용...)이 들어가는 부분
<meta charset="utf-8">: 한글, 일본어, 중국어가 포함된 페이지라면 utf-8 이라는 값으로 문자 인코딩을 추가해줘야 한다.<meta name="viewport" content="width=device-width">: 디바이스의 가로 크기가 곧 웹 페이지의 가로와 같다는 의미입니다.<title>repl.it</title>: 브라우저 탭에 보이는 페이지 이름
02-1-4. <body>
<body>는 항상<head>다음에 위치- body태그 내부에는 화면에 보여질 각종 태그들이 위치
02-2. HTML tags
02-2-1. <h1> ~ <h6>
- heading의 줄임말
- 제목(heading)을 정의할 때 사용
- 1에서 6으로 숫자가 올라갈수록, 글씨 크기가 점점 작아진다.
<h1>태그는 한 페이지 내에서 단 한 번만 사용,<h2>태그부터는 여러 번 사용<h1>~<h6>태그는 순차적으로 사용하여야 한다. (h5태그를 사용하려면, h1태그가 무조건 존재해야 함.)
02-2-2. <a>
- 하이퍼링크를 걸어주는 태그
href에 이동해야 하는 주소target속성 링크를 여는 방법- _self: 현재 페이지 (기본값)
- _blank: 새 탭
<a href="http://www.naver.com">Naver</a>
<a href="http://google.co.kr" target="_blank">Google</a>02-2-3. <p>
- paragraph의 약자로, 하나의 문단을 만들 때 사용
02-2-4.
<div>태그는 division의 줄임말로 웹사이트에서 섹션을 나눌 때 사용- 다른 태그와 다르게 특별한 기능을 X
02-2-5. <span>
<span>태그는<div>태그처럼 특별한 기능 X<div>는 줄 바꿈이 되지만,<span>은 줄 바꿈이 되지 않는다.- 이렇게 한 줄에 이어서 나오는 요소를
inline-element라고 한다.
[HTML] 3. Attributes
03-1. HTML Attributes
03-1-1. id
id는 각 태그에 이름을 주는 속성으로, 대상을 식별할 수 있는 고유한 값이어야 한다.
(해당 요소에만 넣고 싶은 디자인을 적용할 때 주로 사용)
따라서 웹 페이지에 해당 id 이름은 오직 하나!
<div id="profile">03-1-2. class
class도 태그에 이름을 주는 속성으로, 여러 태그에 중복된 이름을 부여 가능.
Ex.)
<div class="content-wrap"></div>
<p class="content-wrap"></p>03-2. 여러 속성 추가하기
여러 속성을 주고 싶으면 속성의 순서 상관없이 한 칸 띄어쓰기 후 추가하면 된다.
<div id="profile" class="content-wrap"></div>
<img src="./hi.png" alt="내사진" >
반응형
'프로그래밍 언어 > HTML&CSS(Programming Language X)' 카테고리의 다른 글
| [HTML&CSS Basic] 6. CSS Selector, Inheritance (2) | 2022.11.15 |
|---|---|
| [HTML&CSS Basic] 5. Margin & padding / Border / box-sizing (2) | 2022.11.14 |
| [HTML&CSS Basic] 4. Font Style, Text Style (2) | 2022.11.14 |
| [HTML&CSS Basic] 3. Introduction to CSS (1) | 2022.11.14 |
| [HTML&CSS Basic]1. Introduction to HTML (1) | 2022.11.14 |