JunO3O
HTML : 시맨틱(Semantics)
HTML : 시맨틱(Semantics)
2023. 3. 21. 03:10ㆍ비공개
HTML5 ?
: MDN에 가면 HTML의 정의와 그 외의 것들을 볼 수 있는데, HTML이란 웹을 이루는 가장 기초적인 구성 요소로, 웹 콘텐츠의 의미와 구조를 정의할 때 사용하는 것이라고 합니다.
: HTML5란 HTML의 5 버전이라고 생각하면 됩니다.
블록(div) vs 인라인(span) 요소
: 블록(div) 요소는 박스 형태로 영역이 설정되며, width, height 크기 지정을 할 수 있습니다.
: 인라인(span) 요소는 줄 단위로 영역이 설정되며, width, height 크기 지정을 할 수 없습니다.
ㅁ div 와 span 의 차이
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
body {
background-color: yellow;
}
#div1 {
background-color: aquamarine;
}
#span1 {
background-color: orange;
}
</style>
</head>
<body>
<div id="div1">
강아지(puppy)는 개의 새끼를 일컫는다. 강아지는 성체로 발달하는 과정에
있으므로 자라면서 털색이나 체형 등이 달라질 수 있으며, 정서적인 변화를
겪기도 한다. 태어난 강아지는 생후 10일까지는 출생견으로 본다. 강아지는
견종에 따라 체중이 매우 다양하며 태어난지 14일 무렵 눈을 뜨고 소리에
반응하며 걷기 시작한다.
</div>
<br />
<br />
<span id="span1">
강아지(puppy)는 개의 새끼를 일컫는다. 강아지는 성체로 발달하는 과정에
있으므로 자라면서 털색이나 체형 등이 달라질 수 있으며, 정서적인 변화를
겪기도 한다. 태어난 강아지는 생후 10일까지는 출생견으로 본다. 강아지는
견종에 따라 체중이 매우 다양하며 태어난지 14일 무렵 눈을 뜨고 소리에
반응하며 걷기 시작한다.
</span>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="euc-kr" />
<title>Document</title>
<style type="text/css">
body {
background-color: black;
}
div {
width: 500px;
height: 50px;
border: 2px solid;
padding: 5px;
margin: 10px;
}
#div1 {
background-color: yellow;
}
#div2 {
background-color: aquamarine;
}
#div3 {
background-color: whitesmoke;
}
span {
width: 5000px; /* width, height 값을 5천을 주어도 span에서는 영향을 받지 않는다. */
height: 5000px;
border: 10px solid red;
padding: 50px;
margin: 10px;
}
#span1 {
background-color: yellow;
}
#span2 {
background-color: aquamarine;
}
#span3 {
background-color: whitesmoke;
}
</style>
</head>
<body>
<div id="div1">div1</div>
<div id="div2">div2</div>
<div id="div3">div3</div>
<br /><br /><br /><br /><br />
<span id="span1">span 1</span>
<span id="span2">span2</span>
<span id="span3">span3</span>
</body>
</html>
기타 요소 - <hr>, <br>, <sup>, <sub>
ㅁ <hr> 태그
: <hr> 태그는 수평으로 가로지르는 선을 하나 만들어주는 역할을 하며, 닫는 태그가 없습니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>강아지</title> </title>
</head>
<body>
<a href="https://ko.wikipedia.org/wiki/%EA%B0%95%EC%95%84%EC%A7%80"> 위키피디아 강아지</a> <br>
<a href="HTML_Four_Leaf_Clover.html"> 네잎클로버 파일</a>
<h1>강아지</h1>
<hr> <!-- <hr> 태그를 적은 부분에 수평선이 생기게 됩니다. -->
<img src="/Bootcamp/Img/puppy.jpg" width="100px" height="100px">
<img src="puppy.jpg" alt="강아지 사진">
<hr> <!-- <hr> 태그를 적은 부분에 수평선이 생기게 됩니다. -->
...
ㅁ <br> 태그
: <br> 태그는 한 줄 아래 쓸 때 사용하는 줄바꿈 태그입니다.
: VSC에서는 Enter를 입력하더라도 한 줄 아래 글자가 적히지 않기 때문에 한 줄 아래 글자를 적기 위해서는 <br> 태그를 사용해야 합니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<h1>hr 태그</h1>
<hr />
<p>hr 태그는 수평선을 만드는 태그입니다.</p>
<h1>br 태그</h1>
<p>br 태그는 <!-- Enter를 입력했더라도 같은 줄에 출력됩니다. -->
한 줄 아래
적히도록
구분해주는
태그입니다.</p>
<p>
VSC에서는 Enter를 입력하더라도 한 줄 아래 글자가 입력되지는 않습니다.
<br /> <!-- 한 줄 아래 입력되게 하기 위해서는 <br> 태그를 사용해야 합니다. -->
그렇기 때문에 <br />
한 줄 아래 <br />
글자가 입력되도록 <br />
하기 위해서는 <br />
br 태그를 <br />
사용합니다.
</p>
</body>
</html>
ㅁ <sup>, <sub> 태그
: <sup> 태그는 윗첨자를 입력할 때 사용합니다.
: <sub> 태그는 아랫첨자를 입력할 때 사용합니다.
<h1>sup, sub 태그</h1>
<h1>
sup 태그는 윗첨자를 입력할 때 사용합니다. 예를 들어, 2의 제곱을 표시할 때
2의 <sup>2</sup>으로 표시합니다.
</h1>
<h1>
sub 태그는 아랫첨자를 입력할 때 사용합니다. 예를 들어, 구글 연결 링크를 만들고 싶을 때
<sub><a href="https://www.google.com">연결</a></sub> 처럼 만들 수 있습니다.
</h1>
엔티티 코드
: 엔티티 코드는 특수 문자를 입력하기 위해 사용하는 코드입니다.
: 엔티티 코드는 & 로 시작해서 ; 로 끝나며 그 사이에 글자를 입력하면 됩니다.
: https://entitycode.com/#common-content 에 접속하면 특수 문자를 입력하기 위해 필요한 엔티티 코드를 제공해줍니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<h1>엔티티 코드 사용법</h1>
<p>
엔티티 코드는 엠퍼센트(&)와 세미콜론(;) 사이에 입력해주면 됩니다. 예를
들어, '1은 2보다 작다'를 기호로 표시하기 위해서는 &와 ; 사이에 lt를
입력해야 하고 그 결과 1
<b> < </b> 2 가 나오게 됩니다.
</p>
</body>
</html>
시맨틱 마크업
: 시맨틱 마크업이란 의미 있는 마크업을 뜻하거나 그 요소의 내용의 의미에 관련된 마크업을 의미합니다.
: 웹 페이지에 어떠한 것을 나타낼 때 머리말, 꼬리말, nav, section, article, main 등으로 요소의 내용에 의미를 담아 코딩을 하게 되는 것과 단순히 div 만을 사용하여 해당 요소가 어떤 의미를 담고 있는지 알기 힘들게 코딩하는 것의 차이는 큽니다.
: 부여된 의미는 다른 컴퓨터나 다른 개발자가 보더라도 작성자가 어떠한 의미를 가지고 코드를 작성하였는지 보다 쉽게 이해할 수 있습니다.
ㅁ 시맨틱 마크업 사용법
: 시맨틱 마크업에는 section, article, nav, main, header, footer, aside, summary, details 등이 있습니다.
: https://developer.mozilla.org/ko/docs/Web/HTML/Element/article MDN 사이트에 들어가서 검색하면 어디에 어떤 시맨틱 마크업을 사용하는지 나와있습니다.
<main> : 문서의 주요 내용을 나타냅니다.
<nav> : 페이지에서 네비게이션 링크를 제공하는 것들을 나타냅니다.
<section> : 웹 사이트나 애플리케이션의 독립적인 부분을 나타냅니다.
<article> : 문서 내의 독립적인 구성을 나타냅니다.
<aside> : 주요 내용을 설명하는 사이드 바나 말풍선 등을 나타냅니다.
<header> : 머리말을 나타내며 보통 내용에 대한 소개를 할 때 사용합니다.
<footer> : 꼬리말을 나타내며 회사에 대한 정보나 저작권 등을 표현할 때 사용합니다.
* 이 외에도 많은 시맨틱 마크업이 존재합니다.
스크린 리더
: 해당 페이지 내에 있는 다양한 요소들을 탐색하여 읽어주는 기능을 '스크린 리더'라고 합니다.
: 시맨틱 마크업을 사용하였을 경우 스크린 리더가 존재하는 요소들을 읽어 보여줍니다.
Emmet(에밋)
: Emmet(에밋)이란 여러 요소를 만들 때 반복 작업을 하지 않고 단축 명령어를 통해 코드를 작성하는 것을 말합니다.
: https://docs.emmet.io/abbreviations/syntax/ 에서 단축키에 대한 설명을 볼 수 있습니다.
main>header>h1>p 를 입력하고 탭을 누르면 아래와 같이 <body> 안에 <main> 이 생기고
<header> 안에 <h1> 태그와 <p> 태그가 생기게 됩니다.
<body>
<main>
<header>
<h1>
<p></p>
</h1>
</header>
</main>
</body>
nav>ul>li*3>a 를 입력하고 탭을 누르면 아래와 같이 <body> 안에 <nav> 가 생기고
그 안에 <ul>과 <li> 3개, <a> 태그가 생기게 됩니다.
<body>
<nav>
<ul>
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
</ul>
</nav>
</body>
nav>ul>li*5>a[href=$] 처럼 <a> 태그 뒤에 [href=$]를 사용하면 li에서 지정한 5개만큼의 1~5까지의
href=1, href=2, href=3, href=4, href=5 가 생기게 됩니다.
<body>
<nav>
<ul>
<li><a href="1"></a></li>
<li><a href="2"></a></li>
<li><a href="3"></a></li>
<li><a href="4"></a></li>
<li><a href="5"></a></li>
</ul>
</nav>
</body>
nav>ul>li*5>a[href=a$]{a$} 를 입력하면 [href=a$] 를 통해 href=a1 ~ href=a5 를 만들고
{a$} 를 통해 내용에 a1 ~ a5를 만들 수 있습니다.
<body>
<nav>
<ul>
<li><a href="a1">a1</a></li>
<li><a href="a2">a2</a></li>
<li><a href="a3">a3</a></li>
<li><a href="a4">a4</a></li>
<li><a href="a5">a5</a></li>
</ul>
</nav>
</body>