제목 : HTML 문서 태그 "전부" 공부하기 - 5편
이전 편인 4 편의 주소
https://codecreature.tistory.com/221
이 글을 작성하는 이유
HTML 태그를 "전부" 다루기 위해 1 편부터 4편 까지 달려왔다..
태그 정의, 태그 예시, 태그 실제 표현 예시, 동적 스크립트
이를 전부 구현 및 작성한다는 것은 정말 쉽지는 않은 일이었다. (태그가 많아서)
일반적으로 상황에 맞게 자주 사용되는 태그들이 존재하는데,
나는 JS 는 잘 사용하지만, 시멘틱 태그 자체에는 약해서 공부를 하게 되었었다.
그렇다면, "나는 HTML 태그를 잘 알고 있느냐?" 라는 질문이 스스로에게 떠오른다..
정말로 "모든" 태그를 다루고 있기에 힘들게 공부했지만, 자만하지 않고
서로 정반대의 대답을 해 보도록 하자.
- 나는 HTML 태그를 잘 알고 있습니다. - 의 경우
나는 HTML5 정식 스펙상에 들어가 있는 "모든" 태그를 배우고, 작성 해 보았다.
태그가 어떠한 상황에 사용되는지, 실제 정의는 어떻게 되는지, 전부 이해하고 있다.
- 나는 HTML 태그를 잘 알고 있지 않다. - 의 경우
HTML 태그를 전부 알고 있더라도, 블로그 글의 특성상,
JS 에서 제한되는 메서드와 기능이 있어, HTML 태그를 잘 활용한다고 볼 수는 없다.
즉, 곧 공부하게 될 React 에서 태그 활용성이 극대화 될 것이라고 생각한다.
현재 심정은?
하.... 생각보다 HTML5 스펙에 존재하는 태그가 정말 많다는 것을 느꼈다..
하지만, 별로 중요하게 생각하고 있지 않던 태그가, 웹에서 생각보다 인터랙션을 위해
중요한 역할을 하고 있다는 것을 깨닫기도 한다. EX - dfn, abbr 등등
현재까지 마무리 한 태그 카테고리는 이러하다
- Basic HTML - 기본 HTML 태그들
- Formatting - 형식 위주의 태그들
- Forms and Input - form 과 내부의 input 관련 태그들
- Frames - HTML5 스펙으로 오면서
iframe으로 기능이 통합됨. - Images - 이미지와 간단한 캔버스, 그리고
svg의 구성을 알게 됨 - Audio / Video - 오디오와 비디오, 그리고 소스 태그에 대해서 배우는데, 이건 JS 가 중요하다 생각.
- Links - 연결된 문서에 대한 태그와, 해당 문서와 현재 문서 간의 관계를 배운다.
- Lists - 정렬, 비-정렬 배열에 대한 요소와, 각 태그의 속성에 따라 달라지는 마커 컨텐츠를 배운다.
- Tables - 엑셀과 비슷한 형식의 데이터를 표현하기 위해 정말 필수적으로 배워야 할 태그들이다.
여기까지만 해도.. 거의 120 개 정도? 는 된다.
간단히 다루지도 않았고, 정의, 코드 예제, 실사 렌더링, 기본 css, 커스텀
이들을 한꺼번에 다루니, 생각보다 글을 작성하는 것이 쉽진 않다.
그나마, 여태까지 Markdown 문서를 500 개 정도는 작성해 온 짬이 있어 작성할 수 있는 것이 아닌가 생각된다...
이 문서가 마지막 HTML 태그에 대한 블로그 글이다!!
이제 남은 카테고리는
- Styles and Semantics - 스타일과 시멘틱 태그들
- Meta Info - 메타정보 모음
- Programming - HTML 문서 내부 프로그래밍 관련 태그들
이렇게 남았다..
이렇게 보니, 정말 긴 길을 달려왔구나 생각이 든다.
마지막 글이니만큼, 조금 길 수도 있다.
그러나, 위의 리스트에서 볼 수 있는 태그들을 보다 보면,
우리가 웹 개발을 할 때 무심코 생각했던 태그들이 중요한 역할을 했다는 것을 알 수 있다.
Category - Styles and Semantics (스타일과 시멘틱 태그)
style
문서에 대한 스타일 정보를 정의한다.
문서(HTML) 자체에서 정의하는 css 정보를 의미한다.
주로 간단한 문서를 작성 할 때, <head> 태그 내부에 메타데이터처럼 넣어서 사용한다.
그리고, 반드시 <head> 태그 내부에 들어가야 한다.
예시 :
<!DOCTYPE html>
<html>
<head>
<style>
p {
color: purple;
}
</style>
</head>
<body>
....
</body>
</html>실제 표현 결과 :
<head> 를 임시적으로 블로그 아티클에 표시 할 수 없어 스타일 태그도 따로 넣을 수 없다.
<style> 특수 속성 :
media: 유저의 기기와 미디어 상황에 따라 리소스를 최적화 하는 데 사용한다.
<style> 기본 CSS 설정 :
style {
display: none;
}div
문서의 특정 부분을 정의한다.
리액트를 사용하면서, "가장 많이 사용하는 태그" 가 아닐까 생각된다.
공식 문서 상으로, <div> 태그는 HTML 문서 내부에서
분할, 혹은 구역을 정의한다.
그리고, div 는 다양한 HTML 요소들을 담은 컨테이너로서 사용된다.
그리고, 동일한 div 를 통해 컨테이너를 분할하더라도,
내부의 class 속성을 통해 쉽게 스타일링이 가능하다.
예시 :
<p>첫 번째 분할 구역 선언</p>
<div>플레인 div</div>
<p>두 번째 분할 구역 선언</p>
<div style="background-color : gray"></div>실제 표현 결과 :
첫 번째 분할 구역 선언
두 번째 분할 구역 선언
보다시피, <div> 태그는 기본 설정이 block 으로서, 하나의 줄을 차지한다.
<div> 기본 CSS 설정 :
div {
display: block;
}span
문서 내부의 특정 텍스트나, 구역을 정의한다.
div 태그가 블록 단위로 선언되어, 수많은 다른 태그들을 담을 수 있는 한편,
<span> 태그는 블록이 아니라, 텍스트 수준에서의 자유도를 올려주는 태그이다.
예시 :
<p><code>span</code> 태그에 어떠한 수정도 가하지 않은 경우</p>
span 태그는 마크다운에서 <span>색상을 바꾸고 싶은 경우에도</span> 사용합니다.
<br />
<p><code>span</code> 태그에 색상 스타일링을 추가 한 경우</p>
span 태그는 마크다운에서
<span style="color : skyblue">색상을 바꾸고 싶은 경우에도</span> 사용합니다.
<br />
<p><code>span</code> 태그에 백그라운드 색상으로 하이라이팅 한 경우</p>
span 태그는 백그라운드 색상을 통해
<span style="background-color : #567">하이라이팅</span> 을 가할 수 있습니다.실제 표현 결과 :
span 태그에 어떠한 수정도 가하지 않은 경우
span 태그는 마크다운에서 색상을 바꾸고 싶은 경우에도 사용합니다.
span 태그에 색상 스타일링을 추가 한 경우
span 태그는 마크다운에서 색상을 바꾸고 싶은 경우에도 사용합니다.
span 태그에 백그라운드 색상으로 하이라이팅 한 경우
span 태그는 백그라운드 색상을 통해 하이라이팅 을 가할 수 있습니다.
위의 실제 렌더링 예시를 보다시피, div 는 블럭 단위의 커스텀 블럭이며,
span 은 인라인 텍스팅 기반의 커스텀 스타일링 도구라고 볼 수 있다.
<span> 기본 CSS 설정 :
없음
header
문서나 특정 부분에 대한 헤더를 정의한다.
이 태그 또한 div 와 동일한 디폴트 css 를 가지지만,
그 태그의 이름에서 중요한 의미를 가진다.
즉, 이를 번역 해 보자면 "머릿말" 인데, 만약에 우리가 전체 글에서 특정 소제목을 정의하거나,
태그의 의미로서 특정 블록의 헤더들을 가독성 좋게 만들어 주는 역할도 수행하며,
css 스타일링 시 지정이 가능하다.
예시 :
<div
class="article"
style="border : 2px solid #567; padding : 1rem; border-radius : 1rem"
>
<header style="background-color : #765">
<h3>아티클 블록의 머릿말을 선언하기</h3>
</header>
<p>아티클 내부에 선언되는 Paragraph</p>
</div>실제 표현 결과 :
아티클 블록의 머릿말을 선언하기
아티클 내부에 선언되는 Paragraph
<header> 태그는 <div> 와 동일한 태그들의 컨테이너로서, 다른 태그를 담을 수 있다.
헤더 태그는 주로 이러한 태그들을 담는다 :
- 하나 이상의 헤딩 태그 (h1 ~ h6)
- 로고나 아이콘
- 저자의 정보
<header> 태그는 HTML 문서 내에서 여러번 선언이 가능하다.
그런데, 확실히 시멘틱(semantic) 태그라서 그런지,
<footer><address>- 또 다른
<header>
이러한 요소에는 들어갈 수 없다고 한다.
즉, 헤더의 역할을 확실히 지정해 주고 있다.
<header> 기본 CSS 설정 :
header {
display: block;
}hgroup
헤딩, 그리고 관련된 컨텐츠를 정의한다.
내부의 설명을 보고 <header> 와 다른 점이 무엇이 있나... 고민했다.
즉, <header> 태그는 아이콘이나 저자의 정보 등, 다양한 정보를 담는다.
그러나, <hgroup> 은 컨벤션 상 주로 <p> 와, <h1> ~ <h6> 까지의 헤딩 태그들을 담는다.
즉, 단순 태그의 기능 상으로는 구별이 되지 않지만,
다양한 컨텐츠가 늘어남에 따라, 헤딩을 묶고, 내부의 패러그래프들을 묶어 스타일링을 해야 할 때,
혹은 상호작용이 필요 할 때, 사용하는 태그라고 한다.
예시 :
<hgroup style="background-color : #654; padding : 2rem; border-radius : 1rem">
<h3>hgroup 태그 내부에 들어간 h3 태그이다.</h3>
<p>헤딩과 Paragraph 를 묶어 정리 할 때 사용한다고 한다.</p>
</hgroup>실제 표현 결과 :
hgroup 태그 내부에 들어간 h3 태그이다.
헤딩과 Paragraph 를 묶어 정리 할 때 사용한다고 한다.
<hgroup> 기본 CSS 설정 :
hgroup {
display: block;
}footer
문서나 특정 부분에 대한 아래 부분(하단)을 정의한다.
우리가 쿠팡이나, 네이버 등등 특정 사이트의 맨 하단까지 보면,
항상 copyright 나, 사업자 정보, 저자 정보 등등이 작성되어 있다.
이러한 정보들은 주로 footer 에 작성된다.
공식 문서에서 제시하는 태그들은,
- 저자 정보
- 저작권 정보
- 연락 정보
- 사이트맵
- 현재 사이트 맨 위로 가게 해 주는 링크
- 관련된 문서들
예시 :
<div style="padding : 1rem; border : 2px solid white; border-radius : 1rem">
<header style="background-color : #567; padding : 2rem; border-radius : 1rem">
<h3>공담형 드디어 이번 편으로 마지막으로 HTML 시리즈를 종료해..</h3>
<p>그동안의 노고는 충분했나?..</p>
</header>
<div style="padding : 1rem">
<p>
공담형 씨는 <b>코딩크리쳐</b> 라는 사이트에 HTML 태그 시리즈를 시작했었다.
</p>
<p>
이 당시 공담형 씨는 정식 스펙의 "모든" 태그들을 작성하자는 미친 생각을
했다.
</p>
<p>당시 공담형 씨는 간단하게 3편으로 종료될 줄 알았다고 전해..</p>
<p>현재는 매우 긴 길이의 장편으로 5편까지 마무리를 지었다고 전했다.</p>
</div>
<footer
style="background-color : #333; padding : 1rem; border-radius : 0.5rem"
>
<p><copyright>저자 : 공담순</copyright></p>
<p>
<a target="_blank" href="mailto:rhdwhdals8@naver.com"
>rhdwhdals8@naver.com</a
>
</p>
</footer>
</div>실제 표현 결과 :
공담형 드디어 이번 편으로 마지막으로 HTML 시리즈를 종료해..
그동안의 노고는 충분했나?..
공담형 씨는 코딩크리쳐 라는 사이트에 HTML 태그 시리즈를 시작했었다.
이 당시 공담형 씨는 정식 스펙의 "모든" 태그들을 작성하자는 미친 생각을 했다.
당시 공담형 씨는 간단하게 3편으로 종료될 줄 알았다고 전해..
현재는 매우 긴 길이의 장편으로 5편까지 마무리를 지었다고 전했다.
<footer> 기본 CSS 설정 :
footer {
display: block;
}main
문서의 주요 컨텐츠를 지정한다.
이 태그는 생각보다 중요한 의미를 가지는 태그이다.
번역 그대로 "주요" 컨텐츠를 담는 태그이기 때문에,
HTML 문서에는 하나의 <main> 만 가진다.
<main> 태그는,
<article><aside><footer><header><nav>
태그들의 자식과 후손이 되면 안된다. (하위 태그이면 안된다는 의미)
HTML 문서에서 <main> 태그 내부의 컨텐츠는 유일해야 한다.
문서 전반에 걸쳐 반복되는 태그들은 담지 않도록 주의해야 한다고 말한다.
예시 : 사이드바, 링크, 저작권 정보, 사이트 로고들, 검색 폼 등등..
즉, 페이지를 이동해도 동일한 컨텐츠를 가지고 있는 태그들은 사용하지 말라는 의미이다.
이를 보면, <main> 태그는 상위에 위치해야 하지만,
사이트의 목적에 따라, 페이지 이동 시 달라지는 컨텐츠만 담으라는 의미이다.
예시 :
<!-- <body> -->
<main>
<article class="describe">
<h3>http란?</h3>
<p>HyperText Transper Protocol 의 약자이다.</p>
</article>
<article class="describe">
<h3>컨테이너란 무엇을 의미하나?</h3>
<p>
도메인에 따라 의미가 달라지는데, 서버를 담거나, 코드를 담는다는 의미로
주로 나뉜다.
</p>
</article>
</main>
<footer>
<p><copyright>저자 : 공담순</copyright></p>
<p>
<a target="_blank" href="mailto:rhdwhdals8@naver.com"
>rhdwhdals8@naver.com</a
>
</p>
</footer>
<!-- </body> -->실제 표현 결과 :
http란?
HyperText Transper Protocol 의 약자이다.
컨테이너란 무엇을 의미하나?
도메인에 따라 의미가 달라지는데, 서버를 담거나, 코드를 담는다는 의미로 주로 나뉜다.
<main> 기본 CSS 설정 :
main {
display: block;
}section
문서 내부의 특정 부분을 정의한다.
이것도 div 와 동일한 속성을 가지고 있는데,
어떤 컴포넌트를 작성 할 때, 특정 "구역" 으로 나눌 필요가 있을 때 사용한다.
<section> 태그는 <div> 와 동일하게 자유도가 굉장히 높은 태그라고 생각한다.
예시 :
<section
style="background-color : #567; padding : 1rem; border-radius : 0.5rem"
>
<h3>섹션 1</h3>
<p>컨테이너로서 대부분의 태그를 담을 수 있음.</p>
</section>
<section
style="background-color : #567; padding : 1rem; border-radius : 0.5rem"
>
<h3>섹션 2</h3>
<p>컨테이너로서 대부분의 태그를 담을 수 있음.</p>
</section>실제 표현 결과 :
섹션 1
컨테이너로서 대부분의 태그를 담을 수 있음.
섹션 2
컨테이너로서 대부분의 태그를 담을 수 있음.
<section> 기본 CSS 설정 :
section {
display: block;
}search
검색 부분을 정의한다.
사실, 태그 이름만 다르지, <div> 와 <section>, <header> 태그들은
기본 스타일이 동일하다. (display : block;)
하지만, 태그 이름에서 사용처가 구별되는 것 처럼, 이 태그 또한 동일하다.
이 태그는 주로, 내부에 <form> 과 <input> 요소들을 넣는 데 집중한다.(컨벤션)
예시 :
<button onclick="getAllTags()">모든 태그 정보 가져오기</button> <br />
<section style="padding : 2rem; border : 2px solid white;">
<search>
<form>
어떤 태그를 원하시나요? <br />
<br />
<input
id="search-input"
list="search-datalist"
style="width : 16rem; padding : 0.25rem"
placeholder="위 버튼 클릭 시, 데이터를 불러 올 수 있습니다."
/>
<br />
<br />
<input
onclick="gotoTag()"
type="button"
value="이동"
style="padding : 0.25rem;"
/>
</form>
</search>
</section>
<div id="search-warn"></div>
<datalist id="search-datalist"> </datalist>
<script>
const datalistDOM = document.getElementById("search-datalist");
const inputDOM = document.getElementById("search-input");
const warnDOM = document.getElementById("search-warn");
// 이 페이지에 선언된 모든 태그를 가져 온다.
let allTags;
function getAllTags() {
allTags = document.querySelectorAll("h3 > a");
let datalistInnerHTML = "";
for (let i = 0; i < allTags.length; i++) {
const text = allTags[i].innerText;
datalistInnerHTML += `<option value="${text}"/>`;
}
datalistDOM.innerHTML = datalistInnerHTML;
}
function gotoTag() {
const currInputText = inputDOM.value;
let findTag;
for (let i = 0; i < allTags.length; i++) {
const currTagText = allTags[i].innerText;
if (currTagText === currInputText) {
findTag = allTags[i];
break;
}
}
if (!findTag) {
warnDOM.innerHTML = `<p style="color : red">입력에 일치하는 태그가 없습니다.</p>`;
} else {
warnDOM.innerHTML = "";
findTag.scrollIntoView({
behavior: "smooth",
block: "center",
});
}
}
</script>실제 표현 결과 :
위와 같이 사용할 수 있다.
전 편에도 내가 이러한 방식으로 구현했는데, 다듬어 지지 않은 부분이 많다.
또한 블로그 내부 상으로 제약이 걸려있는 메서드들이 존재하여 우회했다.
만약에 이 글을 읽고 있으시다면,
lodash라이브러리를 사용하여 최적하 하시길 바랍니다.
<search> 기본 CSS 설정 :
search {
display: block;
}article
아티클을 정의한다.
사실, 이 태그도 display : block 을 디폴트로 가지고 있다.
section, div, article 셋 다 동일한 블럭 형태이다.
그렇다면, article 은 주로 어디에 사용해야 할까?
우선, article 을 번역하자면, "기사(뉴스)" 이다.
즉, 주제가 정해진 일종의 문장이라고 보면 되겠다.
div 는 커스텀 블록을 의미하며,
section 은 특정 구역 을 의미하며,
article 은 특정 주제를 가진 글을 의미한다.
따라서, 공식문서에서는 3 가지의 주요 목적을 가르킨다.
- 포럼 포스팅
- 블로그 포스팅
- 뉴스 이야기
<article> 태그를 사용하되,
자신의 웹 페이지 스타일에 맞는 css 를 구성하여 사용하면 된다.
예시 :
<article
class="article-group"
style="padding : 1rem; border : 3px solid white; border-radius : 2rem"
>
<article class="chrome">
<h3>크롬</h3>
<p>크롬은 가장 대표적으로 사용되는 구글의 검색엔진 프로그램입니다.</p>
</article>
<article class="naver whare">
<h3>네이버 웨일</h3>
<p>네이버 웨일은 네이버를 자주 사용하는 사람에게 유용합니다.</p>
</article>
</article>
<script>
const group = document.querySelector(".article-group");
const articles = group.children;
for (let i = 0; i < articles.length; i++) {
const node = articles[i];
node.style = `background-color : #567`;
}
</script>실제 표현 결과 :
크롬
크롬은 가장 대표적으로 사용되는 구글의 검색엔진 프로그램입니다.
네이버 웨일
네이버 웨일은 네이버를 자주 사용하는 사람에게 유용합니다.
위와 같은 형식으로 사용 할 수 있다.
안타깝게도, 블로그 전체 스타일 적용은 이 글 뿐만 아니라,
블로그 내의 모든 페이지, 글에 적용되기 때문에,
JS 로 어떻게 스타일을 간단하게 추가할 수 있는지 작성 해 보았다.
<article> 기본 CSS 설정 :
article {
display: block;
}aside
페이지 컨텐츠 외 부분을 정의한다.(외부 컨텐츠)
<aside> 태그 또한, display : block 을 디폴트로 가지고 있다.
이 태그의 용도는, 현재 작성되고 있는 글의 흐름에서, 많이, 혹은 적게 벗어난 글을 작성하는 데 사용된다.
완전히 벗어났다기 보다는, 주변 내용과 간접적으로 연관되어야 한다는 것이다.
공식문서에서 주어진 팁은, <aside> 태그가 주로 사이드바로 배치된다는 것이다.
예시 :
<div
class="aside-div"
style="display : flex; padding : 0.5rem; border : 2px solid white;"
>
<!-- 여기에 스크립트로 "모든 태그" 로 이동할 수 있는 사이드바를 만들어 보기(동적) -->
<aside
class="side-bar"
style="width : 4rem; padding : 0.25rem; border : 2px solid skyblue;"
>
<!-- 모든 태그를 읽어 내부 html 을 구성 할 예정 -->
</aside>
<!-- 메인 컨텐츠 -->
<article class="aside-article">
<h3>메인 콘텐츠 형식</h3>
<hr />
<div class="aside-contents">
<p>이러한 스타일로 사이드바를 보며, 주요 컨텐츠를 볼 수 있어용</p>
<p>
주로 하나의 문단을 정의 할 때, <code>p</code> 로 쉽게 나누기도 가능하죠.
</p>
</div>
</article>
</div>
<script></script>실제 표현 결과 :
메인 콘텐츠 형식
이러한 스타일로 사이드바를 보며, 주요 컨텐츠를 볼 수 있어용
주로 하나의 문단을 정의 할 때, p 로 쉽게 나누기도 가능하죠.
<aside> 기본 CSS 설정 :
aside {
display: block;
}details
유저가 보거나, 유저로부터 감춰진 추가적인 세부사항을 정의한다.
먼저, 내부에 <summary> 라는 태그가 들어가는데,
이 태그는 토글이 닫혀 있는 상태이더라도, 외부에 보이는 상태이다.
그러나, <details> 의 토글을 연다면, <summary> 태그 외에 작성된 모든 컨텐츠들이 보인다.
일종의 문장 토글 버튼이라고 생각이 든다. (<summary>, <details> 는 연결되어 있는 태그이다.)
예시를 보면, 바로 이해할 수 있다.
예시 :
<details>
<summary>Summary 태그 텍스트</summary>
<p>
이것이 토글 버튼을 누르면 보이는 텍스트이며, <code>details</code> 블록이다.
</p>
</details>실제 표현 결과 :
Summary 태그 텍스트
이것이 토글 버튼을 누르면 보이는 텍스트이며, details 블록이다.
<details> 특수 속성 :
open: 이 속성을 이용하여 JS 로 열고 닫기를 수행할 수 있다.
<details> 기본 CSS 설정 :
details {
display: block;
}dialog
대화 박스나 특정 창을 정의한다.
굉장히 유용한 태그라고 생각하는데,
모달 창을 띄우거나, 대화 창을 만드는 데에 특화된 태그이다.
내부 속성 open 을 통해서 드러내거나, 속성을 없애서 보이지 않게 만들 수 있다.
재밌는 것이, 마치 중앙에 뜬금없이 뜨는 것 처럼 보이더라도,
현재 사이에 있는 block 의 중앙에서 모달 창이 시작하는 것을 볼 수 있다.
예시 :
<div>
<p>텍스트 1</p>
<p>텍스트 2</p>
<p>텍스트 3</p>
<dialog id="dialog-dom" style="width : 70%; height : 5rem">
이게 보인다면, 대화 창, 모달 창 이 떠 있는 상태입니다.
</dialog>
<p>텍스트 4</p>
<p>텍스트 5</p>
<button onclick="dialogToggle()">모달 창 토글</button>
</div>
<script>
// 처음에는 띄워지지 않았음.
let isOn = false;
const dialogDOM = document.getElementById("dialog-dom");
function dialogToggle() {
if (isOn) {
dialogDOM.open = false;
isOn = !isOn;
} else {
dialogDOM.open = true;
isOn = !isOn;
}
}
</script>실제 표현 결과 :
텍스트 1
텍스트 2
텍스트 3
텍스트 4
텍스트 5
<dialog> 기본 CSS 설정 :
없음
summary
<details> 요소에 대한 가시적(보여지는) 헤딩을 정의한다.
이미 거의 직전에 <details> 에 대해서 다루었는데,
토글 버튼을 통해서 블록을 보여지게 만들 수 있는 태그였다.
그런데, 토글 버튼과 함께 보여지는 텍스트가 존재했다.
이 텍스트가 바로 <summary> 이다.
예시 :
<details>
<summary>
이 텍스트는 토글이 닫힌 상태에서 보여지는 <code>details</code> 텍스트이다.
</summary>
<p>토글이 열렸기에, 이 부분이 보인다.</p>
</details>실제 표현 결과 :
이 텍스트는 토글이 닫힌 상태에서 보여지는 details 텍스트이다.
토글이 열렸기에, 이 부분이 보인다.
<summary> 기본 CSS 설정 :
summary {
display: block;
}data
주어진 컨텐츠에, 기계가 읽을 수 있는 값을 추가한다.
단순한 텍스트에 특정 데이터를 부여하기 위해 사용하는 태그이다.
그런데, 현재 Safari 에서 지원하지 않는 것을 보아 사용하지 않는 태그일 확률이 매우 높다.
따라서, W3Schools 의 예시를 가져오겠다.
예시 :
<ul>
<li><data value="21053">Cherry Tomato</data></li>
<li><data value="21054">Beef Tomato</data></li>
<li><data value="21055">Snack Tomato</data></li>
</ul>실제 표현 결과 :
- Cherry Tomato
- Beef Tomato
- Snack Tomato
<data> 기본 CSS 설정 :
없음
Category - Meta Info (메타 정보 태그)
head
문서에 대한 정보를 정의한다.
<head> 태그는 메타데이터에 대한 컨테이너이다.
그리고, <html> 태그 내부에 선언되며, <body> 가 선언되기 전에 시작되고 끝난다.
<head> 태그에 들어가는 메타데이터들은 말 그대로
- 문서의 제목
- 문자열 집합
- 스타일
- 스크립트
- 또 다른 메타 정보
를 정의한다.
<head> 태그에는 이러한 요소들이 들어간다 :
<title>: 문서 제목<style>: 문서의 스타일을 지정<base>: 문서에 선언될href와target기본 속성을 선언한다.<link>: 문서와 연결된 또 다른 문서 (스타일 문서가 대부분임)<meta>: 메타데이터 선언<script>: JS 코드를 선언<noscript>: JS 코드가 지원되지 않는 기기에서 이 코드를 사용
현재 <head> 태그는 이미 블로그 문서에 선언되어 있어서, W3Schools 예시롤 보자.
예시 :
<html>
<head>
<!-- 경로만 선언될 모든 리소스, 혹은 하이퍼링크의 접두어로 추가된다. -->
<base href="https://www.w3schools.com/" target="_blank" />
</head>
<body>
<img src="images/stickman.gif" width="24" height="39" alt="stickman" />
<a href="tags/tag_base.asp">HTML base Tag</a>
</body>
</html>실제 표현 결과 :
위의 예시에서 스틱맨이 보이는 이유는,
현재 모든 소스의 경로를 "전체 경로" 로 만들었기 때문이다.
<head> 기본 CSS 설정 :
head {
display : none;
}meta
HTML 문서에 대한 메타데이터를 정의한다.
이 문서가 어떻게 인코딩되어야 할 지 정의하고,
검색 엔진에서 어떤 키워드로 검색 되는지를 정의하고,
저자는 누구이며, 반응형 웹에서 어떻게 크기를 형성해야 하는지 정의한다.
SEO 에서 굉장히 중요한 태그이다.
메타데이터는 브라우저에서 사용되며, viewport 를 통해 반응형 웹에서 알맞게 크기를 조정한다.
이 또한 <head> 내부에 들어가기 때문에, W3Schools 의 예제를 살펴보자.
예시 :
<head>
<meta charset="UTF-8"/>
<!-- 웹 페이지의 설명 -->
<meta name="description" content="무료 웹 Tutorials" />
<!-- 검색 엔진에 대한 키워드를 정의 -->
<meta name="keywords" content="HTML, CSS, JavaScript" />
<!-- 페이지의 저자를 정의 -->
<meta name="author" content="공담형" />
<!-- 모든 기기에서 웹사이트가 보기 좋아지게 만들려면 이렇게 세팅. -->
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
</head>특히, viewport 설정은 브라우저에게 특정 지침(스케일링을 어떻게 하고..) 을 내린다.
width=device-width 부분은 웹 페이지의 너비를 기기의 너비로 맞춘다.
initial-scale=1.0 부분은 브라우저가 처음 로드되었을 때의 페이지 줌 레벨로 초기화 한다.
실제 표현 결과 :
없음`
<meta> 태그의 특수 속성들 :
charset: HTML 문서에 대한 인코딩 문자를 지정content:http-equiv혹은name속성에 관련된 값을 지정한다 (텍스트)http-equiv: 컨텐츠 속성의 정보와 값에 대한 HTTP 헤더를 제공한다.- content-security-policy
- content-type
- default-style
- refresh
name: 메타 정보의 이름을 지정- application-name
- author
- description
- generator
- keywords
- viewport
<meta> 기본 CSS 설정 :
없음.
base
문서의 모든 상대적 URL 에 대한 "기본" URL 과 대상을 지정한다.
문서 내 존재하는 모든 상대 경로 URL 에 대한 기본 URL 과 타겟을 지정한다.
<base> 태그는 href, target 속성 둘 중 하나는 무조건 가지거나, 둘 다 가진다.
<base> 요소는 문서에 단 하나만 존재하는데, 무조건 <head> 요소 내부에 들어가야 한다.
W3Schools 예시를 보자.
예시 :
<head>
<base href="https://www.w3schools.com/" target="_blank">
</head>
<body>
<img src="images/stickman.gif" width="24" height="39" alt="Stickman">
<a href="tags/tag_base.asp">HTML base Tag</a>
</body>위에서 이미지는 https://www.w3schools.com/images/stickman.fig 경로를 가지게 되며,
하이퍼링크의 참고경로는, https://www.w3schools.com/tags/tag_base.asp 경로이다.
실제 표현 결과 :
위의 코드를 그대로 표현 할 수는 없다.
<base> 특수 속성들 :
href: 페이지 내부의 모든 상대 경로들에 대한 기본 경로를 지정target: 페이지의 모든 form 이나, 하이퍼링크에 대한 기본 타겟을 지정한다.- _blank
- _parent
- _self
- _top
<base> 기본 CSS 설정 :
없다
Category - Programming (프로그래밍 관련 태그들)
script
클라이언트 측의 JS 스크립트를 정의한다.
내가 HTML 태그 모두 다르기 시리즈를 작성하면서 정말 많이 사용한 태그이다.
단순한 정적 HTML 문서 내부에서 표현되는 데이터를 동적으로 만들거나,
유저와의 인터랙션을 추가할 수 있게 만들어 준다.
그리고, 웹 개발 시 <head> 내부에 <script> 가 대부분 들어가는데,
이러한 태그들을 이해하기 위해서 속성을 이해하는 것이 필수적이라고 생각된다.
예시 :
<div id="script-sample">0</div>
<button onclick="plus()">+1</button> <button onclick="minus()">-1</button>
<script>
const sampleDOM = document.getElementById("script-sample");
function plus() {
const currVal = sampleDOM.innerText;
let result = parseInt(currVal) + 1;
sampleDOM.innerText = result;
}
function minus() {
const currVal = sampleDOM.innerText;
let result = parseInt(currVal) - 1;
sampleDOM.innerText = result;
}
</script>실제 표현 결과 :
위에서 작성한 스크립트는 내부에 작성되었는데, 나는 예제를 보여주거나,
"아주 간단하고, 다시는 반복 사용되지 않을 메서드와 변수" 를 사용할 때 괜찮다고 생각한다.
보통은 <head> 내부에 <script> 를 넣어서 전역 변수, 메서드를 선언하여
반응형 웹 사이트를 구축하는 편이다.
또한, 브라우저 자체에서 다양한 라이브러리를 CDN 으로 가져오기 위해 사용하기도 한다.
<script> 특수 속성들 (중요) :
async: 이 스크립트가 페이지가 파싱되는 동안, 병렬로 다운로드 할 지 지정하고, 가능 한 빨리 실행한다.crossorigin: HTTP CORS 요청의 모드를 세팅한다.anonymous: 누구나use-credentials: 중요 정보 사용
defer: 이 스크립트가 페이지 파싱과 동시에 다운로드(병렬)하고, 페이지 파싱 후 실행한다.integrity: 브라우저는 조작된 소스를 절대로 로드하지 않는다는 것을 보장한다.- filehash : 파일 해시 텍스트
nomodule: ES2015 모듈을 지원하는 브라우저에서 스크립트가 실행되지 않도록 지정- True
- False
referrerpolicy: 스크립트를 요청 할 때 보낼 참조 정보를 지정한다.no-referrerno-referrer-when-downgradeoriginorigin-when-cross-originsame-originstrict-originstrict-origin-when-cross-originunsafe-url
src: 외부 스크립트 파일의 URL 을 의미한다.type: 스크립트의 미디어 타입을 지정한다.
<script> 기본 CSS 설정 :
script {
display : none;
}noscript
클라이언트 측 JS 스크립트를 지원하지 않는 유저들을 위한 대체적인 컨텐츠를 정의한다.
스크립트가 지원되지 않는 오래된 기기를 위해서이기도 하지만,
스크립트 실행 자체를 브라우저에서 중지시킨 사용자들을 위해 작성하는 태그이기도 하다.
예시 :
<script>console.log("스크립트가 브라우저에서 실행된다");</script>
<noscript>스크립트가 실행되지 않습니다.</noscript>실제 표현 결과 :
<noscript> 기본 CSS 설정 :
없음
embed
외부 리소스에 대한 컨테이너를 정의한다.
더이상 사용되지 않는 태그라고 한다.
그 이유가, 대부분의 브라우저가 더 이상 Java 애플릿과, 관련 플러그인을 지원하지 않기 때문이다.
또한, 현재 ActiveX 가 사용되지 않기 때문이다.
대신하여 사용할 수 있는 태그들이, <img>, <iframe>, <video>, <audio> 태그로 대체한다.
한번 W3Schools 예시를 보자.
예시 :
<embed type="image/jpg" src="pic_trulli.jpg" width="300" height="200">
<embed type="text/html" src="snippet.html" width="500" height="200">
<embed type="video/webm" src="video.mp4" width="400" height="300">실제 표현 결과 :
브라우저에서 지원하지 않는다.
<embed> 기본 CSS 설정 :
embed:focus {
outline : none;
}object
외부 리소스에 대한 컨테이너를 정의한다.
이것도 현재 사용되지 않는데, 위의 <embed> 태그와 동일한 상황이다.
이미지, iframe, 영상, 오디오 등등을 넣는 데 사용했다고 한다.
이는 위와 동일하기 때문에, 생략하도록 하겠다.
param
객체에 대한 파라미터를 정의한다.
원래 바로 위에서 말한 <object> 에 사용되는 태그라던데,
왜 이 태그는 사장되지 않았는가? 궁금했다.
왜 그런가 했더니, 문서의 id 탐색을 통해서, 선언한 <param> 의 값을 가져올 수 있다.
예시 :
<param id="param-name" value="param-Result">
<div id="param-result"></div>
<script>
const paramDOM = document.getElementById("param-name");
const resultDOM = document.getElementById("param-result");
resultDOM.innerText = paramDOM.value;
</script>실제 표현 결과 :
<param> 기본 CSS 설정 :
없음
HTML 태그 장편을 마무리하며 배운 것. (드디어 드디어 ㅠㅠ)
정말 많기도 하던 HTML의 "모든" 태그를 작성했다.
와..... 정말 생각보다 HTML5 정식 스펙의 태그들이 많다는 것을 뼈에서부터 알게 되었다.
마무리를 하며, 여기까지 다룬 모든 HTML 태그들의 카테고리 리스트는 이러하다 :
- Basic HTML - 기본 HTML 태그
- Formatting - 형식 태그
- Forms and Input - 폼과 입력
- Frames - iframe 하나
- Images - 이미지 와 캔버스, svg 관련 태그
- Audio / Video - 오디오와 비디오, 소스 태그
- Links - 하이퍼링크 관련 태그
- Lists - ul, ol 및 리스트 관련 태그
- Tables - 테이블과 내부 구성 태그
- Styles and Semantics - 스타일 태그와 컨벤션으로 지정된 시멘틱 태그들
- Meta Info - 웹 사이트에 선언되는 메타 정보 태그들
- Programming - HTML 내부 프로그래밍 관련 태그들.
태그의 정의, 실제 코드 구성 예제, 코드의 렌더링 결과, 특수 속성, 기본 css 까지 모두 다루었다.
이 과정에서 긴 글을 가진 아티클을 총 5개를 만들게 되었지만,
결과적으로 단일 HTML 문서에서 유저와의 인터랙션, 렌더링, 텍스팅을 위해
어떤 태그들이 탄생했으며, 역사 속으로 사라졌는지 알 수 있었다.
나는 NPM 과, Node.js 엔진, package.json, tsconfig.json
JavaScript, TypeScript 에 대해서 이미 공부를 마쳤다.
이제는 React 를 공부해도 기술적 부채가 발생 할 일은 거의 없을 것이다... 라고 생각하긴 한다.
(React 를 구성하는 또 다른 라이브러리의 관계를 이해 못하는 것은 아마 조그마한 부채가 되지 않을까?)
이제, React 를 제대로 다시 다뤄보려고 한다.
만약에 이 글을 읽어주신 분이 있다면 너무 감사드리다고 말씀드리고 싶다.
END
참고 사이트
W3Schools HTML Element Reference
'Web-Server > 웹 지식' 카테고리의 다른 글
| HTML 문서 정식 태그 "전부" 공부하기 - 4편 (코드 작성 및 구현까지) (0) | 2025.05.30 |
|---|---|
| HTML 문서 정식 태그 "전부" 공부하기 - 3편 (코드 작성 및 구현까지) (1) | 2025.05.28 |
| HTML 문서 정식 태그 "전부" 공부하기 - 2편 (코드 작성 및 구현까지) (0) | 2025.05.26 |
| HTML 문서 정식 태그 "전부" 공부하기 - 1편 (코드 작성 및 구현까지) (0) | 2025.05.24 |
| 웹 서버는 무엇이고 Local, Production 의 차이는 무엇일까? (0) | 2025.05.13 |
