일자 : 24-2 14주차 1차시
[1] Korean Characters
1) EUC-KR에서 한글 깨짐
<!DOCTYPE html>
<html>
<head>
<meta charset="euc-kr">
<title>Page Title</title>
</head>
<body>
<h1>This is a Heading 한글</h1>
<p>This is a paragraph.</p>
</body>
</html>- 파일 저장 및 환경 불일치로 인해 한글이 깨짐.
- 파일이 UTF-8로 저장되었으나, 브라우저가 EUC-KR로 해석.
- EUC-KR은 2바이트 고정이므로 UTF-8의 가변 길이(3바이트) 한글 데이터를 제대로 처리하지 못함.
- 결과적으로 한글이 깨져 보이거나 이상한 문자로 출력됨.
2) UTF-8에서 한글 표시 성공
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Page Title</title>
</head>
<body>
<h1>This is a Heading 한글</h1>
<p>This is a paragraph.</p>
</body>
</html>- UTF-8로 저장된 파일과 브라우저 설정이 일치해 한글이 정상적으로 표시.
- UTF-8은 유니코드 표준을 사용해 한글을 3바이트로 인코딩.
- 브라우저가
<meta charset="UTF-8">를 읽고 올바르게 해석. - 서버와 파일 환경도 UTF-8을 지원하면 깨짐 현상 발생하지 않음.
[2] Semantic Elements in HTML
: Below is a list of some of the semantic elements in HTML.
| Tag | Description |
|---|---|
<article> | Defindes Independent, self-contained content |
<aside> | Defindes content aside from the page content |
<details> | Defindes additional details taht the user can view or hide |
<figcaption> | Defindes a caption for a <figure> element |
<figure> | Specifies self-contained content, like illustrations, diagram etc. |
<footer> | Defindes a footer for a document or section |
<header> | Specifies a header for a document or section |
<main> | Specifies the main content of a document |
<mark> | Defindes marked/highlighted text |
<nav> | Defindes navigation links |
<section> | Defindes a section in a documeent |
<summary> | Defindes a visible heading for a <detials> element |
<time> | Defindes a date/time |
[3] 시맨틱 요소란 무엇인가?
- 시맨틱 요소는 '의미를 가진 요소'를 의미한다.
- 시맨틱 요소는 브라우저와 개발자에게 요소의 의미를 명확하게 전달한다.
- 비시맨틱 요소의 예:
<div>와<span>- 콘텐츠에 대해 아무것도 알려주지 않는다. - 시맨틱 요소의 예:
<form>,<table>,<article>- 콘텐츠를 명확하게 정의한다.
[4] HTML의 시맨틱 요소
- 많은 웹사이트는 네비게이션, 헤더, 푸터를 나타내기 위해
<div id="nav">,<div class="header">,<div id="footer">와 같은 HTML 코드를 사용한다. - HTML에는 웹페이지의 다양한 부분을 정의할 수 있는 시맨틱 요소들이 있다.
[5-1] main
1) 예시
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Page Title</title>
</head>
<body>
<main>
</main>
</body>
</html>2) main에 대한 설명
<main>요소는 문서의 주요 콘텐츠를 나타낸다. 이 요소는 페이지에서 주요한 내용만을 포함하고 있어야 하며, 사이트 내 다른 콘텐츠(헤더, 푸터 등)와는 구분된다.
[5-2] section
1) 예시
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Page Title</title>
</head>
<body>
<section>
</section>
<section>
</section>
</body>
</html>2) section에 대한 설명
<section>요소는 문서 내의 구획을 정의한다.- W3C HTML 문서에 따르면, "섹션은 콘텐츠의 주제별 그룹화로, 일반적으로 제목을 가진다."
<section>요소를 사용할 수 있는 예시:- 챕터
- 소개
- 뉴스 항목
- 연락처 정보
- 웹 페이지는 보통 소개, 본문, 연락처 정보와 같은 여러 섹션으로 나눠진다.
[5-3] article
1) 예시
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Page Title</title>
</head>
<body>
<article>
</article>
<article>
</article>
</body>
</html>2) article에 대한 설명
<article>요소는 독립적이고 자체적으로 완결된 콘텐츠를 정의한다.- 하나의
<article>은 독립적으로 의미가 있어야 하며, 사이트의 다른 콘텐츠와 관계없이 배포할 수 있어야 한다. <article>요소를 사용할 수 있는 예시:- 포럼 게시글
- 블로그 게시글
- 사용자 댓글
- 제품 카드
- 신문 기사
[5-4] <article>을 <section> 안에 넣거나 그 반대로?
<article>요소는 독립적이고 자체적인 콘텐츠를 나타내며,<section>요소는 문서 내의 구획을 정의한다.- 이러한 정의를 통해 요소의 중첩 방식을 결정할 수 있을까? 아니, 그렇지 않다!
- 그래서 HTML 페이지에서
<section>요소 안에<article>요소가 포함되기도 하고,<article>요소 안에<section>요소가 포함되기도 한다.
[5-5] header
1) 예시
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Page Title</title>
</head>
<body>
<article>
<header>
<p></p>
</header>
<p></p>
</article>
</body>
</html>2) header에 대한 설명
<header>요소는 소개 콘텐츠나 내비게이션 링크 세트를 담는 컨테이너 역할을 한다.<header>요소에는 일반적으로 다음이 포함된다:- 하나 이상의 제목 요소
- 로고나 아이콘
- 저자 정보
- 참고: 하나의 HTML 문서에 여러 개의
<header>요소를 포함할 수 있다. 그러나<header>요소는<footer>,<address>, 또는 다른<header>요소 안에 넣을 수 없다.
(마저 작성하기)
안녕하세요, 사용자들의 문제 해결을 중심으로 하는 프론트엔드 개발자입니다. 티스토리로 전환했어요 : https://pangil-log.tistory.com