1_[html]body 태그 내 구조 개념
body 태그 내 구조 개념
I. Block (텍스트) 요소
1. header 태그
ref : https://developer.mozilla.org/ko/docs/Web/HTML/Element/header
- 헤더를 만들 때 사용하는 태그
- 헤더 = 로고 + 메뉴 + 로그인 + 로그아웃 (일반적으로 들어가 있는 기능들)
소개 및 탐색에 도움을 주는 콘텐츠
- 헤더는 중첩해서 사용할 수 없고, 헤더 내부에 footer를 적어서 사용할 수 없음
-
address 태그 내부에 header 태그를 넣어서 사용할 수 없음
- 전역 속성만을 포함하고 있음
2. footer 태그
ref : https://developer.mozilla.org/ko/docs/Web/HTML/Element/footer
-
일반적으로 사이트 가장 최하단에 있는 내용으로, 사이트 저작권을 소유하고 있는 회사 혹은 저작자 등의 정보가 들어가 있음
-
footer 내부에는 footer, header 태그가 들어갈 수 없음
-
전역 속성만 포함될 수 있음
-
IE 는 IE 9버전에서 호환됨
🍑HTML5로 넘어오면서 의미를 갖는 시맨틱 태그들이 많이 등장하였는데, 이를 주의해서 적재적소해 사용해주어야 함!
3. h1 ~ h6 태그
-
hx : h1은 대주제, x값이 커질 수록 소주제
-
문서의 목차에 사용
-
h1~h6의 글자 크기를 초기화해서 그 폰트 크기를 명확하게 css에서 적용해주어야 할 필요가 있음(브라우저마다 headings에 따른 폰트크기가 다르게 지정되어 있기 때문)
-
일반적으로 h1 태그부터 시작해서 순차적으로 작성해주자! 그 이유는 검색 엔진에서 인지하는 문제가 있을 수 있기 때문!( ➡️ h1 다음에는 h3이 나오면 안됨!)
-
h1은 두 번 이상 나오지 않도록 하기!
➡️ 이런 경우, h2 부터의 하위 headings를 여러번 이용해서 작성해주자[mdn nesting 부분과 관련된 부분]
[일반적으로 h3, h4 수준까지만 사용하게 될 것]
- 구획을 나타낼 수 있는 div 태그나 nav 태그, footer 태그의 내부에 headings 태그를 넣어서 사용할 수도 있음
4. main 태그
-
body의 주요 컨텐츠를 나타냄
-
문서의 핵심 주제에 해당되는 부분을 담기에 적절
-
문서에서 1개만 존재해야 함!
-
IE에서는 사용할 수 없음
-
블럭 요소
5. article 태그
-
독립적으로 구분되거나 재사용 가능한 영역을 설정
-
예) 매거진/신문 기사, 블로그 등
- 일반적으로 headings 태그를 포함하여 식별
- 작성일자, 시간을 time 태그의 datetime 속성으로 작성[해당 요소에 대해서 웹 사이트가 어떤 시간을 의미하는지 해석하게 됨! 육안으로는 차이가 보이지 않음]
<!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>
<main>
keyPoint
</main>
<article class="forecast">
<h1>forecasst</h1>
<article class="day-forecast">
<h2>March 2018</h2>
</article>
<article class="day-forecast">
<h2>March 2018</h2>
<p>Periods of rain</p>
</article>
<article class="day-forecast">
<p>
posted on <time datetime="2021-04-27 1:21">March 2018</time> by js
</p>
</article>
</article>
</body>
</html>
6. section 태그
-
문서의 일반적인 영역을 설정
-
일반적으로 headings 요소를 포함하여 식별
-
section 내부에는 article 요소가 들어갈 수 있음
-
article 내부에도 section 요소가 들어갈 수 있음
-
div 와의 차이점 : section은 제목을 포함시킴으로써 의미를 포함
<section>
<h1>Introduction</h1>
<article>
<h2>Intro</h2>
<p>Hi!</p>
</article>
</section>
7. aside 태그
- 문서 오른쪽에 들어가는 광고배너와 같이 별도 컨텐츠를 다루는 영역
HTML 문서의 화면 구성
8. nav 태그(navigation)
-
다른 페이지 링크를 제공하는 영역
-
헤더 내부에 들어가는 메뉴나 contact, about 등이 포함된 태그
-
ol, ul 태그가 많이 포함됨
-
nav 태그가 반드시 header 태그 내부에 있을 필요는 없음!
⚠️ “영역을 차지” ➡️ 블록요소!
<!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>
<link rel="stylesheet" href="./elements.css">
</head>
<body>
<header>
<nav class="clearfix">
<ul>
<li>Shorts</li>
<li>Designers</li>
<li>Teams</li>
<li>Community</li>
<li>Jobs</li>
<li>Hiring</li>
</ul>
</nav>
</header>
</body>
</html>
9. address 태그
-
body, article, footer 태그 등에서 연락처 정보를 제공하기 위하여 포함하여 사용(주소, 이메일, 전화번호)
-
address 태그 내부에 1 개 이상의 연락처 지정 가능
— 예제 from mdn —
<section>
<article>
<p>Contact the author of this page:</p>
<address>
<a href="**mailto:**jim@rock.com">jim@rock.com</a><br>
<a href="**tel:**+13115552368">(311) 555-2368</a>
</address>
</article>
</section>
10. div 태그
-
본질적으로 아무것도 나타내지 않는 컨텐츠 영역을 설정
-
레이아웃을 설계하려고 할 때 사용됨
⚠️ 잠깐! Emmet 기능 ⚠️
- 묶어서 상위 컨테이너 요소가 필요하다면 , vs code에서는 블록을 잡고
ctrl + shift +P 를 누르기 ➡️ 컨테이너 요소 태그명(예: main태그로 묶고 싶으면 main 입력)
⚠️ 잠깐! 단축키 기능 ⚠️
- 처음에 Beautify 단축키로 설정한 키를 누르면 들여쓰기가 예쁘게 잘 됨!
(저는 Ctrl + Alt + L 로 설정해두었습니다)
HTML5 시멘틱 구조
지금까지 학습한 태그에 대한 내용을 기반으로, 위에서 짧게 언급한
브라우저 내부에서 화면의 구조인 시멘틱(semantic) 구조를 구성해보자
- 시멘틱 구조에 사용되는 header, nav, article, section , footer 태그와 같이 의미를 부여하는 태그를 시멘틱 태그!
<!DOCTYPE html>
<html lang="ko">
<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>
<link rel="stylesheet" href="./mains.css">
</head>
<body>
<header>
<nav>
<ul>
<li>nav1</li>
<li>nav2</li>
<li>nav3</li>
</ul>
</nav>
</header>
<main>
<section>
<h1>Section</h1>
<article>
<h2>Article1</h2>
<p>Contents...</p>
</article>
<article>
<h2>Article2</h2>
<p>Contents2...</p>
</article>
<article>
<h2>Article3</h2>
<p>Contents3...</p>
</article>
</section>
<aside>
Aside
</aside>
</main><!--한 라인에 묶어서 보이기 위함!-->
<footer>
<address>
<a href="mailto:123@123.com">123@123.com
</a>
<a href="tel:+821012345678">010-1234-5678</a>
</address>
</footer>
</body>
</html>
header{
background :yellowgreen;
margin: 10px;
padding: 20px;
}
header nav{
}
header nav ul{
display:flex;/*요소들이 수평으로 정리될 것*/
}
header nav ul li{
list-style: none;/*list item style 적용x*/
margin: 10px;
}
/*section에 대해서 main이 부모요소이기 때문에
section 윗부분에 작성하기*/
main{
display:flex;
}
section{
width: 70%;
background: tomato;
padding:10px;
box-sizing: border-box;
}
section h1{
}
article{
background: green;
margin-bottom: 10px;
padding:10px;
}
article h2{
}
article p{
}
aside{
width:30%;
background: tomato;
margin:10px;
padding:20px;
box-sizing: border-box;
}
footer{
background:tomato;
margin:10px;
padding:20px;
}
footer address{
}
address a{
display:block;
}
css 스타일링을 통해서 각 부분을 표시해본다면, 아래와 같이 표시될 수 있다
11. 문자 컨텐츠 태그 - ol, ul, li 태그
- 각 항목(li 태그)에 대해서
➡️ 순서가 정렬된 목록이면 ol 태그 ➡️ ➡️ol 의 항목 순서는 중요도를 의미할 수 있음
➡️ 순서가 정렬되지 않은 목록이면 ol 태그
- ol 태그와 ul 태그는 자식으로 li 태그만 포함 가능
-
li 태그는 단독적으로 사용될 수 없음
- ol, ul은 블록요소
ol, ul{display:block;}
- li는 블록, 인라인 요소 개념이 아님! 하지만, 블록 요소에 감싸져 있기 때문에, 블록 레벨에서 사용되는 요소라고 말할 수도 있음!(이해상)
li{display:list-item;}
- 목록 내부에 목록을 삽입하여 작성해줄 수 있고, 그렇게 되면 들여쓰기가 자동으로 완성됨!
-ol 내에 ul을 넣어도 좋고, ul 내에 ol을 넣어도 좋음!
<!DOCTYPE html>
<html lang="ko">
<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>
</head>
<body>
<div class="li-ex">
<ul>
<li>
Apple
<ul>
<li>Apple</li>
<li>Banana</li>
<li>Mango</li>
</ul>
</li>
<li>Banana</li>
<li>Mango</li>
</ul>
</div>
</body>
</html>
- ol 태그 속성
- type : 항목에 매겨지는 번호의 유형(기본값: 1) - 그 외에 a, A, i, I 존재
- reversed : 항목을 역순으로 성정 - IE 지원 불가
<ol type="a" reversed>
<li>Apple</li>
<li>Banana</li>
<li>Mango</li>
</ol>
- start : 항목에 매겨지는 번호의 시작값 (해당 속성에 대한 값 = 숫자 ➡️ type=1일때 적용될 수 있음)
*reversed와 start를 섞은 경우를 잘 보면, 중요한 점을 확인할 수 있는데,
start로 시작해서 1씩 번호가 줄어듦을 확인할 수 있다!
<!DOCTYPE html>
<html lang="ko">
<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>
</head>
<body>
<div class="li-ex">
<ul>
<li>
Apple
<ol type="1" start="6" reversed="reversed">
<li>Apple</li>
<li>Banana</li>
<li>Mango</li>
</ol>
</li>
<li>Banana</li>
<li>Mango</li>
</ul>
</div>
</body>
</html>
reversed 속성은 위에서처럼, [1] reversed = “reversed”
로도 사용할 수 있지만
[2] reversed
로도 사용이 가능하다![Boolean ( 불린 ) 형식]
- li 태그의 속성
-value : 항목의 순서를 설정 ( 값 : 숫자 )
<!DOCTYPE html>
<html lang="ko">
<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>
</head>
<body>
<div class="li-ex">
<ol>
<li value="7">
Apple
<ul>
<li>Apple</li>
<li>Banana</li>
<li>Mango</li>
</ul>
</li>
<li value="99">Banana</li>
<li value ="103">Mango</li>
</ol>
</div>
</body>
</html>
위의 그림과 코드를 같이 보면서 매치해보자
먼저 첫번째 li에서 value=”7”로 설정해두고, 그 이후는 value 값을 주지 않는다면,
그림에서 1로 표시한 것과 같이 Apple 에 해당되는 부분 이후에 나오는 Banana나 Mango 아이템에서는 8, 9가 나온다.
비슷한 개념으로, 이번에는 Banana 아이템에 value = “99”를 넣어주면, Mango에는 100이 넘버링된다(그림의 2)
최종으로, 세 아이템 모두 각각 7, 99, 103을 넣어주면 위의 그림처럼 넘버링되어 보인다
- 일반적으로 ul 태그가 ol 태그보다 더 많이 사용되는 편
12. 용어에 대한 태그- dl, dt, dd 태그
- dt 태그: 용어
- dd 태그 : 용어에 대한 정의(설명)
- dl 태그 : (dt, dd 태그) 쌍들의 영역
- key, value 형태를 표시할 때 유용
- dl 태그 내부에는 dt, dd 태그만을 포함해야 함
➡️ 다른 태그가 올 수 없어서 dl 태그 내부의 용어별 스타일링이 어려움
➡️ 이를 스타일링하기 용이하게 하기 위해서 ul 태그로 묶고, 용어를 의미하는 dfn 태그와 문단을 의미하는 p 태그로 설명을 대체하여 많이 사용!(a)
- 블럭 요소
dl, dt, dd{display: block;}
<!DOCTYPE html>
<html lang="ko">
<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>
</head>
<body>
<div class="def_ex">
<dl>
<dt>Coffee</dt>
<dd>Coffee and Donut!</dd>
<dt>Chocolate</dt>
<dd>Yummy!</dd>
</dl>
</div>
</body>
</html>
dt, dd, dl 태그
- 앞서 설명된 것처럼, a 와 같이 사용하는 것은 아래와 같다
<!DOCTYPE html>
<html lang="ko">
<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>
</head>
<body>
<div class="def_ex">
<dl>
<dt>Coffee</dt>
<dd>Coffee and Donut!</dd>
<dt>Chocolate</dt>
<dd>Yummy!</dd>
</dl>
<ul>
<li>
<dfn>Coffee</dfn>
<p>Coffee and Donut!<</p>
</li>
<li>
<dfn>Chocolate</dfn>
<p>Yummy!</p>
</li>
</ul>
</div>
</body>
</html>
13. p 태그 <p> </p>
- 하나의 문단을 설정(paragraph)
- 문단, 문장 구성 시 사용
- 웹 접근성을 위한 정보통신보조기기 등에서 사용성을 증대시켜줄 수 있음
- p 태그에서는 작성된 에디터 등 환경에서 줄바꿈을 해주어도, 실질적으로 개행되지 않고, space 한칸처럼 처리됨(공백 여러칸도 무조건 1칸으로 처리됨)[pre 태그와 비교]
- 행 별로 묶고 싶은데, p 태그를 고집하고 싶다면, br 태그나 블록 레벨 요소로 묶어주면 가능
p{display: block;}
14. hr 태그 <hr/>
- 수평선을 만듦
- 주제에 의한 문단의 분리를 위해 설정(의미적 관점으로만 사용해야 함)
- css 의 border 속성으로 스타일링 적용, 변경 가능
- 상하좌우에 선이 있는 형태! ➡️ 따라서, 실질적으로 우리가 2px로 지정하면 4px 두께의 선이 적용된 것!(b)
hr{display:block;}
- 위에서 말한 b에 대해서 우리가 한줄로만 나타내기 위해서는 css 파일에서 아래와 같이 작성해준다면 더이상 4px 이 아닌 진짜 2px 두께의 선을 사용할 수 있다!
hr{
/* border: none;none선을 사용하지 않겠다*/
border:none;
/*
기본적으로는 2px로 해두어도 상하좌우로 존재해서
4px두께임!
border의 한줄에만 넣기
*/
border-top:2px dashed salmon;
}
15. pre 태그
- Preformatted Text
- 서식이 미리 지정된 텍스트를 설정하는 것
- 텍스트의 공백과 개행을 유지하여 표시 가능[ ➡️이것이 바로 그 “서식”! 입력한 그대로 보여주기!]
- 기본적으로 Monospace 글꼴 계열로 표시됨
- 모든 글자의 가로 너비가 x인 글꼴이 바로 Monospace 글꼴 계열![ ➡️ 이런 점에서 vscode 등에서 사용하는 폰트등도 해당됨을 확인할 수 있음!(코드에서 이동하기 쉬움)]
pre{display: block;}
- 이러한 pre 태그의 특성 상, 가독성을 위한 들여쓰기도 인식되기 때문에, 문단의 시작과 끝과 태그 사이의 공백을 없앤 아래와 같은 형태로 많이 사용한다
<div class="preFormat">
**<pre>Lorem** ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
magna
aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Excepteur
sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum**.</pre>**
</div>
- 블로그나 커뮤니티 등에서 글을 입력한 내용이 DB에 저장되었다가 출력될 경우에 활용될 수 있음(다른 방식도 존재)
16. blockquote 태그
-
일반적인 인용문을 설정(Block Quotation)
-
속성 : cite- 인용된 정보의 URL[값: URL]
<div class="refer">
<blockquote cite="https://baconipsum.com/?paras=5&type=all-meat&start-with-lorem=1">
Bacon ipsum dolor amet turducken burgdoggen tri-tip tenderloin shankle bacon. Flank short ribs burgdoggen chislic shoulder tenderloin, doner shank cupim rump salami. Shankle swine turkey alcatra chuck kevin. Chuck hamburger tongue andouille flank.
</blockquote>
</div>
II. 인라인 텍스트 요소
1. a 태그
ref: https://developer.mozilla.org/ko/docs/Web/HTML/Element/a
- 하이퍼링크를 설정
- anchor
- 현재 문서에서 외부 문서로 이동할 때 사용
- 현재 문서 내에서 위치를 이동할 때 사용(#id)
⚠️ a 태그 속성 중 집중해서 볼 필요가 있는 속성 ⚠️
- href : 링크 URL 혹은 페이지 내에서 이동할 위치에서의 id(#id) (1) 속성에 대한 값 : URL (2) 필수처럼 사용해야 함[생략은 가능하지만!]
- rel : 현재 문서와 링크 URL 간의 관계 (rel 속성의 값 - https://developer.mozilla.org/ko/docs/Web/HTML/Link_types) (1) license : 다음 페이지로 이동될 때 , 다음 페이지가 license에 대한 페이지 (2) prev (3) next
- target : 링크 URL의 표시(브라우저 탭) 위치 (1) _self: 현재 보여지는 페이지에 표시 ‼️ 기본값‼️ (2) _ blank : 새 탭에서 열기
*type 속성은, 대부분 브라우저에서 로딩될 때 해석되므로 통상적으로, 생략하고는 함(통상적으로 text/html값을 넣음-MIME Type 과 관련)
*download 속성은 파일을 다운로드할 것인지를 담음 -boolean 타입으로 작성하여 값을 작성하지 않고 download 까지 작성해주어도 됨!
-download 속성이 없는 경우, 해당 파일을 href를 통해서 로딩하게 됨!
a{ display: inline;}
- a 태그는 버튼처럼 사용할 수도 있음!
-그러려면, display를 block으로 바꾸어 사용해야!
<!DOCTYPE html>
<html lang="ko">
<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>anchor tag</title>
<link rel="stylesheet" href="./style.css">
</head>
<body>
<header>목차</header>
<section>
<article>
<!--target prop-->
<a href="https://www.google.com" target="_blank">Google</a>
<!--download prop-->
<a href="./README.md" download="download">다운로드할 파일 README.md</a>
<a href="./README.md" download>다운로드할 파일 README.md</a>
<!--image download using download prop-->
<a href="./img/test_img.jpg" download>Img download</a>
<!--a tag as button-->
<a class="btn" href="https://www.naver.com" target="_blank">Naver</a>
<hr>
<!--move in same page-->
<div class="lists">
<ul>
<li><a href="#link1">제목1</a></li>
<li><a href="#link2">제목2</a></li>
<li><a href="#link3">제목3</a></li>
</ul>
</div>
<hr>
<div class="move">
<div class="pt1">
<h2 id="link1">제목1</h2>
<pre>Bacon ipsum dolor amet short ribs porchetta jowl andouille pastrami meatball. Andouille fatback brisket, prosciutto filet mignon kielbasa bacon shank jerky tongue short loin sausage. Tenderloin t-bone sausage kielbasa filet mignon flank beef tail pork loin alcatra. Spare ribs pancetta swine chislic porchetta t-bone turducken beef pastrami pork loin shoulder corned beef ball tip.
Short ribs venison chuck porchetta cupim, spare ribs chicken buffalo pancetta prosciutto cow ham hock. Biltong tail chicken kevin flank. Ball tip ribeye boudin rump corned beef sirloin. Alcatra turkey porchetta, biltong t-bone beef boudin hamburger ball tip fatback kevin. Rump ham cow fatback jowl capicola landjaeger jerky short loin short ribs turducken. Salami cow ham hock buffalo bacon brisket. Jowl chicken pork chop biltong jerky short loin rump corned beef landjaeger swine cow frankfurter.
Corned beef pork belly ribeye, turducken chuck drumstick filet mignon sausage salami. Tongue burgdoggen meatball shankle picanha cow. Cupim ribeye capicola ham hock. Shankle shoulder landjaeger, hamburger pork chop capicola kielbasa tenderloin ball tip. Sirloin tongue fatback tail pancetta t-bone. Hamburger turducken capicola picanha ham ribeye, bacon brisket beef ribs pork belly rump leberkas tongue tenderloin meatloaf. Pork belly sausage ham hock, tenderloin jerky meatball turkey andouille brisket sirloin cow pork chop chislic salami bacon.
Ribeye kielbasa meatball, ham hock meatloaf leberkas tongue. Tail short loin spare ribs pork loin tri-tip beef ribs salami prosciutto bresaola brisket shank chislic short ribs leberkas landjaeger. Sausage strip steak beef ribs doner short ribs cow ham hock kielbasa rump biltong frankfurter shoulder kevin bresaola. Shankle andouille biltong strip steak chicken. Pork loin pancetta jowl alcatra kevin landjaeger shoulder bacon corned beef. Leberkas rump short loin drumstick pork belly turkey meatball shoulder filet mignon strip steak beef corned beef. Filet mignon pork shankle buffalo, kielbasa landjaeger t-bone jowl boudin tri-tip salami ball tip tongue cow tail.
Pork chop meatball swine, corned beef pork bresaola bacon capicola. Salami jerky cupim swine sausage. Short ribs chislic ball tip, t-bone shank hamburger pork chop jowl. Picanha hamburger chislic jerky brisket pork chop buffalo pork beef ribs chicken pig filet mignon. Cupim ham hock capicola andouille, pancetta t-bone pastrami sirloin. Frankfurter landjaeger alcatra doner pastrami chuck venison fatback sausage filet mignon shoulder ham strip steak pancetta.
Does your lorem ipsum text long for something a little meatier? Give our generator a try… it’s tasty!</pre>
</div>
<div class="pt2">
<h2 id="link2">제목2</h2>
<pre>Bacon ipsum dolor amet short ribs porchetta jowl andouille pastrami meatball. Andouille fatback brisket, prosciutto filet mignon kielbasa bacon shank jerky tongue short loin sausage. Tenderloin t-bone sausage kielbasa filet mignon flank beef tail pork loin alcatra. Spare ribs pancetta swine chislic porchetta t-bone turducken beef pastrami pork loin shoulder corned beef ball tip.
Short ribs venison chuck porchetta cupim, spare ribs chicken buffalo pancetta prosciutto cow ham hock. Biltong tail chicken kevin flank. Ball tip ribeye boudin rump corned beef sirloin. Alcatra turkey porchetta, biltong t-bone beef boudin hamburger ball tip fatback kevin. Rump ham cow fatback jowl capicola landjaeger jerky short loin short ribs turducken. Salami cow ham hock buffalo bacon brisket. Jowl chicken pork chop biltong jerky short loin rump corned beef landjaeger swine cow frankfurter.
Corned beef pork belly ribeye, turducken chuck drumstick filet mignon sausage salami. Tongue burgdoggen meatball shankle picanha cow. Cupim ribeye capicola ham hock. Shankle shoulder landjaeger, hamburger pork chop capicola kielbasa tenderloin ball tip. Sirloin tongue fatback tail pancetta t-bone. Hamburger turducken capicola picanha ham ribeye, bacon brisket beef ribs pork belly rump leberkas tongue tenderloin meatloaf. Pork belly sausage ham hock, tenderloin jerky meatball turkey andouille brisket sirloin cow pork chop chislic salami bacon.
Ribeye kielbasa meatball, ham hock meatloaf leberkas tongue. Tail short loin spare ribs pork loin tri-tip beef ribs salami prosciutto bresaola brisket shank chislic short ribs leberkas landjaeger. Sausage strip steak beef ribs doner short ribs cow ham hock kielbasa rump biltong frankfurter shoulder kevin bresaola. Shankle andouille biltong strip steak chicken. Pork loin pancetta jowl alcatra kevin landjaeger shoulder bacon corned beef. Leberkas rump short loin drumstick pork belly turkey meatball shoulder filet mignon strip steak beef corned beef. Filet mignon pork shankle buffalo, kielbasa landjaeger t-bone jowl boudin tri-tip salami ball tip tongue cow tail.
Pork chop meatball swine, corned beef pork bresaola bacon capicola. Salami jerky cupim swine sausage. Short ribs chislic ball tip, t-bone shank hamburger pork chop jowl. Picanha hamburger chislic jerky brisket pork chop buffalo pork beef ribs chicken pig filet mignon. Cupim ham hock capicola andouille, pancetta t-bone pastrami sirloin. Frankfurter landjaeger alcatra doner pastrami chuck venison fatback sausage filet mignon shoulder ham strip steak pancetta.
Does your lorem ipsum text long for something a little meatier? Give our generator a try… it’s tasty!</pre>
</div>
<div class="pt3">
<h2 id="link3">제목3</h2>
<pre>Bacon ipsum dolor amet short ribs porchetta jowl andouille pastrami meatball. Andouille fatback brisket, prosciutto filet mignon kielbasa bacon shank jerky tongue short loin sausage. Tenderloin t-bone sausage kielbasa filet mignon flank beef tail pork loin alcatra. Spare ribs pancetta swine chislic porchetta t-bone turducken beef pastrami pork loin shoulder corned beef ball tip.
Short ribs venison chuck porchetta cupim, spare ribs chicken buffalo pancetta prosciutto cow ham hock. Biltong tail chicken kevin flank. Ball tip ribeye boudin rump corned beef sirloin. Alcatra turkey porchetta, biltong t-bone beef boudin hamburger ball tip fatback kevin. Rump ham cow fatback jowl capicola landjaeger jerky short loin short ribs turducken. Salami cow ham hock buffalo bacon brisket. Jowl chicken pork chop biltong jerky short loin rump corned beef landjaeger swine cow frankfurter.
Corned beef pork belly ribeye, turducken chuck drumstick filet mignon sausage salami. Tongue burgdoggen meatball shankle picanha cow. Cupim ribeye capicola ham hock. Shankle shoulder landjaeger, hamburger pork chop capicola kielbasa tenderloin ball tip. Sirloin tongue fatback tail pancetta t-bone. Hamburger turducken capicola picanha ham ribeye, bacon brisket beef ribs pork belly rump leberkas tongue tenderloin meatloaf. Pork belly sausage ham hock, tenderloin jerky meatball turkey andouille brisket sirloin cow pork chop chislic salami bacon.
Ribeye kielbasa meatball, ham hock meatloaf leberkas tongue. Tail short loin spare ribs pork loin tri-tip beef ribs salami prosciutto bresaola brisket shank chislic short ribs leberkas landjaeger. Sausage strip steak beef ribs doner short ribs cow ham hock kielbasa rump biltong frankfurter shoulder kevin bresaola. Shankle andouille biltong strip steak chicken. Pork loin pancetta jowl alcatra kevin landjaeger shoulder bacon corned beef. Leberkas rump short loin drumstick pork belly turkey meatball shoulder filet mignon strip steak beef corned beef. Filet mignon pork shankle buffalo, kielbasa landjaeger t-bone jowl boudin tri-tip salami ball tip tongue cow tail.
Pork chop meatball swine, corned beef pork bresaola bacon capicola. Salami jerky cupim swine sausage. Short ribs chislic ball tip, t-bone shank hamburger pork chop jowl. Picanha hamburger chislic jerky brisket pork chop buffalo pork beef ribs chicken pig filet mignon. Cupim ham hock capicola andouille, pancetta t-bone pastrami sirloin. Frankfurter landjaeger alcatra doner pastrami chuck venison fatback sausage filet mignon shoulder ham strip steak pancetta.
Does your lorem ipsum text long for something a little meatier? Give our generator a try… it’s tasty!Bacon ipsum dolor amet short ribs porchetta jowl andouille pastrami meatball. Andouille fatback brisket, prosciutto filet mignon kielbasa bacon shank jerky tongue short loin sausage. Tenderloin t-bone sausage kielbasa filet mignon flank beef tail pork loin alcatra. Spare ribs pancetta swine chislic porchetta t-bone turducken beef pastrami pork loin shoulder corned beef ball tip.
Short ribs venison chuck porchetta cupim, spare ribs chicken buffalo pancetta prosciutto cow ham hock. Biltong tail chicken kevin flank. Ball tip ribeye boudin rump corned beef sirloin. Alcatra turkey porchetta, biltong t-bone beef boudin hamburger ball tip fatback kevin. Rump ham cow fatback jowl capicola landjaeger jerky short loin short ribs turducken. Salami cow ham hock buffalo bacon brisket. Jowl chicken pork chop biltong jerky short loin rump corned beef landjaeger swine cow frankfurter.
Corned beef pork belly ribeye, turducken chuck drumstick filet mignon sausage salami. Tongue burgdoggen meatball shankle picanha cow. Cupim ribeye capicola ham hock. Shankle shoulder landjaeger, hamburger pork chop capicola kielbasa tenderloin ball tip. Sirloin tongue fatback tail pancetta t-bone. Hamburger turducken capicola picanha ham ribeye, bacon brisket beef ribs pork belly rump leberkas tongue tenderloin meatloaf. Pork belly sausage ham hock, tenderloin jerky meatball turkey andouille brisket sirloin cow pork chop chislic salami bacon.
Ribeye kielbasa meatball, ham hock meatloaf leberkas tongue. Tail short loin spare ribs pork loin tri-tip beef ribs salami prosciutto bresaola brisket shank chislic short ribs leberkas landjaeger. Sausage strip steak beef ribs doner short ribs cow ham hock kielbasa rump biltong frankfurter shoulder kevin bresaola. Shankle andouille biltong strip steak chicken. Pork loin pancetta jowl alcatra kevin landjaeger shoulder bacon corned beef. Leberkas rump short loin drumstick pork belly turkey meatball shoulder filet mignon strip steak beef corned beef. Filet mignon pork shankle buffalo, kielbasa landjaeger t-bone jowl boudin tri-tip salami ball tip tongue cow tail.
Pork chop meatball swine, corned beef pork bresaola bacon capicola. Salami jerky cupim swine sausage. Short ribs chislic ball tip, t-bone shank hamburger pork chop jowl. Picanha hamburger chislic jerky brisket pork chop buffalo pork beef ribs chicken pig filet mignon. Cupim ham hock capicola andouille, pancetta t-bone pastrami sirloin. Frankfurter landjaeger alcatra doner pastrami chuck venison fatback sausage filet mignon shoulder ham strip steak pancetta.
Does your lorem ipsum text long for something a little meatier? Give our generator a try… it’s tasty!Bacon ipsum dolor amet short ribs porchetta jowl andouille pastrami meatball. Andouille fatback brisket, prosciutto filet mignon kielbasa bacon shank jerky tongue short loin sausage. Tenderloin t-bone sausage kielbasa filet mignon flank beef tail pork loin alcatra. Spare ribs pancetta swine chislic porchetta t-bone turducken beef pastrami pork loin shoulder corned beef ball tip.
Short ribs venison chuck porchetta cupim, spare ribs chicken buffalo pancetta prosciutto cow ham hock. Biltong tail chicken kevin flank. Ball tip ribeye boudin rump corned beef sirloin. Alcatra turkey porchetta, biltong t-bone beef boudin hamburger ball tip fatback kevin. Rump ham cow fatback jowl capicola landjaeger jerky short loin short ribs turducken. Salami cow ham hock buffalo bacon brisket. Jowl chicken pork chop biltong jerky short loin rump corned beef landjaeger swine cow frankfurter.
Corned beef pork belly ribeye, turducken chuck drumstick filet mignon sausage salami. Tongue burgdoggen meatball shankle picanha cow. Cupim ribeye capicola ham hock. Shankle shoulder landjaeger, hamburger pork chop capicola kielbasa tenderloin ball tip. Sirloin tongue fatback tail pancetta t-bone. Hamburger turducken capicola picanha ham ribeye, bacon brisket beef ribs pork belly rump leberkas tongue tenderloin meatloaf. Pork belly sausage ham hock, tenderloin jerky meatball turkey andouille brisket sirloin cow pork chop chislic salami bacon.
Ribeye kielbasa meatball, ham hock meatloaf leberkas tongue. Tail short loin spare ribs pork loin tri-tip beef ribs salami prosciutto bresaola brisket shank chislic short ribs leberkas landjaeger. Sausage strip steak beef ribs doner short ribs cow ham hock kielbasa rump biltong frankfurter shoulder kevin bresaola. Shankle andouille biltong strip steak chicken. Pork loin pancetta jowl alcatra kevin landjaeger shoulder bacon corned beef. Leberkas rump short loin drumstick pork belly turkey meatball shoulder filet mignon strip steak beef corned beef. Filet mignon pork shankle buffalo, kielbasa landjaeger t-bone jowl boudin tri-tip salami ball tip tongue cow tail.
Pork chop meatball swine, corned beef pork bresaola bacon capicola. Salami jerky cupim swine sausage. Short ribs chislic ball tip, t-bone shank hamburger pork chop jowl. Picanha hamburger chislic jerky brisket pork chop buffalo pork beef ribs chicken pig filet mignon. Cupim ham hock capicola andouille, pancetta t-bone pastrami sirloin. Frankfurter landjaeger alcatra doner pastrami chuck venison fatback sausage filet mignon shoulder ham strip steak pancetta.
Does your lorem ipsum text long for something a little meatier? Give our generator a try… it’s tasty!Bacon ipsum dolor amet short ribs porchetta jowl andouille pastrami meatball. Andouille fatback brisket, prosciutto filet mignon kielbasa bacon shank jerky tongue short loin sausage. Tenderloin t-bone sausage kielbasa filet mignon flank beef tail pork loin alcatra. Spare ribs pancetta swine chislic porchetta t-bone turducken beef pastrami pork loin shoulder corned beef ball tip.
Short ribs venison chuck porchetta cupim, spare ribs chicken buffalo pancetta prosciutto cow ham hock. Biltong tail chicken kevin flank. Ball tip ribeye boudin rump corned beef sirloin. Alcatra turkey porchetta, biltong t-bone beef boudin hamburger ball tip fatback kevin. Rump ham cow fatback jowl capicola landjaeger jerky short loin short ribs turducken. Salami cow ham hock buffalo bacon brisket. Jowl chicken pork chop biltong jerky short loin rump corned beef landjaeger swine cow frankfurter.
Corned beef pork belly ribeye, turducken chuck drumstick filet mignon sausage salami. Tongue burgdoggen meatball shankle picanha cow. Cupim ribeye capicola ham hock. Shankle shoulder landjaeger, hamburger pork chop capicola kielbasa tenderloin ball tip. Sirloin tongue fatback tail pancetta t-bone. Hamburger turducken capicola picanha ham ribeye, bacon brisket beef ribs pork belly rump leberkas tongue tenderloin meatloaf. Pork belly sausage ham hock, tenderloin jerky meatball turkey andouille brisket sirloin cow pork chop chislic salami bacon.
Ribeye kielbasa meatball, ham hock meatloaf leberkas tongue. Tail short loin spare ribs pork loin tri-tip beef ribs salami prosciutto bresaola brisket shank chislic short ribs leberkas landjaeger. Sausage strip steak beef ribs doner short ribs cow ham hock kielbasa rump biltong frankfurter shoulder kevin bresaola. Shankle andouille biltong strip steak chicken. Pork loin pancetta jowl alcatra kevin landjaeger shoulder bacon corned beef. Leberkas rump short loin drumstick pork belly turkey meatball shoulder filet mignon strip steak beef corned beef. Filet mignon pork shankle buffalo, kielbasa landjaeger t-bone jowl boudin tri-tip salami ball tip tongue cow tail.
Pork chop meatball swine, corned beef pork bresaola bacon capicola. Salami jerky cupim swine sausage. Short ribs chislic ball tip, t-bone shank hamburger pork chop jowl. Picanha hamburger chislic jerky brisket pork chop buffalo pork beef ribs chicken pig filet mignon. Cupim ham hock capicola andouille, pancetta t-bone pastrami sirloin. Frankfurter landjaeger alcatra doner pastrami chuck venison fatback sausage filet mignon shoulder ham strip steak pancetta.
Does your lorem ipsum text long for something a little meatier? Give our generator a try… it’s tasty!Bacon ipsum dolor amet short ribs porchetta jowl andouille pastrami meatball. Andouille fatback brisket, prosciutto filet mignon kielbasa bacon shank jerky tongue short loin sausage. Tenderloin t-bone sausage kielbasa filet mignon flank beef tail pork loin alcatra. Spare ribs pancetta swine chislic porchetta t-bone turducken beef pastrami pork loin shoulder corned beef ball tip.
Short ribs venison chuck porchetta cupim, spare ribs chicken buffalo pancetta prosciutto cow ham hock. Biltong tail chicken kevin flank. Ball tip ribeye boudin rump corned beef sirloin. Alcatra turkey porchetta, biltong t-bone beef boudin hamburger ball tip fatback kevin. Rump ham cow fatback jowl capicola landjaeger jerky short loin short ribs turducken. Salami cow ham hock buffalo bacon brisket. Jowl chicken pork chop biltong jerky short loin rump corned beef landjaeger swine cow frankfurter.
Corned beef pork belly ribeye, turducken chuck drumstick filet mignon sausage salami. Tongue burgdoggen meatball shankle picanha cow. Cupim ribeye capicola ham hock. Shankle shoulder landjaeger, hamburger pork chop capicola kielbasa tenderloin ball tip. Sirloin tongue fatback tail pancetta t-bone. Hamburger turducken capicola picanha ham ribeye, bacon brisket beef ribs pork belly rump leberkas tongue tenderloin meatloaf. Pork belly sausage ham hock, tenderloin jerky meatball turkey andouille brisket sirloin cow pork chop chislic salami bacon.
Ribeye kielbasa meatball, ham hock meatloaf leberkas tongue. Tail short loin spare ribs pork loin tri-tip beef ribs salami prosciutto bresaola brisket shank chislic short ribs leberkas landjaeger. Sausage strip steak beef ribs doner short ribs cow ham hock kielbasa rump biltong frankfurter shoulder kevin bresaola. Shankle andouille biltong strip steak chicken. Pork loin pancetta jowl alcatra kevin landjaeger shoulder bacon corned beef. Leberkas rump short loin drumstick pork belly turkey meatball shoulder filet mignon strip steak beef corned beef. Filet mignon pork shankle buffalo, kielbasa landjaeger t-bone jowl boudin tri-tip salami ball tip tongue cow tail.
Pork chop meatball swine, corned beef pork bresaola bacon capicola. Salami jerky cupim swine sausage. Short ribs chislic ball tip, t-bone shank hamburger pork chop jowl. Picanha hamburger chislic jerky brisket pork chop buffalo pork beef ribs chicken pig filet mignon. Cupim ham hock capicola andouille, pancetta t-bone pastrami sirloin. Frankfurter landjaeger alcatra doner pastrami chuck venison fatback sausage filet mignon shoulder ham strip steak pancetta.
Does your lorem ipsum text long for something a little meatier? Give our generator a try… it’s tasty!Bacon ipsum dolor amet short ribs porchetta jowl andouille pastrami meatball. Andouille fatback brisket, prosciutto filet mignon kielbasa bacon shank jerky tongue short loin sausage. Tenderloin t-bone sausage kielbasa filet mignon flank beef tail pork loin alcatra. Spare ribs pancetta swine chislic porchetta t-bone turducken beef pastrami pork loin shoulder corned beef ball tip.
Short ribs venison chuck porchetta cupim, spare ribs chicken buffalo pancetta prosciutto cow ham hock. Biltong tail chicken kevin flank. Ball tip ribeye boudin rump corned beef sirloin. Alcatra turkey porchetta, biltong t-bone beef boudin hamburger ball tip fatback kevin. Rump ham cow fatback jowl capicola landjaeger jerky short loin short ribs turducken. Salami cow ham hock buffalo bacon brisket. Jowl chicken pork chop biltong jerky short loin rump corned beef landjaeger swine cow frankfurter.
Corned beef pork belly ribeye, turducken chuck drumstick filet mignon sausage salami. Tongue burgdoggen meatball shankle picanha cow. Cupim ribeye capicola ham hock. Shankle shoulder landjaeger, hamburger pork chop capicola kielbasa tenderloin ball tip. Sirloin tongue fatback tail pancetta t-bone. Hamburger turducken capicola picanha ham ribeye, bacon brisket beef ribs pork belly rump leberkas tongue tenderloin meatloaf. Pork belly sausage ham hock, tenderloin jerky meatball turkey andouille brisket sirloin cow pork chop chislic salami bacon.
Ribeye kielbasa meatball, ham hock meatloaf leberkas tongue. Tail short loin spare ribs pork loin tri-tip beef ribs salami prosciutto bresaola brisket shank chislic short ribs leberkas landjaeger. Sausage strip steak beef ribs doner short ribs cow ham hock kielbasa rump biltong frankfurter shoulder kevin bresaola. Shankle andouille biltong strip steak chicken. Pork loin pancetta jowl alcatra kevin landjaeger shoulder bacon corned beef. Leberkas rump short loin drumstick pork belly turkey meatball shoulder filet mignon strip steak beef corned beef. Filet mignon pork shankle buffalo, kielbasa landjaeger t-bone jowl boudin tri-tip salami ball tip tongue cow tail.
Pork chop meatball swine, corned beef pork bresaola bacon capicola. Salami jerky cupim swine sausage. Short ribs chislic ball tip, t-bone shank hamburger pork chop jowl. Picanha hamburger chislic jerky brisket pork chop buffalo pork beef ribs chicken pig filet mignon. Cupim ham hock capicola andouille, pancetta t-bone pastrami sirloin. Frankfurter landjaeger alcatra doner pastrami chuck venison fatback sausage filet mignon shoulder ham strip steak pancetta.
Does your lorem ipsum text long for something a little meatier? Give our generator a try… it’s tasty!</pre>
</div>
</div>
</article>
</section>
</body>
</html>
⚠️ id, class 속성은 모두 별명, 별칭이지만!! id는 고유해야 함!⚠️
위의 예제에서 페이지 내의 이동에 대한 부분에서 link1에 해당되는 제목1을 클릭하면, 주소가 [~]#link1으로 변경, 이동되는 것을 확인해볼 수 있다
이를 이용해서 특정 위치에 대한 부분부터 볼 수 있도록 공유해줄 수 있음!
2. abbr 태그
- Abbreviation
- title 속성을 통해서 어떤 단어의 약어임을 표시해줄 수 있음
- 보통 title 속성(전역속성)을 사용하여 전체 글자나 설명을 제공
- title 속성에 적어둔 full name을 태그 사이에 존재하는 텍스트 위에 커서를 두면 아래 그림처럼 제공해줌!(뿐만 아니라, dashed 밑줄이 표시됨!)
*전역속성: 전체 영역에서 사용(적용)가능한 속성
<abbr **title="HyperText Markup Language**">**HTML**</abbr>
⚠️ 3~7 번에 해당되는 태그들은 비교하여 정리할 필요!
3. 글씨를 굵게 해주는 태그 b 태그
- 문체가 다른 글자의 범위를 설정(주의를 집중시키기 위함)
➡️ 읽기 흐름에 도움
- 특별한 의미 ❌
- 다른 태그가 적합하지 않은 경우(집중을 위한) , 최후의 보루로 사용!
아래와 같이 연습을 해보면, p 태그 특성상 공백이 구분되지 않지만,
b 태그를 통해서 범위가 나뉘어지는 것 같아 보인다
<b>1절</b>
동해 물과 백두산이 마르고 닳도록
하느님이 보우하사 우리나라 만세.
무궁화 삼천리 화려 강산
대한 사람, 대한으로 길이 보전하세.
<b>2절</b>
남산 위에 저 소나무, 철갑을 두른 듯
바람 서리 불변함은 우리 기상일세.
무궁화 삼천리 화려 강산
대한 사람, 대한으로 길이 보전하세.
<b>3절</b>
가을 하늘 공활한데 높고 구름 없이
밝은 달은 우리 가슴 일편단심일세.
무궁화 삼천리 화려 강산
대한 사람, 대한으로 길이 보전하세.
<b>4절</b>
이 기상과 이 맘으로 충성을 다하여
괴로우나 즐거우나 나라 사랑하세.
무궁화 삼천리 화려 강산
대한 사람, 대한으로 길이 보전하세.
</p>
b tag - 섹션이 구분되는 시각적 효과
다만, 앞서 언급했던 바와 같이 css를 변경하면 일반 글자와 동일하게 보일 수 있다!-물론 link나 style 태그로 해당 스타일시트를 연결해주어야 한다!
b{
font-weight:normal;
}
4. mark 태그
- 노란 형광펜 효과를 나타내는 태그
- 사용자의 관심을 끌기 위한 하이라이팅
- 의미 < 시각적 효과
- css로 커버가 가능하기 때문에, 꼭 사용하지 않아도 됨
mark{display:inline;}
위에서 연습했던 코드에 mark 태그를 얹어보자
<mark>동해 물과 백두산이 마르고</mark> 닳도록
하느님이 보우하사 우리나라 만세.
무궁화 삼천리 화려 강산
대한 사람, 대한으로 길이 보전하세.
<b>2절</b>
그러면, mark에 둘러싸인 부분이 노란 형광펜과 같은 효과를 보이는 것을 확인해볼 수 있다!
참고로, 연결된 스타일시트에
mark{
background:salmon;
}
를 추가한다면, 아래와 같이 형광펜 색이 변경됨을 확인해볼 수 있다!
5. em 태그
- 단순한 의미 강조(emphasis) (b, mark 태그 : 단순 범위 지정, 표시 의미가 강)
- 중첩이 가능 ➡️ 중첩이 될수록, 의미가 강해짐(브라우저나 정보통신보조기기, 검색 엔진에서 인지하는 정도가 달라짐)
- 웹 접근성을 증대시켜줌(정보통신보조기기 등에서 구두 강조됨)
- 기본적으로 이탤릭체로 표시됨(css에서 변경 가능)
em{
display:inline;
font-style: italic;/*기본설정*/
}
<em><em></em></em>
이번에는 위에서 사용한 애국가를 가져와서, em태그를 적용해보고, css의 속성 중 background를 설정해줌으로써 많은 글자 중에서 변화를 빠르게 확인하고자 하였다
<b>2절</b>
남산 위에 저 소나무, 철갑을 두른 듯
<em>바람 서리 불변함</em>은 우리 기상일세.
무궁화 삼천리 화려 강산
대한 사람, 대한으로 길이 보전하세.
em{
background:yellowgreen;
}
6. strong 태그
- 의미의 중요성(b태그와의 차이)을 나타내기 위함(em 태그는 의미를 강조)
- 기본적으로 글자가 bold 표시됨
strong{display:inline;}
동일하게 애국가를 이용해서 테스트해보자 💕
<b>3절</b>
<strong>가을 하늘</strong> 공활한데 높고 구름 없이
밝은 달은 우리 가슴 일편단심일세.
무궁화 삼천리 화려 강산
대한 사람, 대한으로 길이 보전하세.
strong{
color:teal;
}
css를 이용해서 다른 부분들과 구분해주었는데, 그 결과, 아래와 같이 bold 처리된 부분이 보인다!
7. i 태그
- em, strong, mark, cite, dfn 등에서 표현할 수 있는 적합한 의미가 아닌 경우 사용(b태그처럼 최후의 보루처럼)
- 평범한 글자와 구분(아이콘, 특수기호)하기 위해 사용
- 이탤릭체로 표시됨
i{display:inline;}
주의
외부에서 가져오는 css 라이브러리는 우리가 작성한 css 파일보다 앞에 오도록 작성해주자!
i 태그는 사실상, 아이콘을 사용, 적용하기에 적합하므로 아래와 같이 font-awesome을 이용해보자!
<!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>
<!--외부 라이브러리는 우리가 작성한 css 위치보다 앞에 와서 적용될 수 있도록!-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="./src/style.css">
</head>
<body>
<p>
<i class="fa fa-music"></i>
<b>1절</b>
<mark>동해 물과 백두산이 마르고</mark> 닳도록
하느님이 보우하사 우리나라 만세.
무궁화 삼천리 화려 강산
대한 사람, 대한으로 길이 보전하세.
<b>2절</b>
남산 위에 저 소나무, 철갑을 두른 듯
<em>바람 서리 <em>불변함</em></em>은 우리 기상일세.
무궁화 삼천리 화려 강산
대한 사람, 대한으로 길이 보전하세.
<b>3절</b>
<strong>가을 하늘</strong> 공활한데 높고 구름 없이
밝은 달은 우리 가슴 일편단심일세.
무궁화 삼천리 화려 강산
대한 사람, 대한으로 길이 보전하세.
<b>4절</b>
이 기상과 이 맘으로 충성을 다하여
괴로우나 즐거우나 나라 사랑하세.
무궁화 삼천리 화려 강산
대한 사람, 대한으로 길이 보전하세.
</p>
</body>
</html>
그러면 아래와 같이 적용이 잘 될 수 있다!
다만, 간혹 fas fa-~ 로 클래스명을 적용했을 때, 잘 되지 않는다면,
fa fa-~ 로 클래스명을 변경해보면 잘 될 수 있다!
i 태그- 아이콘
*참고로, 회색으로 표시된 아이콘은, 유료다..!(font-awesome)
8. dfn 태그 - dl, dt, dd 태그(블럭요소) 중 dt 태그를 대체할 때 사용하기 좋은 태그[dl: 용어 여러개를 정의할 수 있게 도움]
- 용어를 하나 정의할 때 사용됨
<body>
<p>
<dfn>Term</dfn>
<p>용어</p>
</p>
</body>
dfn 태그- 단어를 나타냄
9. cite 태그
- 창작물에 대한 참조를 설정(blockquote 태그의 속성과 관련되어 등장했었음)
<!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>
<cite>창작물에 대한 참조</cite>
</body>
</html>
와 같은 경우, cite로 둘러싸인 부분이 참조를 “의미“하는데,
이를 이탤릭체로 표시![시멘틱 태그!]
- headings 태그 등을 제외한 대부분의 글자 컨텐츠 태그들은 대부분 인라인요소!
10. q태그(Inline Quotation)
- 짧은 인용문을 설정
- 속성
cite=”url” : 인용된 정보의 url
- 긴 인용문은 blockquote.(Blockquote는 들여쓰기처리되고, q태그는 “” 처리됨!)
<q cite="https://www.w3schools.com/icons/">Font Awesome</q>
q 태그
11. u 태그
- 밑줄이 있는 글자를 설정(underline)
- 순수하게 꾸미는 용도로 사용
- 링크 생성으로 인한 밑줄과 혼동되지 않도록, a 태그와 혼동될 수 있는 위치에서는 사용을 삼가하기
- 아래와 같이 css 속성을 이용할 수 있는 경우, 사용을 권장하지 않음
<span style="text-decoration: underline;"></span>
12. code 태그
- 컴퓨터 코드 범위를 설정(inline code)
와 같은 기능!
- 이전에 나왔던, pre태그와 동일하게 Monospace 글꼴 계열로 표시됨
[Monospace : 글자가 고정폭을 지닌 특징이 있음!]
- 사용자 입장에서 코드임을 자각할 수 있도록 도와줌!
<code>
System.out.println("hahahaha");
</code>
code 태그
13. kbd 태그
- 텍스트 입력 장치(키보드)에서 사용자의 입력을 나타내는 텍스트 범위를 설정
- Keyboard Input
- css 및 js를 이용해서 사용자들에게 어떤 키인지를 인식하도록 도와주는 방향으로 많이 사용됨
🍑사용자에게 키보드 키를 명시해줄 수 있는 경우🍑
<!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>
<link rel="stylesheet" href="./style.css">
</head>
<body>
<p><kbd>Ctrl</kbd> + <kbd>Alt</kbd> + <kbd>K</kbd></p>,
<kbd>ESC</kbd>
</body>
</html>
kbd{
padding:0 3px;
border-radius: 3px;
border-top: 2px solid teal;
border-bottom: 2px solid salmon;
border-left: 2px solid yellowgreen;
border-right: 2px solid blueviolet;
}
14. 윗첨자를 나타내는 sup 태그, 아래첨자를 나타내는 sub 태그
- sup : superscripted text
- sub : subscript text
10<sup>2</sup>
log<sub>2</sub>2
15. time 태그
- 브라우저, 검색 엔진에게 날짜나 시간을 전달하기 위하여 사용
- 속성
datetime=”값(Date)” : 유효한 날짜 문자[대표적: YYYY-MM-DD 형태로 작성]
- IE 지원 불가
참고하면 좋을 문헌 : https://miaow-miaow.tistory.com/51
https://www.w3.org/TR/html51/infrastructure.html#dates-and-times
16 span 태그
- 본질적으로 아무것도 나타내지 않는 컨텐츠 영역을 설정
- 대표적인 인라인 요소
- 대표적으로, 인라인을 다루면서, 텍스트를 다루는 곳에서 주로 사용됨
- 가운데 컨텐츠를 선택하여 작업하기에 용이(아래 예제 확인)
<p>동해물과 <span>백두산</span>이 마르고 닳도록 하느님이 보우하사 우리나라 만세</p>
span{
background:blueviolet;
}
위의 예제에서 확인할 수 있는것 처럼, span 은 div 와 동일하게 의미가 없지만,
div와 다르게, 중간에 줄바꿈이 되지 않고도 스타일을 적용 가능!
[블럭요소: 수직으로 쌓임, 인라인 요소: 수평으로 쌓임]
▶️ 텍스트를 다룰 경우에는 span이 div 보다 더 적합! ☑️(의미를 부여하지 않는 경우)
17. br 태그
- break
- 줄바꿈을 설정
- 빈 태그(
로 써도 되지만, 같은 문서 내에서 사용되는 모든 빈태그들도 </>가 아닌 <>로 통일성을 맞추어 주기!) - br 태그를 여러번 사용해서 화면 간격을 벌리는 것은 하지 말아야!(CSS로 해결하기!) ▶️ (실습 a 에서 확인) 즉, 아래의 경우는 물론 확인하기 위함이지만 조금 개선시켜줄 필요가 있다!
<!DOCTYPE html>
<html lang="ko">
<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>
동해물과 백두산이 마르고 닳도록 <br/>
하느님이 보우하사 우리나라 만세<br/>
</body>
</html>
br 태그
(실습 a)- 적합한 경우
<!DOCTYPE html>
<html lang="ko">
<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>
<link rel="stylesheet" href="./style.css">
</head>
<body>
<p>
동해물과 백두산이 마르고 닳도록 <br/>
하느님이 보우하사 우리나라 만세
</p>
</body>
</html>
p{
line-height: 50px;/*기본적으로 폰트사이즈와
동일한 값이 설정되거나 그를 기준으로 1.3~1.4배
크기로 설정됨*/
}
✅ 일반적으로 line-height는 1) 폰트사이즈와 동일한 값 2) 폰트사이즈의 1.3~1.4배 크기로 설정됨(브라우저에 따라 상이)
- line-height로 css 스타일링을 해주고, 폰트 크기를 따로 명시해주지 않는다면,
기존 폰트 크기가 16px인 점을 고려한다면, 아래와 같이 생각해볼 수 있다
br 태그의 특징
- 즉, br 태그로 인해서 line의 중앙에 문자가 위치하게 되고, 나머지는 여백으로 처리되면서 다음 줄까지의 실질적인 간격은, 위의 경우, 34px이 된다! ↔️ line-height-fontSize ➡️ br 태그로 간격을 만들지 않도록! line-height를 이용해서 내가 계산해서 사용하기!
18. 수정과 관련된 태그 del,ins
- 특정 컨텐츠가 현재 상태에서는 제거 /수정(추가)되었음을 알리기 위함
- del : 삭제된(변경된) 텍스트의 범위를 지정[있었지만 삭제되었음을 나타내기 위함]
- 취소선으로 표시됨
- 속성
-cite=”URL” : 변경을 설명하는 리소스의 url이 값으로 !(권장!)
-datetime=”변경이 일어난 유효한 날짜 문자(Date)”
- ins : del과 반대되는 특징!
- 새로 추가된(변경된) 텍스트의 범위를 지정
- 없었는데 이번에 생긴 부분을 나타내기 위해서 사용됨
- 밑줄로 표시됨
- 속성
-cite=”URL” : 변경을 설명하는 리소스의 url이 값으로 !(권장!)
-datetime=”변경이 일어난 유효한 날짜 문자(Date)”
<p>My favorite color is <del>blue</del> <ins>red</ins>!</p>
만약, (그러려면 del 태그를 안쓰는게 더 낫지만 혹시 그래도) del 태그는 그대로 사용하는데, 저렇게 취소선과 함께 안나타내고 싶을때에는
del{
display:none;
}
와 같이 작성해주면
위와 같이 확인해볼 수 있다!