제목 : HTML 문서 태그 공부하기 - 3편
2편 글 주소
https://codecreature.tistory.com/218
이 글을 작성하는 이유
나는 정식 스펙상에 존재하는 "모든" HTML 태그들을 공부하고 있다.
이는 어찌 보면 미련한 짓일수도 있고, 미친짓을 하는 것일 수도 있다.
그러나, 앞으로 다양한 웹 프레임워크와 라이브러리는 종류가 다양해지고 있는데,
트렌드를 따라가기 위해 위 프로그램들의 공식문서를 보며, 공부하는 것도 괜찮다고 생각한다.
그러나, 지속적으로 점유율이 바뀌고 있는 프로그램들을 살펴보았을 때,
내가 적용하고자 하는 웹 라이브러리와 프레임워크가 존재 할 때,
이러한 태그를 왜 사용해야 하는지, 공식문서에서 간단한 헤더 영역을 만들 때,
왜 해당 태그를 사용하는지 이해하지 못한 상태로 공부하고 싶지는 않았다.
그리고 특히, 해당 태그들이 가지는 일종의 "컨벤션"과 Default 스타일을 알고 싶었다.
그리고, 태그들이 가지는 여러 속성들도 공부하며, 어떤 상황에 사용하는 것이 적합한지 알고 싶었다.
2편까지 한 70 개 정도의 태그들을 다뤘다.
- 기본적인 HTML 태그
- 인라인 Formatter 태그
- Form 과 Input 관련 태그들
블로그에 실제 인라인 예시와 form and input 관련 태그 예시들을 실제로 블로그에 구현하는 과정에서
내가 예상했던 글 작성 속도가 늦춰지게 되었다.
그러나, 이 과정에서 다시 웹 태그 작성 스킬이 조금씩 늘어나는 것을 느낄 수 있었다.
조금만 더 하면, 이제 모든 태그들을 알 수 있게 된다.
Category - Images (이미지)
img
이미지를 정의한다.
이미지 태그는 주어지는 src 속성에 따라 유연하게 여러 소스들을 표현한다.
jpg, jpeg, gif, png 등등 여러 소스를 유연하게 파싱하여 표현한다.
그리고, <img> 태그는 src, alt 라는 속성을 필수로 가져야 한다.
src: 이미지를 가져 올 장소 혹은 소스alt: 이미지 표시에 실패했을 때, 대신 보여줄 텍스트 혹은 이미지
그리고, 이미지를 클릭했을 때, 특정 사이트로 안내 해 주고 싶다면,
<a> 태그 내부에 <img> 를 넣어 안내 할 수 있다.
예시 :
<p>
이미지에서
<img
src="https://img1.daumcdn.net/thumb/C428x428/?scode=mtistory2&fname=https%3A%2F%2Ftistory1.daumcdn.net%2Ftistory%2F6142901%2Fattach%2Feaf30c1affbe45adb0179071560647bc"
alt="내 블로그 유저 이미지"
width="50"
height="50"
/>
src 속성이 올바르게 로딩되었을 때
</p>
<p>
이미지에서
<img
src=""
alt="내 블로그 유저 이미지"
width="50"
height="50"
/>
src 속성이 로딩되지 못했을 때
</p>
<p>
이미지에서
<img
src="https://img1.daumcdn.net/thumb/C428x428/?scode=mtistory2&fname=https%3A%2F%2Ftistory1.daumcdn.net%2Ftistory%2F6142901%2Fattach%2Feaf30c1affbe45adb0179071560647bc"
alt="내 블로그 유저 이미지"
width="50"
height="50"
style="vertical-align : bottom;"
/>
style 이 vertical-align : bottom 일 때
</p>
<p>
이미지에서
<img
src="https://img1.daumcdn.net/thumb/C428x428/?scode=mtistory2&fname=https%3A%2F%2Ftistory1.daumcdn.net%2Ftistory%2F6142901%2Fattach%2Feaf30c1affbe45adb0179071560647bc"
alt="내 블로그 유저 이미지"
width="50"
height="50"
style="vertical-align : middle;"
/>
style 이 vertical-align : middle
</p>
<p>
이미지에서
<img
src="https://img1.daumcdn.net/thumb/C428x428/?scode=mtistory2&fname=https%3A%2F%2Ftistory1.daumcdn.net%2Ftistory%2F6142901%2Fattach%2Feaf30c1affbe45adb0179071560647bc"
alt="내 블로그 유저 이미지"
width="50"
height="50"
style="vertical-align : top"
/>
style 이 vertical-align : top
</p>
<p>
이미지에서
<img
src="https://img1.daumcdn.net/thumb/C428x428/?scode=mtistory2&fname=https%3A%2F%2Ftistory1.daumcdn.net%2Ftistory%2F6142901%2Fattach%2Feaf30c1affbe45adb0179071560647bc"
alt="내 블로그 유저 이미지"
width="50"
height="50"
style="float : right"
/>
style 이 float : right 일 때
</p>
<p>
이미지에서
<img
src="https://img1.daumcdn.net/thumb/C428x428/?scode=mtistory2&fname=https%3A%2F%2Ftistory1.daumcdn.net%2Ftistory%2F6142901%2Fattach%2Feaf30c1affbe45adb0179071560647bc"
alt="내 블로그 유저 이미지"
width="50"
height="50"
style="float : left"
/>
style 이 float : left 일 때
</p>
<p> 이미지에서
<img
src="https://img1.daumcdn.net/thumb/C428x428/?scode=mtistory2&fname=https%3A%2F%2Ftistory1.daumcdn.net%2Ftistory%2F6142901%2Fattach%2Feaf30c1affbe45adb0179071560647bc"
alt="내 블로그 유저 이미지"
width="50"
height="50"
style="margin : 0px 50px"
/>
양 옆 마진을 50 픽셀을 넣어줄 때
</p>실제 표현 결과 :
이미지에서
이미지에서
src 속성이 로딩되지 못했을 때
이미지에서
이미지에서
이미지에서
이미지에서
이미지에서
이미지에서
<img> 속성들 :
alt: 이미지를 대신 할 수 있는 텍스트 지정crossorigin: Third-Party(다른 사이트) 에서 이미지를 가져올 수 있게 허용할 수 있음anonymous: 허용use-credentials: 같은 origin 이어야만 허용
height: 높이width: 넓이ismap: 서버 측의 이미지 map 인지 지정한다.loading: 브라우저가 로딩 될 때 바로 이미지를 구현 할 지, 특정 조건 만족 시 까지 기다릴지 지정eager: 즉시lazy: 천천히
longdesc: 이미지에 대한 자세한 설명을 가진 URL 을 지정referrerpolicy: 참조 정책 - 이미지는 저작권에 관련이 되어 있으므로.- 다양한 값이 있으므로, 여기 를 참조
sizes: 다양한 페이지 레이아웃에 대한 이미지 크기를 지정src: 이미지의 경로 혹은 소스를 지정srcset: 경로 혹은 소스에 대한 리스트이며, 서로 다른 상황에 사용할 이미지 파일들의 배열usemap: EX - (#mapname) 클라이언트 측의 이미지 map 을 지정
<img> 기본 CSS 설정 :
img {
display : inline-block;
}map
클라이언트 측의 이미지 map 을 정의한다.
도대체 이 map 이라는 것이 무엇인가? 모르겠었는데,
이미지 내부에서 우리가 지정한 map 영역 을 클릭하면,
상호작용 할 수 있게 해 주는 태그이다.
그러니까, 우리가 옛날에 플래시 게임. 즉, 예를 들어 퍼즐 플래시 게임같은 것을 할 때,
우리는 단서를 찾기 위해서 마우스를 모든 곳에 클릭 해 본 경험이 있을 것이다.
같은 기술을 아니지만, 거의 비슷한 경험을 주는 태그이다.
이것을 도대체 어떻게 구현해야 할까.... 하다가,
위에서 사용한 나의 유저 이미지를 다시 활용하기로 했다.
상단부터 절반까지, 해당 영역을 클릭 시, 나의 블로그 메인으로 새 창이 띄워질 것이다.
라고 생각했는데,
블로그 글 자체가 샌드박스화 되어 있어
<map> 내부의 area 에서 창을 따로 띄울 수 없었다.
따라서, area 에 따로 onclick 을 달아 상호작용만 확인 할 수 있게 바꿨다.
예시 :
<p>
<img
src="https://img1.daumcdn.net/thumb/C428x428/?scode=mtistory2&fname=https%3A%2F%2Ftistory1.daumcdn.net%2Ftistory%2F6142901%2Fattach%2Feaf30c1affbe45adb0179071560647bc"
alt="내 블로그 유저 이미지"
width="200"
height="200"
usemap="#map-test"
id="map-img"
/>
<map name="map-test" id="map-test">
</map>
</p>
<div id="map-result"></div>
<script>
const mapDOM = document.getElementById("map-test");
const imgDOM = document.getElementById("map-img");
const resultDOM = document.getElementById("map-result");
let isMapOn = false;
mapDOM.innerHTML = `
<area
shape="rect"
coords="0,0,${imgDOM.width},${imgDOM.height / 2}"
alt="test"
onclick="mapFunc()"
/>
`;
function mapFunc() {
if(isMapOn) {
resultDOM.innerHTML = "";
isMapOn = !isMapOn;
} else {
resultDOM.innerHTML = `<p>이미지 상단을 클릭하셨습니다. 이 문구를 없애려면 한 번 더 클릭하세요.</p>`;
isMapOn = !isMapOn;
}
}
</script>실제 표현 결과 :
이미지 상단을 클릭해 보면, 문구가 나올텐데,
이제 한 번 더 상단을 클릭 해 보면, 해당 문구를 사라지게 스위칭 함수로 제작했다.
<map> 속성 :
name:img가 참조할 일종의map의id이름을 지정한다.
<map> 기본 CSS 설정 :
map {
display : inline;
}area
이미지 map 내부의 영역을 정의한다.
위에서 사용했던 것을 보면 된다.
만약에, 이미지를 클릭 시 페이지를 이동하도록 만들고 싶다면,
W3Schools 의 예제를 보면 알 수 있다.
예시 :
<img src="planets.gif" width="145" height="126" alt="Planets"
usemap="#planetmap">
<map name="planetmap">
<area shape="rect" coords="0,0,82,126" href="sun.htm" alt="Sun">
<area shape="circle" coords="90,58,3" href="mercur.htm" alt="Mercury">
<area shape="circle" coords="124,58,8" href="venus.htm" alt="Venus">
</map>위의 예제는 이미지에 대한 영역 선언과 함께, 어떠한 방식으로 연결시키는지 볼 수 있다.
나의 사이트에서는 이를 구현 할 수 없는데,
이는 내 사이트에 sum.htm, mercur.htm, venus.htm 에 대한 페이지 소스가 없을 뿐만 아니라,
planets.gif 에 대한 리소스도 없다.
리소스 주소가 아니라, 리소스 경로를 의미하므로, 이는 웹 사이트 서버 (웹 서버) 에 요구하는 것인데,
내 블로그에는 그런 리소스를 탑재하지 않았다.
실제 표현 결과 :
<area> 기본 CSS 설정 :
area {
display : none;
}canvas
JavaScript 를 통해 그래픽을 그리는 데 사용되는 태그이다.
예제를 보니까, 대부분의 작업을 JS 를 이용하여 컨텍스트를 추출하고,
해당 컨텍스트 기능을 통하여 <canvas> 에 그림을 그리는 기능을 가지고 있다.
기본 속성으로 width, height 를 가지고 있으며, 기본 값은 각각 300, 150 으로,
수평으로 길게 되어 있다.
예시 :
<canvas id="canvas-test-1">
렌더링 안 되면 이 텍스트가 나옴
</canvas>
<script>
const canvas1 = document.getElementById("canvas-test-1");
const context1 = canvas1.getContext("2d");
context1.fillStyle = "red";
context1.fillRect(0, 0, canvas1.width, canvas1.height);
context1.fillStyle = "green";
context1.fillRect(0, 0, canvas1.width, canvas1.height / 2);
context1.fillStyle = "blue";
context1.fillRect(0, 0, canvas1.width / 2, canvas1.height / 2);
</script>실제 표현 결과 :
<canvas> 기본 CSS 설정 :
canvas {
height : 150px;
width : 300px;
}figcaption
<figure> 요소 내부의 캡션을 정의한다.
<figurecaption> 은 내부에 담겨질 <img> 소스에 대한 설명을 의미한다.
즉, <figure> 은 이미지와 설명에 대한 일종의 컨테이너라고 볼 수 있다.
예시 :
<figure>
<img
src="https://img1.daumcdn.net/thumb/C428x428/?scode=mtistory2&fname=https%3A%2F%2Ftistory1.daumcdn.net%2Ftistory%2F6142901%2Fattach%2Feaf30c1affbe45adb0179071560647bc"
width="200"
height="200"
alt="내 이미지"/>
<figcaption>제 블로그를 대표하는 이미지입니다.</figcaption>
</figure>실제 표현 결과 :
<figcaption> 기본 CSS 설정 :
figcaption {
display : block;
}figure
위에서 보았듯이, 이미지와 캡션과 같은 컨텐츠를 담는 컨테이너를 정의한다.
예시 :
<figure>
<img
src="https://img1.daumcdn.net/thumb/C428x428/?scode=mtistory2&fname=https%3A%2F%2Ftistory1.daumcdn.net%2Ftistory%2F6142901%2Fattach%2Feaf30c1affbe45adb0179071560647bc"
width="200"
height="200"
alt="내 이미지"/>
<figcaption>제 블로그를 대표하는 이미지입니다.</figcaption>
</figure>실제 표현 결과 :
<figure> 기본 CSS 설정 :
figure {
display : block;
margin-top : 1em;
margin-bottom : 1em;
margin-left : 40px;
margin-right : 40px;
}picture
여러 이미지 리소스에 대한 컨테이너
이게 어떤 의미인지 헷갈렸는데,
<picture> 태그 내부에는 2 가지 태그를 담는다.
<source><img>
<picture> 태그는 이미지 리소스를 지정하는 데 더 많은 유연성을 제공한다고 작성되어 있다.
이 태그는 현재 미디어의 상태에 따라 다른 리소스를 표출하는 특수한 컨테이너의 일종이다.
우리가 img 태그에 alt 를 작성해서 혹시 모를 에러에 대처하는 것 처럼,
<picture> 태그 또한, alt 와 비슷하게 마지막으로 img 태그를 사용하여,
<source> 태그의 속성인 media 쿼리에 모두 해당하지 않는 경우,
<img> 로 fallback 하도록 만들었다.
이에 대한 예시는 W3Schools 를 가져오겠다.
예시 :
<picture>
<source media="(min-width:650px)" srcset="img_pink_flowers.jpg">
<source media="(min-width:465px)" srcset="img_white_flower.jpg">
<img src="img_orange_flowers.jpg" alt="Flowers" style="width:auto;">
</picture>실제 표현 결과 :
- 현재 렌더링이 465 px 이하라면 : img_white_flower.jpg
- 현재 렌더링이 465 ~ 650 px 이라면 : img_pink_flowers.jpg
- 현재 렌더링이 650 px 를 초과했다면 : img_orange_flowers.jpg
<picture> 기본 CSS 설정 :
없음
svg
SVG 그래픽을 위한 컨테이너를 정의한다.
SVG 파일이 주로 아이콘으로 사용되는데,
이 파일을 그래픽 에디터에 올려보면, svg 파일이 각 픽셀의 정보를 담는 것이 아니라,
특정 수학적 경로를 따라 이동하며 칠했다는 것을 알 수 있다.
밑의 예시들은 W3Schools 에서 제공하는 예시다.
예시 :
<svg width="100" height="100">
<circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
</svg>
<svg width="300" height="200">
<polygon points="100,10 40,198 190,78 10,78 160,198"
style="fill:lime;stroke:purple;stroke-width:5;fill-rule:evenodd;" />
</svg>실제 표현 결과 :
<svg> 기본 CSS 설정 :
없음.
Category - Audio / Video (오디오, 비디오)
audio
음원 컨텐츠를 정의한다.
옛날 블로그들에서 배경음악을 듣게 만들었던 태그이다.
음원을 끄기 위해 블로그 상단에서 열심히 오디오 태그를 찾던 기억이 난다..
여기서도 <audio> 태그 내부에 <source> 가 사용되는데,
여러 음원의 종류를 나열하여 브라우저와 기기의 차이에 대응할 수 있게 만들어 놓았다.
예시 :
<audio controls>
<source src="https://interactive-examples.mdn.mozilla.net/media/cc0-audio/t-rex-roar.mp3" type="audio/mpeg">
</audio>실제 표현 결과 :
MDN 사이트에서 제공하는 샘플을 사용했다 : 소의 울음소리?
<audio> 특수 속성들 :
autoplay: 준비되는 대로 바로 오디오가 시작됨controls: 시작, 정지 버튼과 같은 컨트롤 요소가 표시되어야 하는지 지정한다.loop: 오디오 트랙이 끝날 때 마다 다시 곧바로 시작하게 만들 것인지.muted: 현재 오디오 출력을 음소거 해야 하는지.preload: 페이지가 로딩될 때 오디오도 로드해야 하는지, 아니면 어떻게 로드 할 것인지 지정auto: 브라우저의 판단metadata: 오디오의 메타데이터만 가져옴none: 전혀 불러오지 않고, 이벤트 혹은 JS 로 제어
src: 오디오 파일의 URL 을 지정한다.URL
<audio> 기본 CSS 설정 :
없음
source
미디어 요소들을 위한 여러 미디어 리소스를 정의한다.
특히, <video>, <picture>, <audio> 에 해당한다.
오디오 태그 내부에 존재하는 source 태그는 브라우저 자체에서 지원되는 형식을 위해
여러 개의 소스 파일을 나열하기도 한다.
이 때, 브라우저는 순서대로 읽으며, 호환 되는 <source> 태그를 리소스로 사용한다.
예시 :
<video width="720" height="480" controls>
<source
src="https://samplelib.com/lib/preview/mp4/sample-5s.mp4"
type="video/mp4"
/>
</video>실제 표현 결과 :
<source> 기본 CSS 설정 :
없음
track
미디어 요소들에 대한 텍스트 트랙들을 정의한다.
이게 어떤 의미인가 하면, 우리가 유튜브를 볼 때, 영어 혹은 한글로 번역을 보았을 것이다.
그것도 거의 동일한 기능이라고 생각하면 된다. (특정 브라우저는 지원하지 않음)
이 태그는 <video> 와 <audio> 에 대해서 작동한다.
아쉽게도, 나는 번역 및 텍스트 트랙에 대한 파일 (.vtt) 가 없으므로,
이에 대한 예시는 W3Schools 를 참조하길 바란다.
예시 :
<video width="320" height="240" controls>
<source src="forrest_gump.mp4" type="video/mp4">
<source src="forrest_gump.ogg" type="video/ogg">
<track src="fgsubtitles_en.vtt" kind="subtitles" srclang="en" label="English">
<track src="fgsubtitles_no.vtt" kind="subtitles" srclang="no" label="Norwegian">
</video>실제 표현 결과 :
`` 기본 CSS 설정 :
없음
video
비디오 혹은 영화를 정의한다.
내가 <source> 예제를 들 때 사용했던 코드를 가져오겠다.
예시 :
<video width="70%" height="45%" controls>
<source
src="https://samplelib.com/lib/preview/mp4/sample-5s.mp4"
type="video/mp4"
/>
이 글자가 보인다면, <code>video</code> 태그가 호환되지 않는 것 입니다.
</video>실제 표현 결과 :
controls 속성 선언으로 인해 우리가 평소에 보던 플레이어를 볼 수 있는데,
옵션 값을 본다면, 다운로드 가 존재한다.
유튜브도 그렇고, 보통 다운로드 옵션은 없었을 텐데.. 생각을 해 보았는데,
영상 자체의 크기와,
웹 서버가 제공하는 영상을 다시 클라이언트에게 제공하는 과정에서 많은 계산이 일어날 것이라고 생각이 들었다.
저작권 문제 또한 존재하므로, 이러한 기능은 없애 놓은 것으로 추정한다.
<video> 태그 특수 옵션들 :
src: 비디오 파일의 URL 을 지정autoplay: 비디오가 준비 되는 대로 시작 할 건지 지정controls: 비디오 제어판을 표시 할 건지 지정 (실행/정지 버튼 등등)height: 높이 지정width: 넓이 지정loop: 비디오가 끝나도 다시 지속적으로 시작 할 것인지 지정muted: 비디오는 나오되, 오디오는 음소거 할 것인지 지정poster: 유저가 "실행" 버튼을 누를 때 까지, 비디오가 다운로드 되는 동안 보여 질 이미지를 지정 (썸네일)preload:auto,metadata,none을 가지며, 네트워크 절약과 관련이 있음 (위를 참조)
<video> 기본 CSS 설정 :
없음
Category - Links (링크 - 연결)
a
하이퍼링크를 정의한다.
주로 파란색 으로 표현된다.
나도 마크다운에서 기본으로 제공하는 하이퍼링크 Syntax 대신에,
나는 <a> 태그를 사용한다. - 기본 제공 문법은 현재 페이지에서 이동하기 때문에.
참고 사이트를 정의하거나, 특정 이미지를 클릭했을 때, 어떠한 사이트로 인도하도록 해 주는것도 이 태그이다.
예시 :
<p>
<a href="https://naver.com">
<img
src="https://i.namu.wiki/i/cpwBJ81IoxAasrKB-oSIkkhiqd8im2wMYVrYSWx_oSN8_qC6cZ_xBbiWvE1jVJC_zU0o-RD84LD4jTaG_nZ7n16U1AopO7SFpbp6SBmsnloAeebwuMlrYzOPxjdJ9Fve3H1dEX2ZtMGVsJ8zaYvkxA.svg"
width="50"
height="50"
alt="네이버 로고"
/>
</a>
</p>
<p>
<a href="https://naver.com" target="_blank">
네이버 사이트를 "새로운" 창에서 열기
</a>
</p>
<p>
<a href="mailto:rhdwhdals8765@gmail.com">
디폴트 메일 프로그램이 켜질 겁니다.
</a>
</p>
<p>
<a href="tel:+12342345">
디폴트 전화 프로그램이 켜질 겁니다.
</a>
</p>실제 표현 결과 :
<a> 태그 특수 속성들 :
download: 다운로드 될 태그에 대한 설명인데, 유저가 클릭했을 때, 다운로드 될 파일을 지정href: 가야하는 페이지에 대한 URL 링크를 지정hreflang: 연결된 문서의 언어를 지정media: 미디어 쿼리로 유저의 기기에 따른 효율화 된 문서로 연결한다.ping: 이 속성은 "추적" 에 자주 사용되는데, 빈 칸(' ') 으로 단순 요청을 보낼 url 리스트를 정의referpolicy: 참조 시 어떤 정보까지 보낼 것인지 지정.- 정말 많은 속성이 존재
rel: 현재 문서와 연결된 문서 간의 관계를 지정- 이것도 정말 많은 속성이 존재
target: 여기에 선언된 문서를 어디에서 열 것인지._blank: 새로운 탭으로 문서를 연다._parent: 부모 문서에서 문서를 연다. -iframe때문에 생긴 옵션인듯._self: 현재 탭에서 이동_top: 최상위인 브라우저에서 열기
type: 연결된 문서의 미디어 타입을 지정
<a> 기본 CSS 설정 :
a:link, a:visited {
color : (internal value);
text-decoration : underline;
cursor : auto;
}
a:link:active, a:visited:active {
color : (internal value);
}link
문서와 외부 리소스 간의 관계를 정의한다. (주로 stylesheet - css)
외부에 HTML 문서를 위한 css 파일을 정의 해 두었다면,
우리는 HTML 문서에 <link> 태그를 이용하여 가져와야 한다.
이 때, rel="stylesheet, href="<css 파일>" 을 사용한다.
link 는 내부적으로 요소를 담지 않으며, 오로지 속성만 가진다.
예를 들어, 대부분을 이렇게 사용한다.
예시 :
<head>
<link rel="stylesheet" href="styles.css">
</head>실제 표현 결과 :
현재 이 블로그의 테마가, 위 처럼 적용된 결과입니다.
link 기본 CSS 설정 :
link {
display : none;
}nav
네비게이션이 경로를 안내 해 주는 것 처럼, 주요 요소를 안내 해 주는 태그를 정의한다.
현재 보고 있는 블로그에서도, 맨 위에 <h.> 태그들에 대한 안내 블록이 보일 것이다.
이것을 <nav> 라고 보면 된다.
주로 내부에 <a> 태그를 사용하는데, 위에서 a 태그를 통해서 페이지를 이동하거나, 해당 id 로 이동한다.
예시 :
<nav>
<a href="#nav-id-1">테스팅 DOM1 으로 이동</a> <br/>
<a href="#nav-id-2">테스팅 DOM2 으로 이동</a>
</nav>실제 표현 결과 :
nav 기본 CSS 설정 :
nav {
display : block;
}이 글을 작성하며 배운 것은,
1, 2 편에 거쳐, 가장 대중적인 태그들과, 형식 태그에 대해서 모두 보았다.
옛날 웹 개발자들이 각 구역에 대한 역할을 나누기 위해 노력한 모습이 보일 정도였다.
그러나, 웹 개발이 보편화되고 간편해진 요즘, 특정 태그들은 JS 라이브러리로 통합되었거나,
다른 태그의 역할로 통합되었다고 느낀다.
이번 3 편에서는 이미지, 캔버스, 오디오, 비디오, 하이퍼링크 관련 태그에 대해서 배웠다.
특히나 옛날처럼 텍스트만을 보기 위해서 웹을 여는 것이 아니라, 컨텐츠를 보기 위해서 인터넷을 하는 이 시대에,
위와 같은 이미지, 캔버스 와 같은 태그들은 정말 속성이 많고, 속성에 배치될 수 있는 값들도 많았다.
그리고, 비디오와 오디오 태그에서 default 로 "다운로드" 옵션이 있다는 것에 놀랐다.
평소 우리가 접하는 유튜브나 SNS 같은 곳에서 동영상 다운로드는 찾을 수가 없을텐데,
왜 그럴까 생각해보니, 웹 서버 혹은 백 서버가 무지막지한 용량의 데이터를 하나의 클라이언트에게 주어야 한다는 것이 문제라고 생각했다.
참고 사이트
W3Schools HTML Element Reference
https://www.w3schools.com/TAGS/ref_byfunc.asp
'Web-Server > 웹 지식' 카테고리의 다른 글
| HTML 문서 정식 태그 "전부" 공부하기 - 마무리 편 (코드 작성 및 구현까지) (0) | 2025.06.01 |
|---|---|
| HTML 문서 정식 태그 "전부" 공부하기 - 4편 (코드 작성 및 구현까지) (0) | 2025.05.30 |
| HTML 문서 정식 태그 "전부" 공부하기 - 2편 (코드 작성 및 구현까지) (0) | 2025.05.26 |
| HTML 문서 정식 태그 "전부" 공부하기 - 1편 (코드 작성 및 구현까지) (0) | 2025.05.24 |
| 웹 서버는 무엇이고 Local, Production 의 차이는 무엇일까? (0) | 2025.05.13 |
제목 : HTML 문서 태그 공부하기 - 3편
2편 글 주소
https://codecreature.tistory.com/218
이 글을 작성하는 이유
나는 정식 스펙상에 존재하는 "모든" HTML 태그들을 공부하고 있다.
이는 어찌 보면 미련한 짓일수도 있고, 미친짓을 하는 것일 수도 있다.
그러나, 앞으로 다양한 웹 프레임워크와 라이브러리는 종류가 다양해지고 있는데,
트렌드를 따라가기 위해 위 프로그램들의 공식문서를 보며, 공부하는 것도 괜찮다고 생각한다.
그러나, 지속적으로 점유율이 바뀌고 있는 프로그램들을 살펴보았을 때,
내가 적용하고자 하는 웹 라이브러리와 프레임워크가 존재 할 때,
이러한 태그를 왜 사용해야 하는지, 공식문서에서 간단한 헤더 영역을 만들 때,
왜 해당 태그를 사용하는지 이해하지 못한 상태로 공부하고 싶지는 않았다.
그리고 특히, 해당 태그들이 가지는 일종의 "컨벤션"과 Default 스타일을 알고 싶었다.
그리고, 태그들이 가지는 여러 속성들도 공부하며, 어떤 상황에 사용하는 것이 적합한지 알고 싶었다.
2편까지 한 70 개 정도의 태그들을 다뤘다.
- 기본적인 HTML 태그
- 인라인 Formatter 태그
- Form 과 Input 관련 태그들
블로그에 실제 인라인 예시와 form and input 관련 태그 예시들을 실제로 블로그에 구현하는 과정에서
내가 예상했던 글 작성 속도가 늦춰지게 되었다.
그러나, 이 과정에서 다시 웹 태그 작성 스킬이 조금씩 늘어나는 것을 느낄 수 있었다.
조금만 더 하면, 이제 모든 태그들을 알 수 있게 된다.
Category - Images (이미지)
img
이미지를 정의한다.
이미지 태그는 주어지는 src 속성에 따라 유연하게 여러 소스들을 표현한다.
jpg, jpeg, gif, png 등등 여러 소스를 유연하게 파싱하여 표현한다.
그리고, <img> 태그는 src, alt 라는 속성을 필수로 가져야 한다.
src: 이미지를 가져 올 장소 혹은 소스alt: 이미지 표시에 실패했을 때, 대신 보여줄 텍스트 혹은 이미지
그리고, 이미지를 클릭했을 때, 특정 사이트로 안내 해 주고 싶다면,
<a> 태그 내부에 <img> 를 넣어 안내 할 수 있다.
예시 :
<p>
이미지에서
<img
src="https://img1.daumcdn.net/thumb/C428x428/?scode=mtistory2&fname=https%3A%2F%2Ftistory1.daumcdn.net%2Ftistory%2F6142901%2Fattach%2Feaf30c1affbe45adb0179071560647bc"
alt="내 블로그 유저 이미지"
width="50"
height="50"
/>
src 속성이 올바르게 로딩되었을 때
</p>
<p>
이미지에서
<img
src=""
alt="내 블로그 유저 이미지"
width="50"
height="50"
/>
src 속성이 로딩되지 못했을 때
</p>
<p>
이미지에서
<img
src="https://img1.daumcdn.net/thumb/C428x428/?scode=mtistory2&fname=https%3A%2F%2Ftistory1.daumcdn.net%2Ftistory%2F6142901%2Fattach%2Feaf30c1affbe45adb0179071560647bc"
alt="내 블로그 유저 이미지"
width="50"
height="50"
style="vertical-align : bottom;"
/>
style 이 vertical-align : bottom 일 때
</p>
<p>
이미지에서
<img
src="https://img1.daumcdn.net/thumb/C428x428/?scode=mtistory2&fname=https%3A%2F%2Ftistory1.daumcdn.net%2Ftistory%2F6142901%2Fattach%2Feaf30c1affbe45adb0179071560647bc"
alt="내 블로그 유저 이미지"
width="50"
height="50"
style="vertical-align : middle;"
/>
style 이 vertical-align : middle
</p>
<p>
이미지에서
<img
src="https://img1.daumcdn.net/thumb/C428x428/?scode=mtistory2&fname=https%3A%2F%2Ftistory1.daumcdn.net%2Ftistory%2F6142901%2Fattach%2Feaf30c1affbe45adb0179071560647bc"
alt="내 블로그 유저 이미지"
width="50"
height="50"
style="vertical-align : top"
/>
style 이 vertical-align : top
</p>
<p>
이미지에서
<img
src="https://img1.daumcdn.net/thumb/C428x428/?scode=mtistory2&fname=https%3A%2F%2Ftistory1.daumcdn.net%2Ftistory%2F6142901%2Fattach%2Feaf30c1affbe45adb0179071560647bc"
alt="내 블로그 유저 이미지"
width="50"
height="50"
style="float : right"
/>
style 이 float : right 일 때
</p>
<p>
이미지에서
<img
src="https://img1.daumcdn.net/thumb/C428x428/?scode=mtistory2&fname=https%3A%2F%2Ftistory1.daumcdn.net%2Ftistory%2F6142901%2Fattach%2Feaf30c1affbe45adb0179071560647bc"
alt="내 블로그 유저 이미지"
width="50"
height="50"
style="float : left"
/>
style 이 float : left 일 때
</p>
<p> 이미지에서
<img
src="https://img1.daumcdn.net/thumb/C428x428/?scode=mtistory2&fname=https%3A%2F%2Ftistory1.daumcdn.net%2Ftistory%2F6142901%2Fattach%2Feaf30c1affbe45adb0179071560647bc"
alt="내 블로그 유저 이미지"
width="50"
height="50"
style="margin : 0px 50px"
/>
양 옆 마진을 50 픽셀을 넣어줄 때
</p>실제 표현 결과 :
이미지에서
이미지에서
src 속성이 로딩되지 못했을 때
이미지에서
이미지에서
이미지에서
이미지에서
이미지에서
이미지에서
<img> 속성들 :
alt: 이미지를 대신 할 수 있는 텍스트 지정crossorigin: Third-Party(다른 사이트) 에서 이미지를 가져올 수 있게 허용할 수 있음anonymous: 허용use-credentials: 같은 origin 이어야만 허용
height: 높이width: 넓이ismap: 서버 측의 이미지 map 인지 지정한다.loading: 브라우저가 로딩 될 때 바로 이미지를 구현 할 지, 특정 조건 만족 시 까지 기다릴지 지정eager: 즉시lazy: 천천히
longdesc: 이미지에 대한 자세한 설명을 가진 URL 을 지정referrerpolicy: 참조 정책 - 이미지는 저작권에 관련이 되어 있으므로.- 다양한 값이 있으므로, 여기 를 참조
sizes: 다양한 페이지 레이아웃에 대한 이미지 크기를 지정src: 이미지의 경로 혹은 소스를 지정srcset: 경로 혹은 소스에 대한 리스트이며, 서로 다른 상황에 사용할 이미지 파일들의 배열usemap: EX - (#mapname) 클라이언트 측의 이미지 map 을 지정
<img> 기본 CSS 설정 :
img {
display : inline-block;
}map
클라이언트 측의 이미지 map 을 정의한다.
도대체 이 map 이라는 것이 무엇인가? 모르겠었는데,
이미지 내부에서 우리가 지정한 map 영역 을 클릭하면,
상호작용 할 수 있게 해 주는 태그이다.
그러니까, 우리가 옛날에 플래시 게임. 즉, 예를 들어 퍼즐 플래시 게임같은 것을 할 때,
우리는 단서를 찾기 위해서 마우스를 모든 곳에 클릭 해 본 경험이 있을 것이다.
같은 기술을 아니지만, 거의 비슷한 경험을 주는 태그이다.
이것을 도대체 어떻게 구현해야 할까.... 하다가,
위에서 사용한 나의 유저 이미지를 다시 활용하기로 했다.
상단부터 절반까지, 해당 영역을 클릭 시, 나의 블로그 메인으로 새 창이 띄워질 것이다.
라고 생각했는데,
블로그 글 자체가 샌드박스화 되어 있어
<map> 내부의 area 에서 창을 따로 띄울 수 없었다.
따라서, area 에 따로 onclick 을 달아 상호작용만 확인 할 수 있게 바꿨다.
예시 :
<p>
<img
src="https://img1.daumcdn.net/thumb/C428x428/?scode=mtistory2&fname=https%3A%2F%2Ftistory1.daumcdn.net%2Ftistory%2F6142901%2Fattach%2Feaf30c1affbe45adb0179071560647bc"
alt="내 블로그 유저 이미지"
width="200"
height="200"
usemap="#map-test"
id="map-img"
/>
<map name="map-test" id="map-test">
</map>
</p>
<div id="map-result"></div>
<script>
const mapDOM = document.getElementById("map-test");
const imgDOM = document.getElementById("map-img");
const resultDOM = document.getElementById("map-result");
let isMapOn = false;
mapDOM.innerHTML = `
<area
shape="rect"
coords="0,0,${imgDOM.width},${imgDOM.height / 2}"
alt="test"
onclick="mapFunc()"
/>
`;
function mapFunc() {
if(isMapOn) {
resultDOM.innerHTML = "";
isMapOn = !isMapOn;
} else {
resultDOM.innerHTML = `<p>이미지 상단을 클릭하셨습니다. 이 문구를 없애려면 한 번 더 클릭하세요.</p>`;
isMapOn = !isMapOn;
}
}
</script>실제 표현 결과 :
이미지 상단을 클릭해 보면, 문구가 나올텐데,
이제 한 번 더 상단을 클릭 해 보면, 해당 문구를 사라지게 스위칭 함수로 제작했다.
<map> 속성 :
name:img가 참조할 일종의map의id이름을 지정한다.
<map> 기본 CSS 설정 :
map {
display : inline;
}area
이미지 map 내부의 영역을 정의한다.
위에서 사용했던 것을 보면 된다.
만약에, 이미지를 클릭 시 페이지를 이동하도록 만들고 싶다면,
W3Schools 의 예제를 보면 알 수 있다.
예시 :
<img src="planets.gif" width="145" height="126" alt="Planets"
usemap="#planetmap">
<map name="planetmap">
<area shape="rect" coords="0,0,82,126" href="sun.htm" alt="Sun">
<area shape="circle" coords="90,58,3" href="mercur.htm" alt="Mercury">
<area shape="circle" coords="124,58,8" href="venus.htm" alt="Venus">
</map>위의 예제는 이미지에 대한 영역 선언과 함께, 어떠한 방식으로 연결시키는지 볼 수 있다.
나의 사이트에서는 이를 구현 할 수 없는데,
이는 내 사이트에 sum.htm, mercur.htm, venus.htm 에 대한 페이지 소스가 없을 뿐만 아니라,
planets.gif 에 대한 리소스도 없다.
리소스 주소가 아니라, 리소스 경로를 의미하므로, 이는 웹 사이트 서버 (웹 서버) 에 요구하는 것인데,
내 블로그에는 그런 리소스를 탑재하지 않았다.
실제 표현 결과 :
<area> 기본 CSS 설정 :
area {
display : none;
}canvas
JavaScript 를 통해 그래픽을 그리는 데 사용되는 태그이다.
예제를 보니까, 대부분의 작업을 JS 를 이용하여 컨텍스트를 추출하고,
해당 컨텍스트 기능을 통하여 <canvas> 에 그림을 그리는 기능을 가지고 있다.
기본 속성으로 width, height 를 가지고 있으며, 기본 값은 각각 300, 150 으로,
수평으로 길게 되어 있다.
예시 :
<canvas id="canvas-test-1">
렌더링 안 되면 이 텍스트가 나옴
</canvas>
<script>
const canvas1 = document.getElementById("canvas-test-1");
const context1 = canvas1.getContext("2d");
context1.fillStyle = "red";
context1.fillRect(0, 0, canvas1.width, canvas1.height);
context1.fillStyle = "green";
context1.fillRect(0, 0, canvas1.width, canvas1.height / 2);
context1.fillStyle = "blue";
context1.fillRect(0, 0, canvas1.width / 2, canvas1.height / 2);
</script>실제 표현 결과 :
<canvas> 기본 CSS 설정 :
canvas {
height : 150px;
width : 300px;
}figcaption
<figure> 요소 내부의 캡션을 정의한다.
<figurecaption> 은 내부에 담겨질 <img> 소스에 대한 설명을 의미한다.
즉, <figure> 은 이미지와 설명에 대한 일종의 컨테이너라고 볼 수 있다.
예시 :
<figure>
<img
src="https://img1.daumcdn.net/thumb/C428x428/?scode=mtistory2&fname=https%3A%2F%2Ftistory1.daumcdn.net%2Ftistory%2F6142901%2Fattach%2Feaf30c1affbe45adb0179071560647bc"
width="200"
height="200"
alt="내 이미지"/>
<figcaption>제 블로그를 대표하는 이미지입니다.</figcaption>
</figure>실제 표현 결과 :
<figcaption> 기본 CSS 설정 :
figcaption {
display : block;
}figure
위에서 보았듯이, 이미지와 캡션과 같은 컨텐츠를 담는 컨테이너를 정의한다.
예시 :
<figure>
<img
src="https://img1.daumcdn.net/thumb/C428x428/?scode=mtistory2&fname=https%3A%2F%2Ftistory1.daumcdn.net%2Ftistory%2F6142901%2Fattach%2Feaf30c1affbe45adb0179071560647bc"
width="200"
height="200"
alt="내 이미지"/>
<figcaption>제 블로그를 대표하는 이미지입니다.</figcaption>
</figure>실제 표현 결과 :
<figure> 기본 CSS 설정 :
figure {
display : block;
margin-top : 1em;
margin-bottom : 1em;
margin-left : 40px;
margin-right : 40px;
}picture
여러 이미지 리소스에 대한 컨테이너
이게 어떤 의미인지 헷갈렸는데,
<picture> 태그 내부에는 2 가지 태그를 담는다.
<source><img>
<picture> 태그는 이미지 리소스를 지정하는 데 더 많은 유연성을 제공한다고 작성되어 있다.
이 태그는 현재 미디어의 상태에 따라 다른 리소스를 표출하는 특수한 컨테이너의 일종이다.
우리가 img 태그에 alt 를 작성해서 혹시 모를 에러에 대처하는 것 처럼,
<picture> 태그 또한, alt 와 비슷하게 마지막으로 img 태그를 사용하여,
<source> 태그의 속성인 media 쿼리에 모두 해당하지 않는 경우,
<img> 로 fallback 하도록 만들었다.
이에 대한 예시는 W3Schools 를 가져오겠다.
예시 :
<picture>
<source media="(min-width:650px)" srcset="img_pink_flowers.jpg">
<source media="(min-width:465px)" srcset="img_white_flower.jpg">
<img src="img_orange_flowers.jpg" alt="Flowers" style="width:auto;">
</picture>실제 표현 결과 :
- 현재 렌더링이 465 px 이하라면 : img_white_flower.jpg
- 현재 렌더링이 465 ~ 650 px 이라면 : img_pink_flowers.jpg
- 현재 렌더링이 650 px 를 초과했다면 : img_orange_flowers.jpg
<picture> 기본 CSS 설정 :
없음
svg
SVG 그래픽을 위한 컨테이너를 정의한다.
SVG 파일이 주로 아이콘으로 사용되는데,
이 파일을 그래픽 에디터에 올려보면, svg 파일이 각 픽셀의 정보를 담는 것이 아니라,
특정 수학적 경로를 따라 이동하며 칠했다는 것을 알 수 있다.
밑의 예시들은 W3Schools 에서 제공하는 예시다.
예시 :
<svg width="100" height="100">
<circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
</svg>
<svg width="300" height="200">
<polygon points="100,10 40,198 190,78 10,78 160,198"
style="fill:lime;stroke:purple;stroke-width:5;fill-rule:evenodd;" />
</svg>실제 표현 결과 :
<svg> 기본 CSS 설정 :
없음.
Category - Audio / Video (오디오, 비디오)
audio
음원 컨텐츠를 정의한다.
옛날 블로그들에서 배경음악을 듣게 만들었던 태그이다.
음원을 끄기 위해 블로그 상단에서 열심히 오디오 태그를 찾던 기억이 난다..
여기서도 <audio> 태그 내부에 <source> 가 사용되는데,
여러 음원의 종류를 나열하여 브라우저와 기기의 차이에 대응할 수 있게 만들어 놓았다.
예시 :
<audio controls>
<source src="https://interactive-examples.mdn.mozilla.net/media/cc0-audio/t-rex-roar.mp3" type="audio/mpeg">
</audio>실제 표현 결과 :
MDN 사이트에서 제공하는 샘플을 사용했다 : 소의 울음소리?
<audio> 특수 속성들 :
autoplay: 준비되는 대로 바로 오디오가 시작됨controls: 시작, 정지 버튼과 같은 컨트롤 요소가 표시되어야 하는지 지정한다.loop: 오디오 트랙이 끝날 때 마다 다시 곧바로 시작하게 만들 것인지.muted: 현재 오디오 출력을 음소거 해야 하는지.preload: 페이지가 로딩될 때 오디오도 로드해야 하는지, 아니면 어떻게 로드 할 것인지 지정auto: 브라우저의 판단metadata: 오디오의 메타데이터만 가져옴none: 전혀 불러오지 않고, 이벤트 혹은 JS 로 제어
src: 오디오 파일의 URL 을 지정한다.URL
<audio> 기본 CSS 설정 :
없음
source
미디어 요소들을 위한 여러 미디어 리소스를 정의한다.
특히, <video>, <picture>, <audio> 에 해당한다.
오디오 태그 내부에 존재하는 source 태그는 브라우저 자체에서 지원되는 형식을 위해
여러 개의 소스 파일을 나열하기도 한다.
이 때, 브라우저는 순서대로 읽으며, 호환 되는 <source> 태그를 리소스로 사용한다.
예시 :
<video width="720" height="480" controls>
<source
src="https://samplelib.com/lib/preview/mp4/sample-5s.mp4"
type="video/mp4"
/>
</video>실제 표현 결과 :
<source> 기본 CSS 설정 :
없음
track
미디어 요소들에 대한 텍스트 트랙들을 정의한다.
이게 어떤 의미인가 하면, 우리가 유튜브를 볼 때, 영어 혹은 한글로 번역을 보았을 것이다.
그것도 거의 동일한 기능이라고 생각하면 된다. (특정 브라우저는 지원하지 않음)
이 태그는 <video> 와 <audio> 에 대해서 작동한다.
아쉽게도, 나는 번역 및 텍스트 트랙에 대한 파일 (.vtt) 가 없으므로,
이에 대한 예시는 W3Schools 를 참조하길 바란다.
예시 :
<video width="320" height="240" controls>
<source src="forrest_gump.mp4" type="video/mp4">
<source src="forrest_gump.ogg" type="video/ogg">
<track src="fgsubtitles_en.vtt" kind="subtitles" srclang="en" label="English">
<track src="fgsubtitles_no.vtt" kind="subtitles" srclang="no" label="Norwegian">
</video>실제 표현 결과 :
`` 기본 CSS 설정 :
없음
video
비디오 혹은 영화를 정의한다.
내가 <source> 예제를 들 때 사용했던 코드를 가져오겠다.
예시 :
<video width="70%" height="45%" controls>
<source
src="https://samplelib.com/lib/preview/mp4/sample-5s.mp4"
type="video/mp4"
/>
이 글자가 보인다면, <code>video</code> 태그가 호환되지 않는 것 입니다.
</video>실제 표현 결과 :
controls 속성 선언으로 인해 우리가 평소에 보던 플레이어를 볼 수 있는데,
옵션 값을 본다면, 다운로드 가 존재한다.
유튜브도 그렇고, 보통 다운로드 옵션은 없었을 텐데.. 생각을 해 보았는데,
영상 자체의 크기와,
웹 서버가 제공하는 영상을 다시 클라이언트에게 제공하는 과정에서 많은 계산이 일어날 것이라고 생각이 들었다.
저작권 문제 또한 존재하므로, 이러한 기능은 없애 놓은 것으로 추정한다.
<video> 태그 특수 옵션들 :
src: 비디오 파일의 URL 을 지정autoplay: 비디오가 준비 되는 대로 시작 할 건지 지정controls: 비디오 제어판을 표시 할 건지 지정 (실행/정지 버튼 등등)height: 높이 지정width: 넓이 지정loop: 비디오가 끝나도 다시 지속적으로 시작 할 것인지 지정muted: 비디오는 나오되, 오디오는 음소거 할 것인지 지정poster: 유저가 "실행" 버튼을 누를 때 까지, 비디오가 다운로드 되는 동안 보여 질 이미지를 지정 (썸네일)preload:auto,metadata,none을 가지며, 네트워크 절약과 관련이 있음 (위를 참조)
<video> 기본 CSS 설정 :
없음
Category - Links (링크 - 연결)
a
하이퍼링크를 정의한다.
주로 파란색 으로 표현된다.
나도 마크다운에서 기본으로 제공하는 하이퍼링크 Syntax 대신에,
나는 <a> 태그를 사용한다. - 기본 제공 문법은 현재 페이지에서 이동하기 때문에.
참고 사이트를 정의하거나, 특정 이미지를 클릭했을 때, 어떠한 사이트로 인도하도록 해 주는것도 이 태그이다.
예시 :
<p>
<a href="https://naver.com">
<img
src="https://i.namu.wiki/i/cpwBJ81IoxAasrKB-oSIkkhiqd8im2wMYVrYSWx_oSN8_qC6cZ_xBbiWvE1jVJC_zU0o-RD84LD4jTaG_nZ7n16U1AopO7SFpbp6SBmsnloAeebwuMlrYzOPxjdJ9Fve3H1dEX2ZtMGVsJ8zaYvkxA.svg"
width="50"
height="50"
alt="네이버 로고"
/>
</a>
</p>
<p>
<a href="https://naver.com" target="_blank">
네이버 사이트를 "새로운" 창에서 열기
</a>
</p>
<p>
<a href="mailto:rhdwhdals8765@gmail.com">
디폴트 메일 프로그램이 켜질 겁니다.
</a>
</p>
<p>
<a href="tel:+12342345">
디폴트 전화 프로그램이 켜질 겁니다.
</a>
</p>실제 표현 결과 :
<a> 태그 특수 속성들 :
download: 다운로드 될 태그에 대한 설명인데, 유저가 클릭했을 때, 다운로드 될 파일을 지정href: 가야하는 페이지에 대한 URL 링크를 지정hreflang: 연결된 문서의 언어를 지정media: 미디어 쿼리로 유저의 기기에 따른 효율화 된 문서로 연결한다.ping: 이 속성은 "추적" 에 자주 사용되는데, 빈 칸(' ') 으로 단순 요청을 보낼 url 리스트를 정의referpolicy: 참조 시 어떤 정보까지 보낼 것인지 지정.- 정말 많은 속성이 존재
rel: 현재 문서와 연결된 문서 간의 관계를 지정- 이것도 정말 많은 속성이 존재
target: 여기에 선언된 문서를 어디에서 열 것인지._blank: 새로운 탭으로 문서를 연다._parent: 부모 문서에서 문서를 연다. -iframe때문에 생긴 옵션인듯._self: 현재 탭에서 이동_top: 최상위인 브라우저에서 열기
type: 연결된 문서의 미디어 타입을 지정
<a> 기본 CSS 설정 :
a:link, a:visited {
color : (internal value);
text-decoration : underline;
cursor : auto;
}
a:link:active, a:visited:active {
color : (internal value);
}link
문서와 외부 리소스 간의 관계를 정의한다. (주로 stylesheet - css)
외부에 HTML 문서를 위한 css 파일을 정의 해 두었다면,
우리는 HTML 문서에 <link> 태그를 이용하여 가져와야 한다.
이 때, rel="stylesheet, href="<css 파일>" 을 사용한다.
link 는 내부적으로 요소를 담지 않으며, 오로지 속성만 가진다.
예를 들어, 대부분을 이렇게 사용한다.
예시 :
<head>
<link rel="stylesheet" href="styles.css">
</head>실제 표현 결과 :
현재 이 블로그의 테마가, 위 처럼 적용된 결과입니다.
link 기본 CSS 설정 :
link {
display : none;
}nav
네비게이션이 경로를 안내 해 주는 것 처럼, 주요 요소를 안내 해 주는 태그를 정의한다.
현재 보고 있는 블로그에서도, 맨 위에 <h.> 태그들에 대한 안내 블록이 보일 것이다.
이것을 <nav> 라고 보면 된다.
주로 내부에 <a> 태그를 사용하는데, 위에서 a 태그를 통해서 페이지를 이동하거나, 해당 id 로 이동한다.
예시 :
<nav>
<a href="#nav-id-1">테스팅 DOM1 으로 이동</a> <br/>
<a href="#nav-id-2">테스팅 DOM2 으로 이동</a>
</nav>실제 표현 결과 :
nav 기본 CSS 설정 :
nav {
display : block;
}이 글을 작성하며 배운 것은,
1, 2 편에 거쳐, 가장 대중적인 태그들과, 형식 태그에 대해서 모두 보았다.
옛날 웹 개발자들이 각 구역에 대한 역할을 나누기 위해 노력한 모습이 보일 정도였다.
그러나, 웹 개발이 보편화되고 간편해진 요즘, 특정 태그들은 JS 라이브러리로 통합되었거나,
다른 태그의 역할로 통합되었다고 느낀다.
이번 3 편에서는 이미지, 캔버스, 오디오, 비디오, 하이퍼링크 관련 태그에 대해서 배웠다.
특히나 옛날처럼 텍스트만을 보기 위해서 웹을 여는 것이 아니라, 컨텐츠를 보기 위해서 인터넷을 하는 이 시대에,
위와 같은 이미지, 캔버스 와 같은 태그들은 정말 속성이 많고, 속성에 배치될 수 있는 값들도 많았다.
그리고, 비디오와 오디오 태그에서 default 로 "다운로드" 옵션이 있다는 것에 놀랐다.
평소 우리가 접하는 유튜브나 SNS 같은 곳에서 동영상 다운로드는 찾을 수가 없을텐데,
왜 그럴까 생각해보니, 웹 서버 혹은 백 서버가 무지막지한 용량의 데이터를 하나의 클라이언트에게 주어야 한다는 것이 문제라고 생각했다.
참고 사이트
W3Schools HTML Element Reference
https://www.w3schools.com/TAGS/ref_byfunc.asp
'Web-Server > 웹 지식' 카테고리의 다른 글
| HTML 문서 정식 태그 "전부" 공부하기 - 마무리 편 (코드 작성 및 구현까지) (0) | 2025.06.01 |
|---|---|
| HTML 문서 정식 태그 "전부" 공부하기 - 4편 (코드 작성 및 구현까지) (0) | 2025.05.30 |
| HTML 문서 정식 태그 "전부" 공부하기 - 2편 (코드 작성 및 구현까지) (0) | 2025.05.26 |
| HTML 문서 정식 태그 "전부" 공부하기 - 1편 (코드 작성 및 구현까지) (0) | 2025.05.24 |
| 웹 서버는 무엇이고 Local, Production 의 차이는 무엇일까? (0) | 2025.05.13 |
