HTML 문서 정식 태그 "전부" 공부하기 - 1편 (코드 작성 및 구현까지)
제목 : HTML 문서 태그 공부하기 - 1편
이 글을 작성하는 이유
단순한 웹 페이지를 작성 할 때 뿐만 아니라, html 파일에 들어가는 tag 들을 알고 있는 것도 중요하다.
나는 여태까지, JS 의 방법론 기술들 (React, Webpack, package.json, 등등 수많음)
을 그냥 쓰지 않고, 최소한 그 의미를 알고 사용하기 위해서 노력 해 왔다.
물론, 같은 맥락에서 보자면, HTML 태그를 단순하게 곧바로 사용하는 것이 아니라,
각 시멘틱 태그의 의미와 사용법을 안다는 취지에서 비슷하다고는 할 수 있다.
그러나, 좀 더 엄격하게 바라보자면, 각 태그가 어떻게 프로그래밍적으로 블록을 구성하는지 조사하지 않기 때문에,
태그 자체를 알려고 노력하지 않는다고 할 수 있다.
그러나, 이러한 HTML 태그를 다양하게 활용하는 것은 여러 방면에서 효과적이다.
- SEO 를 통한 검색엔진 노출 더욱 활성화
- 시멘틱 태그를 통해 정확히 어떤 역할을 하는지 알 수 있음
- 간단히 표준 태그를 통해 미리 정해진 컴포넌트를 부착하고, 원하는 속성을 넣을 수 있음
- 각각의 태그는 사용법이 존재하며, 태그 내부의 속성으로 커스텀이 가능함
- 태그를 모를 때, 나는 버튼을
<div>로 제작했던 흑역사가 있다.. - 이 외에도 태그를 아는 것은 많은 도움이 된다.
HTML 태그를 어떻게 익힐 것인가?
나는 HTML 태그 자체를 아예 모르는 편은 아니다.
지금 내가 작성하고 있는 마크다운 파일도, 모든 것을 자체 문법으로 커버할 수 없다.
예를 들면,
<br/>: 한 줄 띄기<table>: 테이블 내부에 코드 블럭을 넣어야 할 때<a target="_blank" ...>: 자체적으로 제공하는 MD 링크는 현재 사이트를 이동하게 되어 있다.
이걸 개량해서 위 처럼 직접 작성하는데, 덕분에 새 창에서 참고 자료를 볼 수 있다.<code>: 마크다운 자체적으로 아예 코드 선언 방식`xxx`가 존재하는데,
아주 가끔 지정된 마크다운 문법이``를 무시할 때가 있을 때 사용한다.- 등등...
하지만, 마크다운 자체에서 HTML 을 겹쳐서 사용할 수 있다는 장점 때문에,
HTML 을 사용하면 마크다운을 더 풍부하게 사용 할 수 있기도 하다.
W3Schools 사이트에 카테고리별로 태그를 익힐 수 있도록 지원한다.
따라서, 나는 중제목, 소제목으로 나누어 파트를 분리하고,
각 태그의 실제 상황에 맞게 코드를 작성 해 볼 생각이다.
Category - 제일 기본적인 HTML 태그
!DOCTYPE
문서의 유형을 정의한다.
예시 :
<!DOCTYPE html>
<html>
....
</html>모든 HTML 문서들은 <!DOCTYPE> 정의로 시작되어야 한다.
사실 이 정의는 html 태그는 아니고, 브라우저에게 "어떤 유형의 브라우저이다" 라고 알려주는 정보이다.
그리고, 이 태그는 대소문자를 신경쓰지 않아 소문자로 작성해도 된다.
EX - <!doctype html>
html
HTML 문서를 정의한다.
예시 :
<!DOCTYPE html>
<html>
<head>
...
</head>
<body>
...
</body>
</html>html 태그는 HTML 문서 자체의 루트를 의미, 표현한다.
즉, 내부의 어떤 태그이던, 부모 DOM 으로 거슬러 올라간다면 html 태그인 것이다.
html 태그는 <!DOCTYPE> 태그를 제외하고 모든 종류의 HTML 요소를 포함한다.
그리고, 태그 내부에 lang 속성을 넣을 수 있는데,
이는 웹 페이지의 언어를 정의하기 위해 사용한다.
<!DOCTYPE html>
<!-- 혹은 lang="en" -->
<html lang="ko-kr">
...
</html>W3Schools 에서 의외로 중요한 부분도 보여주는데,
바로 CSS 기본 설정이다.
특정 스타일링을 진행하기 위해 이미 설정되어 있는 정보는 매우 중요하다고 생각한다.
그래야 이 컴포넌트가 왜 이렇게 표현되는지 알 수 있기 때문이다. (개인적 생각)
html {
display: block;
}
html:focus {
outline: none;
}<html> 태그는 애초부터 Root 요소이기 때문에, 블록이라는 것을 이해했다.
여기서 설정된 display : block 이란, 한 줄 전체를 자치한다는 것을 의미한다.
이는 <p> 와도 동일하다.
그리고, :focus 는 해당 요소에 사용자의 인터랙션이 발생했을 때를 의미한다.
여기서 outline: none 은, 브라우저가 기본적으로 요소에 제공하는 테두리를 없애겠다는 것이다.
크기를 차지하지는 않는데, 보통 none 으로 설정 후, box-shadow 를 통해
사용자에게 시각적인 피드백을 주는 편이다.
head
문서에 대한 메타데이터와 정보를 담는다
어찌 보면, 웹 개발 시 동적 브라우저를 위한 JS 코드 컨테이너 역할을 하는 중요한 태그라고 생각한다.
예시 :
<!DOCTYPE html>
<html>
<head>
<title>헤드 태그에는 웹사이트의 제목을 달 수 있음</title>
<script src="https://CDN 으로 가져올 코드 베이스"></script>
<script>
// 혹은, 내부에 JS 코드를 넣을 수도 있다.
</script>
<!-- 혹은 문서 상위에 style css 를 직접 선언 할 수도 있다. -->
<style>
.container {
display: flex;
}
</style>
<!-- 웹 서버의 styles.css 를 가져와서 스타일링 한다. -->
<link rel="stylesheet" type="text/css" href="styles.css" />
<!-- 등등.. -->
</head>
</html><head> 태그 내부에 들어 갈 수 있는 또 다른 태그들은 이렇다.
<title><style><base><link><meta><script><noscript>
<head> 의 기본 CSS 설정
head {
display: none;
}어찌 보면, head 태그는 메타데이터 선언 및 불러오기 역할이라서
보여지지 않는것이 당연하지 않을까 생각된다.
title
문서의 제목을 정의한다.
위에서 정의했던 것 처럼, head 태그 내부에 title 을 넣어 문서의 제목을 정한다.
예시 :
<!DOCTYPE html>
<html>
<head>
<title>타이틀은 SEO 를 위해 중요하다</title>
</head>
</html>우리는 만든 웹사이트를 사람들에게 노출시키기 위해 만든다고 할 수 있다.
그렇다면, 우리는 SEO(Search Engine Optimization) 를 신경 쓸 수 밖에 없다.
브라우저가 페이지를 리스팅 할 때 검색 엔진 알고리즘으로 사용하는 것이 <title> 속성이라고 한다.
또한, <title> 은 브라우저 탭(ToolBar) 의 제목을 정한다.
즐겨찾기 시에 내부의 제목으로 제공된다.
body
문서의 body(몸체)를 정의한다.
예시 :
<!DOCTYPE html>
<html>
<head>
...
</head>
<body>
<h3>mini heading</h3>
<p>패러그래프</p>
</body>
</html><body> 태그는 <html> 문서에 "단 한번" 만 정의된다.
<body> 는 HTML 문서의 모든 컨텐츠를 담는다.
여기서 헤딩, 이미지, 링크, 테이블, 리스트, 등등이 담겨진다.
html 이후로 처음 등장한, 유저에게 보여지는 DOM 인데,
메타데이터를 제외하고, 컨테이너 DOM 으로서는 최고 레벨이라고도 할 수 있다.
만약 body 태그에 백그라운드 이미지나 색상을 설정한다면,
문서 전체가 해당 이미지, 혹은 색상을 가지는 것을 볼 수 있다.
<body> 의 기본 CSS 설정 :
body {
display: block;
margin: 8px;
}
body: focus {
outline: none;
}h1 ~ h6
HTML 헤딩을 정의한다.
사실 내가 마크다운에서 사용하고 있는,
# 제일 큰 헤딩## 내가 마크다운 문서에서 title 을 작성할 때 사용### 각각의 소제목을 정할 때 사용
이러한 문법들은 결국 <h1> ~ <h3> 까지를 의미한다.
예시 :
<!DOCTYPE html>
<html>
<head>
...
</head>
<body>
<h1>가장 큼</h1>
<h2>...</h2>
<!-- ... -->
<h6>가장 작음</h6>
</body>
</html>heading 은 한 줄 자체를 차지하기 때문에, 그 영역의 색상과 내부 글자 색상을 정할 수 있다.
그리고, text-align 이라는 속성을 통해 정렬을 할 수도 있다.
<h2 style="text-align: center">헤딩 2</h2>
<h3 style="text-align: right">헤딩 3</h3>
<h4 style="text-align: left">헤딩 4</h4>
<h5 style="text-align: justify">헤딩 5</h5>여기서 justify 속성이 뭔가 싶었는데,
헤딩 크기에 따라 글자를 정확히 맞춰서 벌린다.
"123456" 이라는 글자 영역과,
"1234" 이라는 글자 영역이 동일하다.
<hX> 의 기본 CSS 설정 :
h<숫자> {
display : block;
margin-left: 0;
margin-right: 0;
font-weight: bold;
// h1 --> h6
font-size : 2em; 1.5em; 1.17em; 1em; .83em; .67em;
margin-top : 0.67em; 0.83em; 1em; 1.17em; 1.5em; 2em;
margin-bottom : 0.67em; 0.83em; 1em; 1.17em; 1.5em; 2em;
}헤딩 자체가 클 수록 차지하는 위아래 비중이 커질 줄 알았는데,
헤딩 자체의 크기를 고정하기 위해 font-size, margin-top and bottom 의 영역이
서로 반비례하는 것을 볼 수 있다.
p
문단(절)을 정의한다.
예시 :
<!DOCTYPE html>
<html>
<head>
...
</head>
<body>
<p>문단을 정의할 때 쓰는 태그이다</p>
<p>한 번 더 쓰면 다음 줄에서 시작됨~</p>
</body>
</html>사실상 블로그 글에서 가장 많이 사용되는 태그가 아닌가 싶다.
브라우저는 자동으로 <p> 전후 Single Blank Line(단일 공백줄) 을 추가한다.
<p> 의 기본 CSS 설정 :
p {
display: block;
margin-top: 1em;
margin-bottom: 1em;
margin-left: 0;
margin-right: 0;
}br
줄바꿈을 의미한다.
예를 들어서, 문단 사이의 간격이 좁게 설정되어 있다고 생각한다면,
margin 을 설정하여 해결 할 수도 있겠지만,
아예 <br> or <br/> 을 넣어서 빈 줄을 넣을 수도 있다.
예시 :
<!DOCTYPE html>
<html>
<head>
...
</head>
<body>
<p>1 번째 문단</p>
<br />
<p>2 번째 문단</p>
<p>
생각보다 긴 문단이 있다면, 내부에 이 태그를 삽입하여 <br />
해결 할 수 있습니다. (p 는 작성 한 대로 표현되지 않고,)<br />
줄바꿈을 없애기 때문.
</p>
</body>
</html><br> 의 기본 CSS 설정 :
없음
hr
컨텐츠의 주제적 변화를 정의한다
위에서는 W3Schools 에서 말한거긴 하지만, 이 태그는 여러 방면으로 사용할 수 있다고 생각한다.
주로, 스타일링 쪽에서 많이 사용되지 않을까 생각된다.
물론, 나도 마크다운에서 --- 표현을 통해 <hr> 을 표현하는데,
이를 사용 할 때는 나도 주제의 변화 시에 사용한다.
예시 :
이번에는 블로그에서 직접 독자들이 볼 수 있도록 여기서 태그를 작성 해 보겠다.
<hr style="width:50%; text-align:left; margin-left:0" /><hr style="height:2px; border-width:0; color:gray; background-color: white" /><hr> 의 기본 CSS 설정 :
hr {
display: block;
margin-top: 0.5em;
margin-bottom: 0.5em;
margin-left: auto;
margin-right: auto;
border-style: inset;
border-width: 1px;
}Category - 형식, 서식에 관한 HTML 태그
abbr
약어를 정의한다. (약어 : Abbreviation)
약어는 위에서 말했던 SEO (Search Engine Obtimazation) 과 같은 단어들을 말한다.
이 태그 위에 마우스를 올려두면, 내부 속성이 설명을 해 준다.
예시 :
<abbr title="Search Engine Optimazation">SEO</abbr> 는 매우 중요하다.실제 표현 :
SEO 는 매우 중요하다.
<abbr> 기본 CSS 설정 :
abbr {
display: inline;
}address
문서, 아티클에 대한 저자, 소유자의 연락처를 정의한다.
예시 :
<address>
이 글의 저자는 <a href="mailto:rhdwhdals8@naver.com">공담형</a> 입니다. <br />
지구, 대한민국에 있습니다.
</address>실제 표현 :
이 글의 저자는 공담형 입니다.지구, 대한민국에 있습니다.
<address> 기본 CSS 설정 :
address {
display: block;
font-style: italic;
}b
굵은(두꺼운) 텍스트를 정의한다.
정말 많이 사용되는 태그라고 생각된다.
단순 텍스트에서, 특정 단어만을 두껍게 만들어 약간의 하이라이팅 효과를 볼 수 있다.
그런데, 정식 사양에서는 <em> 태그를 추천하고,
<b> 는 정말 최종적으로 사용해야 한다고 말한다.
예시 :
<p>안녕하세요, 제 블로그 이름은 <b>코딩크리쳐</b> 입니다.</p>실제 표현 :
안녕하세요, 제 블로그 이름은 코딩크리쳐 입니다.
<b> 기본 CSS 설정 :
b {
font-weight: bold;
}blockquote
다른 소스로부터 가져온 인용문 구간을 정의한다.
예시 :
<blockquote>
인용문을 가져 올 때 많이 사용되던 것이기도 한데, <br />
나는 개인적으로 마크다운 작성 시, 내 의견을 크게 어필 할 때 사용한다. <br />
<blockquote>blockquote 안의 blockquote</blockquote>
</blockquote>실제 표현 :
인용문을 가져 올 때 많이 사용되던 것이기도 한데,
나는 개인적으로 마크다운 작성 시, 내 의견을 크게 어필 할 때 사용한다.
blockquote 안의 blockquote
<blockquote> 기본 CSS 설정 :
blockquote {
display: block;
margin-top: 1em;
margin-bottom: 1em;
margin-left: 40px;
margin-right: 40px;
}cite
작품의 제목을 정의할 때 사용한다고 한다.
cite 라는 단어라서 뭔가 했는데,
대표적인 그림, 음악, 영화 같은 작품들을 표현 할 때 사용한다고 한다.
굳이... 싶기도 하지만, 태그 자체로 역할을 구분한다는 점에서 이해하고 있다.
예시 :
<cite>타이타닉</cite> 는 정말 유명한 영화이다.실제 표현 :
타이타닉 는 정말 유명한 영화이다.
<cite> 기본 CSS 설정 :
cite {
font-style: italic;
}심지어 폰트도 그냥 <i> 랑 동일하다..
code
모든 종류의 컴퓨터 언어 조각을 정의할 수 있다.
내가 문서를 작성 할 때, 가장 많이 사용하는 태그이다.
아마 개발자라면, 기술 블로그를 작성 할 때, 많이 사용하는 태그가 아닐까 생각된다.
현재 작성중인 이 문서에도 거의 100개 정도가 들어갔을 것이다.
예시 :
<p>디렉토리 생성하기 : <code>$ mkdir newDir</code></p>
<p>파일 생성하기 : <code>$ echo "" > newDir/new-file.md</code></p>
<p>파일 내용 출력하기<code>$ cat newDir/new-file.md</code></p>실제 표현 :
디렉토리 생성하기 : $ mkdir newDir
파일 생성하기 : $ echo "" > newDir/new-file.md
파일 내용 출력하기$ cat newDir/new-file.md
<code> 기본 CSS 설정 :
code {
font-family: monospace;
}바로 사용하면 코드 조각인지 알아차리기 힘들어서,
보통 code 태그에 그림자 효과, 패딩, 백그라운드 색상을 변경하여 만드는 편이다.
내 블로그도 그러한 방식으로 코드 조각을 커스텀했다.
del
문서에서 삭제된 텍스트를 정의합니다.
아마, 다양한 도메인의 공식문서에서 애매한 표현을 고치기 위해 사용하는 태그가 아닐까 생각된다.
중간에 그어지는 선을 바탕으로 텍스트가 그려지는데, 직접 보면 알것이다.
예시 :
NestJS 는 <del>Express</del> express 모듈을 디폴트로 사용합니다.실제 표현 :
NestJS 는 Express express 모듈을 디폴트로 사용합니다.
<del> 기본 CSS 설정 :
del {
text-decoration: line-through;
}dfn
컨텐츠 안에 작성된 글이 어떤 의미를 가지는지 설명할 수 있다.
만약에, 우리가 모르는 용어의 탭이 존재한다면, 해당 탭 위에 마우스를 3초 이상 올려두어
설명 박스가 나올 때 까지 기다리던 경험이 있을 것이다. 아마?
예시 :
<dfn title="Node Package Manager">NPM</dfn> 은 프로젝트를 관리하기에 편리한
프로그램이다.실제 표현 :
NPM 은 프로젝트를 관리하기에 편리한 프로그램이다.
^ 위의 NPM 글자에 마우스를 올려 보자
<dfn> 기본 CSS 설정 :
dfn {
font-style: italic;
}em
특정 텍스트 강조를 정의한다.
<b> 태그 대신에 <em> 태그를 권장하던데, 폰트가 두껍냐, 이탈릭체이냐 차이이다.
예시 :
<em>html 태그</em> 들이 생각보다 정말 많다...실제 표현 :
html 태그 들이 생각보다 정말 많다...
<em> 기본 CSS 설정 :
em {
font-style: italic;
}i
기존 텍스트와 다른 분위기를 내고 싶을 때 사용한다.
주로 기술적 용어, 다른 언어, 나의 생각을 작성 할 때 <i> 이탈릭체를 사용한다고 한다.
예시 :
내 생각은, <i>태그만으로 아티클 내부의 역할을 이해할 수 있다</i> 라는 것이다.실제 표현 :
내 생각은, 태그만으로 아티클 내부의 역할을 이해할 수 있다 라는 것이다.
<i> 기본 CSS 설정 :
i {
font-style: italic;
}ins
del 과는 반대로, 새로 삽입된 텍스트 문구를 의미한다.
요약하자면, 글씨 밑에 밑줄이 존재하는 텍스트를 의미한다.
왜 ins 인지 몰랐는데, Insert 의 앞 3글자만 따 왔다.
예시 :
NestJS 는 <del>Express</del> express 모듈을 사용합니다. <br/>
<ins>뿐만 아니라, fastify 모듈을 사용하여 몇 배는 빠르게 통신 할 수 있습니다. </br>실제 표현 :
NestJS 는 Express express 모듈을 사용합니다.
뿐만 아니라, fastify 모듈을 사용하여 몇 배는 빠르게 통신 할 수 있습니다.
<ins> 기본 CSS 설정 :
ins {
text-decoration: underline;
}kbd
키보드의 입력을 정의한다.
이 태그는 <code> 와 동일한 기본 스타일 속성을 지닌다.
나는 글을 작성 하면서 키보드의 입력을 나타 낼 때, <code> 태그로 나타냈는데,
키보드의 입력을 태그로서 구분하고 싶다면, <kbd> 를 사용하면 될 것 같다.
예시 :
윈도우에서 복사하려면, <kbd>Ctrl</kbd> + <kbd>c</kbd> 를 누르면 되고, <br />
맥에서 복사하려면, <kbd>Cmd</kbd> + <kbd>c</kbd> 를 누르면 된다.실제 표현 :
윈도우에서 복사하려면, Ctrl + c 를 누르면 되고,
맥에서 복사하려면, Cmd + c 를 누르면 된다.
<kbd> 기본 CSS 설정 :
kbd {
font-family: monospace;
}mark
특정 텍스트를 강조하거나 하이라이팅 할 때 사용한다.
이번엔 조금 특수하다고 생각하는데,
기본 스타일링에서 배경 색상이 노란색이라는 것이다.
또한, 글자 색상도 "검정" 으로 선언되어 있다.
예시 :
오늘은 내가, <mark>짜파게티</mark> 요리~사~실제 표현 :
오늘은 내가, 짜파게티 요리사
<mark> 기본 CSS 설정 :
mark {
background-color: yellow;
color: black;
}meter
알려진 범위 내에서 스칼라 측정을 정의한다.
이게 무슨 말인가 했는데, 실제 구현을 보면 바로 이해가 된다.
일단, 정적으로 나타내 진 게이지 바 라고 생각한다.
나중에 설명할 <progress> 와 비슷하지만, 더 디테일하다.
이번에는 W3Schools 가 나보다 더 잘 표현 할 것 같아서 가져온다.
예시 :
<label for="disk_c">Disk usage C:</label>
<meter id="disk_c" value="2" min="0" max="10">2 out of 10</meter><br />
<label for="disk_d">Disk usage D:</label>
<meter id="disk_d" value="0.6">60%</meter>실제 표현 :
<meter> 에 들어가는 특수 속성 설명 :
| 속성 이름 | 속성 값 | 설명 |
| form | form_id | meter 가 속하는 form 을 지정한다. |
| high | number | 높다고 생각되는 값을 지정한다. |
| low | number | 낮다고 생각되는 값을 지정한다. |
| max | number | 될 수 있는 최대 값을 지정한다. |
| min | number | 될 수 있는 최소 값을 지정한다. |
| optimum | number | 이 게이지 바에서 최적의 값을 지정한다. |
| value | number | 필수 속성이며, 게이지에서 현재 값을 지정한다. |
<meter> 기본 CSS 설정 :
없다
pre
이미 지정된 형식의 텍스트를 정의한다.
우리가 <p> 태그를 이용하여 텍스트를 내부에 작성하며 엔터를 쳐도,
실제로 엔터가 반영되지는 않는다.
그러나, <pre> 태그는 정확히 엔터 값 부터, 얼마나 떨어져있는지를 반영하여 보여준다.
예시 :
<pre>
여기에 작성되는 글을
정말로 그대로 반영되어 페이지에 나타난다.
나는 지금 br 태그를 작성하지 않고 글을 넘기는 중이다.
</pre>실제 표현 :
여기에 작성되는 글을
정말로 그대로 반영되어 페이지에 나타난다.
나는 지금 br 태그를 작성하지 않고 글을 넘기는 중이다.
위에서 코드 블럭으로 나타날 수도 있는데,
이는 현재 내 블로그에 적용된 highlights.js 때문으로,
마크다운에서 작성된 코드블럭들은 <pre> 로 작성되기 때문에, 이를 파싱하는 과정에서
위의 예시도 코드 블럭으로 나타 날 수 있다.
<pre> 기본 CSS 설정 :
pre {
display: block;
font-family: monospace;
white-space: pre;
margin: 1em 0;
}progress
작업의 상황을 표현한다. - <meter> 와 거의 동일하지만, 속성이 더 부족함.
라벨과 함께 이런 식으로 표현 될 수 있다고 한다.
예시 :
<label for="file">파일 다운로드중 :</label>
<progress id="file" value="32" max="100">32%</progress>실제 표현 :
<progress> 의 특수 속성 :
| 속성 | 값 | 설명 |
|---|---|---|
| max | number | 전체 작업의 총량을 지정한다. 기본 값은 1 |
| value | number | 얼마나 많은 작업이 완료되었는지 지정한다. |
<progress> 기본 CSS 설정 :
없음
JS 에서 <progress> 태그와 상호작용하는 라이브러리가 있는 모양이다.
q
짧은 인용문을 정의한다.
위에서 <blockquote> 를 다뤘는데, 이번에는 블록이 아니라, 인라인 버전이다.
기본 스타일링으로 인해, 맨 앞과 뒤에 간단히 " 쌍따옴표가 붙는다.
예시 :
짧게 인용하기 위해서는, <q>이렇게 인용할 수 있습니다.</q>실제 표현 :
짧게 인용하기 위해서는, 이렇게 인용할 수 있습니다.
<q> 기본 CSS 설정 :
q {
display: inline;
}
q:before {
content: open-quote;
}
q:after {
content: close-quote;
}s
더 이상 맞지 옳지 않은 텍스트를 정의한다.
즉, 중앙에 가로선이 하나 그어지며, <del> 처럼 된다.
정식 스펙에서는 "삭제될 텍스트" 일 경우에는 <del> 을 사용하고, 나머지는 <s> 를 사용하라고 한다.
예시 :
<s>지금 10개 남음!</s>
판매 완료실제 표현 :
지금 10개 남음!
판매 완료
<s> 기본 CSS 설정 :
s {
text-decoration: line-through;
}samp
컴퓨터 프로그램의 출력물 샘플
사실상 <code> 태그와 동일하다.
물론, HTML 태그로 구분하여 출력물에 대한 스타일링을 따로 진행 할 수 있겠다.
예시 :
<code>char* str = "Hello";</code>
<code>printf("%d", sizeof(*str));</code>
결과 : <samp>1</samp>실제 표현 :
char* str = "Hello";
printf("%d", sizeof(*str));
결과 : 1
<samp> 기본 CSS 설정 :
samp {
font-family: monospace;
}small
일반 텍스트보다 더 작은 텍스트를 정의한다.
<b> 과는 반대의 개념으로, font-size 가 smaller 이다.
예시 :
일반 텍스트는 이렇게 생겼습니다. 작은 텍스트는 <small>이렇습니다.</small>실제 표현 :
일반 텍스트는 이렇게 생겼습니다.
작은 텍스트는 이렇습니다.
<small> 기본 CSS 설정 :
small {
font-size: smaller;
}strong
중요한 텍스트를 정의한다.
스타일링 자체는 <b> 와 동일하다.
예시 :
<strong>C 포인터</strong> 는 메모리 안정성을 배우는데 중요하다.실제 표현 :
C 포인터 는 메모리 안정성을 배우는데 중요하다.
<strong> 기본 CSS 설정 :
strong {
font-weight: bold;
}sub
아래 첨자 텍스트를 정의한다.
이게 무슨 말이냐면, 일반 줄보다 반 문자 정도 아래에 나타난다.
따라서, 수학 기호를 작성하기엔 좋다.
예시 :
Tree 자료구조는 검색을 매우 빠르게 해 주는 중요한 요소인데, 특정 요소 검색 시,
O( log<sub>2</sub> N ) 시간 복잡도를 보장한다.실제 표현 :
Tree 자료구조는 검색을 매우 빠르게 해 주는 중요한 요소인데,
특정 요소 검색 시, O( log2 N ) 시간 복잡도를 보장한다.
<sub> 기본 CSS 설정 :
sub {
vertical-align: sub;
font-size: smaller;
}sup
위 첨자 텍스트를 정의한다.
바로 위에서 "아래 첨자" 에 대해서 설명 한 것 처럼,
"위 첨자" 는 기준선보다 반 문자 위에 나타난다.
이 태그도 수학 기호를 작성하기에 좋다.
예시 :
컴퓨터 프로그래밍에서 Bit 는 굉장히 중요한 개념이다. 하나의 주소에 4 Bit 타입이
할당되어 있다면, 이 타입은 최대 2<sup>4</sup> == 16 개의 상태를 표현 할 수 있다.실제 표현 :
컴퓨터 프로그래밍에서 Bit 는 굉장히 중요한 개념이다.
하나의 주소에 4 Bit 타입이 할당되어 있다면,
이 타입은 최대 24 == 16 개의 상태를 표현 할 수 있다.
<sup> 기본 CSS 설정 :
sup {
vertical-align: super;
font-size: smaller;
}template
이 HTML 페이지가 로드 될 때, 감춰져야 되는 컨텐츠를 위한 컨테이너를 정의한다.
나도 처음에 이 정의를 보았을 때, 들었던 생각이
그렇다면, 처음에 페이지가 렌더링 된 후, 개발자 도구에 들어가면 보이지 않나? 였다.
그런데, 그것이 아니고, 클라이언트의 HTML 페이지 자체에는 <template> 를 볼 수 있다.
하지만, 만약에 웹 페이지 제작자가, 특정 이유로 <template> 안에 들어가는 요소들을
먼저 페이지에 보여주지 않고, 나중에 JavaScript 로 보여주고 싶다면, 그 때 사용할 수 있다.
단점이 있는데, 결국 HTML 페이지에 Tag 로서 넣어준다는 것 자체가 클라이언트가 직접 콘솔에서
접근 할 수 있다는 이야기이다.
따라서, 이러한 일을 원천 차단하고 싶다면, 아예 JS 로 DOM 을 만들어 넣어주는 것이 좋다고 한다.
예시 :
<!DOCTYPE html>
<html>
<head>
<title>Testing Template tag</title>
</head>
<body>
<template>
<h2>템플릿 문자열이 나타났다!</h2>
</template>
<h1>Testing</h1>
<button onclick="showTemplate()">show Template</button>
<div id="container"></div>
<script>
function showTemplate() {
// 맨 밑에 작성 해 놓은 DOM - div 를 의미
const container = document.getElementById("container");
// 우리가 이 문서에 작성한 template 태그는 하나밖에 없고, 1 번째이다.
const innerTemp = document.getElementsByTagName("template")[0];
// template DOM 의 모든 컨텐츠를 가져온다.
const tempDOMs = innerTemp.content.cloneNode(true);
container.appendChild(tempDOMs);
}
</script>
</body>
</html>실제 표현 :
이는 직접 html 파일을 만들어서, 위의 코드를 붙여넣은 뒤,
직접 버튼을 클릭하여 실행 해 보길 권장한다.
<template> 기본 CSS 설정 :
애초에 CSS 설정이 가능한 태그가 아님.
time
특정 시간 (혹은 datetime) 을 정의한다.
우리가 사용하는 <time> 태그는 어떠한 스타일링을 주지 않는다.
그러나, 이 태그의 의미는 2 가지가 있다.
- 태그를 통해 이 텍스트가 "날짜" 라는 차별점을 줄 수 있다.
datetime속성은 기계가 읽을 수 있어, SEO 에 차별점을 둘 수 있다.
예시 :
내가 주로 가는 카페는 <time>10:00</time> 에 열고, <time>02:00</time> 에 닫는다.
이 글을 작성하는 현재 날짜는 거의 <time datetime="2025-05-24 02:52">5월 말, 새벽</time> 이다.실제 표현 :
내가 주로 가는 카페는 에 열고, 에 닫는다.
이 글을 작성하는 현재 날짜는 거의 이다.
<time> 기본 CSS 설정 :
없음
u
일반 텍스트와는 다르게 스타일링 된 일부 텍스트를 정의합니다.
이 또한 굉장히 난해한 정의라고 생각하는데, 실제 구현 및 결과물을 보면 이해가 되기도 한다.
기본 스타일은 underline 으로, 굉장히 평범하지만,
이 태그는 조금의 스타일링을 거치면 꽤 괜찮은 스타일링이 된다.
구현을 보자.
예시 :
<!DOCTYPE html>
<html>
<head>
<title>
unarticled 텍스트 테스팅
</title>
<style>
.spelling-warn {
text-decoration-line : underline;
text-decoration-style : wavy;
text-decoration-color : yellow;
}
</style>
</head>
<body>
<p> 스펠링이 틀린 문자는 <u class="spelling-warn">dattime</u> 처럼 처리 할 수 있다.
</body>
</html>실제 표현 :
스펠링이 틀린 문자는
dattime
처럼 처리 할 수 있다.
<u> 기본 CSS 설정 :
u {
text-decoration : underline;
}var
변수를 정의한다.
기본 스타일은 단순하게 italic 처리가 되어 있다.
이 또한, 태그 자체로서 사용처를 구분한다는 목적이 있다.
주로, 수학 표현식에서나, 프로그래밍 변수를 정의하는 데 사용한다.
예시 :
<p> <var>1 + 2</var> 는, 3 입니다.실제 표현 :
1 + 2 는, 3 입니다.
<var> 기본 CSS 설정 :
var {
font-style : italic;
}단순하게 태그만 사용하는 것 보다는, 태그 자체를 스타일링하여 사용하는 데 의미가 있다고 한다.
wbr
줄바꿈 가능성을 정의한다.
일단, 위의 w 는 일단 단어인 word 를 의미한다.
여기서 왜, 단어에 br 이 들어갔냐 하면,
현재 텍스트 컨텐츠가 들어가는 장소에, 아주아주아주 긴 단어가 들어갔다고 가정한다.
그런데, 그냥 작성하면, 아주 긴 단어가 중간에 잘리고, 그 다음 줄에서 이어 나간다.
그러나, <wbr> 을 사용한다면, 이 단어가 만약에 중간에 잘려야 한다면,
그냥 이 단어 자체를 다음 줄로 넘겨 완전하게 보이도록 만들라는 것이다.
따라서, 이는 단어 자체의 "줄 바꿈 가능성을 정의" 하는 것이다.
예시 :
<p>해당 태그 없이 아주아주 긴 단어 작성 해 보기 : ahflkwhri3ehsjkldhlkauibwfuhssdfjniuwhfuvbwjnfviusdrnkwejkhsdirhcjhvuwbdjvbxjdfhjafhuekvbjshdv</p>
<p>wbr 태그와 함께 아주아주 긴 단어 작성 해 보기 : <wbr>ahflkwhri3ehsjkldhlkauibwfuhssdfjniuwhfuvbwjnfviusdrnkwejkhsdirhcjhvuwbdjvbxjdfhjafhuekvbjshdv</wbr></p>실제 표현 :
해당 태그 없이 아주아주 긴 단어 작성 해 보기 : ahflkwhri3ehsjkldhlkauibwfuhssdfjniuwhfuvbwjnfviusdrnkwejkhsdirhcjhvuwbdjvbxjdfhjafhuekvbjshdv
wbr 태그와 함께 아주아주 긴 단어 작성 해 보기 : ahflkwhri3ehsjkldhlkaui
<wbr> 기본 CSS 설정 :
없음
이번 글을 작성하며 배운 것.
HTML 파일만을 활용하여 열심히 페이지를 꾸미던 옛날, 거의 2000년대쯤?
JS 라이브러리와 개발 환경이 미숙하던 그 당시. 파일 내부에서 구역과 사용처를 나누기 위해
얼마나 열심히 개발했을지 상상이 안 될 정도로 HTML Tag 들이 많다.
이전에 React 로 개발 할 때, 대부분의 태그들을 div 로 작성했었다.
물론, 이 방식 또한 옳기도 한데, 나는 스타일링과 기능 자체를 클래스명으로 구분했었기 때문이다.
그러나, 같은 기능을 가지지만, 내가 작성하고자 하는 텍스트에 조금 더 알맞는 태그를 사용하여
이를 동료 개발자들과 공유하면서, 목적을 확실히 할 수 있겠다는 생각을 했다.
특히, progress, meter 라는 진행 상황 혹은 게이지를 알려주는 특수 formatter 를 알게 되었고,,
template 블럭은 옛날 개발자들이,
"처음에 렌더링 하지 말고, 동적 DOM 상호작용을 위한 태그를 만들어보자" 라는 개념으로
개발 한 것 같다는 생각이 들었다.
요즘은 JS 번들러와 개발 환경이 좋아서 사용하지는 않겠지만..
이러한 태그가 무엇이 부족하여 나오게 되었는지 알게 되는 것 만으로 신선한 공부를 했다고 말할 수 있다.
참고 사이트
W3Schools HTML Element Reference
https://www.w3schools.com/TAGS/ref_byfunc.asp
MDN HTML 시작하기