모던 HTML 이해하기
HTML이란?
HTML(HyperText Markup Language)은 웹페이지를 기술하기 위한 마크업 언어로, 웹페이지의 내용(content)과 구조(structure)를 담당하는 언어로써 HTML 태그를 통해 정보를 구조화하는 것이다.
Hyper는 텍스트 등의 정보가 동일 선상에 있는 것이 아니라 다중으로 연결되어 있는 상태를 의미한다. 또한 HTML의 가장 중요한 특징이 link의 개념과 연결되는데 한 텍스트에서 다른 텍스트로 건너뛰어 읽을 수 있는 기능을 하이퍼링크(Hyper Link)라고 한다.
HTML 태그
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="description" content="모던 HTML을 공부하기 위해 노력중이에요!">
<meta name="keywords" content="HTML, CSS, JAVASCRIPT">
<meta name="author" content="minsu">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css">
<link rel="icon" href="favicon.png">
</head>
<body>
<script>
let testCode = '하위';
console.log(testCode);
</script>
</body>
</html><!DOCTYPE html>
문서의 최상단에 위치한 태그로서 HTML 문서임을 나타내는 태그다. 명칭은 문서 형식 정의(Document Type Definition, DTD) 태그이고, 출력할 웹페이지의 형식을 브라우저에게 전달한다.
<html>
모든 HTML 요소의 부모 요소이며 웹페이지에 단 하나만 존재한다. 즉, 문서의 범위를 설정한다.
<html lang="ko">- html은lang이라는 속성이 있고, 주로 한국어(ko)를 사용한다.
<head>
head 요소는 메타데이터를 포함하기 위한 요소이며 웹페이지에 단 하나만 존재한다. 메타데이터란, 문서 전반에 걸친 정보를 표시하기 위한 설정이다. 메타데이터 설정은 <meta>라는 태그를 사용한다. 또한 <meta>에는 여러 속성들이 있다.
<meta>
<meta charset="utf-8">- 브라우저가 사용할 문자셋을 정의한다. 모든 문자를 표현할 수 있는utf-8을 주로 사용한다.<meta name>- SEO(검색엔진 최적화)를 위해 주로keywords, description, author를 사용한다.<meta http-equiv="X-UA-Compatible" content="IE=edge">- 호환성 이슈로 인해 사용한다. HTML 파일을 웹브라우저로 변환해서 화면을 보여주는 것을 이를 렌더링이라 하는데 이 렌더링될 때 표준 모드라는 것이 있다. 하지만 인터넷 익스플로러(IE) 같은 경우는 항상 표준에서 동떨어졌기 때문에 렌더링될 때 이상하게 보여질 수 있다. 그래서 이러한 호환성 이슈를 예방하기 위한 속성이기 때문에 기본적으로 문서에 포함하는 것이 좋다.<meta name="viewport" content="width=device-width, initial-scale=1.0">- viewport(뷰포트)란, 현재 화면에 보여지고 있는 직사각형 화면창을 말하며 이 화면창이 축소되거나 확대될 때 화면이 깨지는 것을 방지하기 위한 반응형 웹 관련 속성이다.
<link>
html 문서에 필요한 외부 리소스를 가져오기 위해 사용한다. <link> 태그는 주로 css 파일과 아이콘 파일을 가져오기 위해 사용한다.
<title>
문서의 제목을 정의한다. 정의된 제목은 브라우저의 탭에 표시된다.
<script>
javascript 코드를 사용하기 위한 태그이며, 예전에는 <script type="text/javascript">처럼 type을 명시를 해주었는데 요즘은 그냥 생략한다.
<body>
문서의 내용을 나타내며 엡페이지에 단 하나만 존재한다. 메타데이터를 제외한 대부분의 요소가 body 요소 내에 사용된다.
제목 태그
<h1>hello</h1>
<h2>hello</h2>
<h3>hello</h3>
<h4>hello</h4>
<h5>hello</h5>
<h6>hello</h6>제목을 나타낼 때 사용하는 태그이며, 시맨틱 웹의 의미를 살려서 제목 이외에는 사용하지 않는 것이 좋다. 검색엔진이 제목 태그를 보고 중요한 의미로 받아들일 가능성이 크다.
b VS strong
둘 다 bold체를 지정하지만 b 태그는 시맨틱 중요성이 없고, strong 태그는 시맨틱 중요성을 가지고 있다. 웹표준을 준수하고 있다면 strong 태그를 사용하자!
i VS em
둘 다 Italic체를 지정하지만 i 태그는 시맨틱 중요성이 없고, em 태그는 시맨틱 중요성을 가지고 있다.
br
br 태그는 줄바꿈(개행)을 한다. 또한 종료태그가 없다. ex) <br>
공백
HTML에서는 1개 이상의 연속된 공백(space)을 삽입하여도 1개의 공백으로 표시된다. 연속된 공백을 사용하기 위해서는 을 사용한다.
p VS pre
p 태그는 단락을 나타내는데 형식화된 단락을 지정하고 싶다면 pre 태그를 사용한다.
a
HTML link는 hyperlink를 의미하며 a 태그가 그 역할을 담당한다.
<a href="http://www.naver.com" target="_blank"
rel="noopener noreferrer">Go to naver!</a>href- 이동하고자 하는 파일의 위치를 값으로 받는다.target- 링크를 클릭했을 때 새 창으로 열지 현재탭에서 열지를 지정한다._self- 현재 탭에서 연다.(기본값)_blank- 새 창에서 연다.
target="_blank" 를 사용해 외부 페이지를 열 경우, 이동한 외부 페이지에서 JS 코드를 사용해 악의적인 페이지로 리다이렉트할 수 있는 보안 취약점이 있다. 따라서 rel="noopener noreferrer"를 추가해 보안을 강화할 수 있다.
img
웹페이지에 이미지를 삽입하는 경우에 img 태그를 사용한다.
<img src="hello.png" alt="hello image">alt- 웹접근성을 높이는 필수 속성처럼 다루는 것이 좋다. (구글 SEO문서에서도alt를 필수로 권장한다.)
table
table 태그는 표를 만들 때 사용하는 태그이다.
<table>
<thead>
<tr>
<th>제목1</th>
<th>제목2</th>
</tr>
</thead>
<tbody>
<tr>
<td>내용1</td>
<td>내용2</td>
</tr>
<tr>
<td>내용1</td>
<td>내용2</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>표의 마지막1</td>
<td>표의 마지막2</td>
</tr>
</tfoot>
</table>thead, tbody, tfoot은 시맨틱 중요성을 가지고 있다. - 표준
thead나 tfoot은 표에서 한번만 나오거나 한번도 나오지 말아야 하며, tfoot은 thead보다 뒤에 위치해야 한다.
References
'공부 기록' 카테고리의 다른 글
| [CSS] Cascading 이해하기! 추가로. ::before, ::after (0) | 2022.06.18 |
|---|---|
| 웹 표준, 웹 접근성, 크로스 브라우징 개념 (0) | 2022.06.18 |
| var VS let VS const (0) | 2022.06.14 |
| null VS undefined (0) | 2022.06.13 |
| 양식 다시 제출 확인 팝업창 (0) | 2022.01.14 |
댓글