[HTML] 기타 활용되는 태그

1. pre 태그 

(1) 코드

  <h1>pre 태그</h1>
  
  <!--밑의 내용 보기-->

  <pre>

pre 태그에 텍스트를 작성하면 스페이스, 탭, 엔터 등
모든 공백 요소들이 이와 같이 화면에 그대로 적용됩니다.

때문에 pre 태그는 아래의 아스키 아트(Ascii art)들처럼
공백요소들을 적극 활용해야 하는 경우 유용하게 사용될 수 있습니다.


  </pre>

  <pre>
    ,d888a                          ,d88888888888ba.  ,88"I)   d
  a88']8i                         a88".8"8)   `"8888:88  " _a8'
.d8P' PP                        .d8P'.8  d)      "8:88:baad8P'
,d8P' ,ama,   .aa,  .ama.g ,mmm  d8P' 8  .8'        88):888P'
,d88' d8[ "8..a8"88 ,8I"88[ I88' d88   ]IaI"        d8[         
a88' dP "bm8mP8'(8'.8I  8[      d88'    `"         .88          
,88I ]8'  .d'.8     88' ,8' I[  ,88P ,ama    ,ama,  d8[  .ama.g
[88' I8, .d' ]8,  ,88B ,d8 aI   (88',88"8)  d8[ "8. 88 ,8I"88[
]88  `888P'  `8888" "88P"8m"    I88 88[ 8[ dP "bm8m88[.8I  8[
]88,          _,,aaaaaa,_       I88 8"  8 ]P'  .d' 88 88' ,8' I[
`888a,.  ,aadd88888888888bma.   )88,  ,]I I8, .d' )88a8B ,d8 aI
"888888PP"'        `8""""""8   "888PP'  `888P'  `88P"88P"8m"
  </pre>

(2)잘 쓰이지 않는 이유

스크린 리더는 pre 태그의 내용을 읽지 않으므로,
이 태그 사용 시, 시각 장애인 등 시각이 취약한 사람들을 위한 다른 조치 필요합니다.

pre 태그를 쓴 채로 코드를 작성하면 편하지 않는가? 라고 질문할 수 있지만,
pre 태그는 들여쓰기도 모두 적용되기 때문에, 모든 코드를 왼쪽 정렬로 써야해서 코드가 지저분해 집니다.

 

2. ifram 태그

(1) 코드

  <h1>iframe 태그</h1>

<!--웹 페이지 안에 새로운 웹 페이지를 넣는 태그-->

<iframe 
	src="https://www.yalco.kr" 
    width="1000" 
    height="600" 
    frameborder="0"
    >
    </iframe>

(2) 구현된 화면

위의 코드 사용 시, 제 블로그 안에 새로운 웹페이지 화면이 보입니다.

(3) 잘 안 쓰이는 이유

ㄱ. 보안성 위험:

     내가 액자 구성 중 안 쪽 웹페이지에서 어디 로그인 한다고 하면, 바깥 웹페이지를 만든 사람이 그걸 훔쳐볼 수도 있다.

ㄴ. 사용성 저하:

     안 쪽의 웹페이지는 뒤로가기 등이 안된다. 따라서 이용에 불편

3. 기타 알아둘만한 태그

  <h1>기타 알아둘만한 태그들</h1>

  <p>
    kbd 태그는 <kbd>Ctrl</kbd> + <kbd>C</kbd> 와 같이 키보드 입력을 나타낼 때 사용합니다.
  </p>

  <p>
    <dfn>dfn 태그</dfn>는 특정 맥락에서 정의, 설명하고 있는 용어를 나타낼 때 사용합니다.
  </p>

  <p>
    small 태그는 <small>이와 같이 텍스트를 작게</small> 표시하는데 사용됩니다. 
  </p>

각 태그들을 안 쓰고 해당 역할을 하는 CSS를 쓰는 것이 더 화면이 이쁘고 섬세하다.

왜냐하면, CSS에서는 키보드 입력을 나타낼 때 그림으로 나타낼 수 있고, 글자를 얼마나 작게 할지 조정할 수 있기 때문이다. 그럼에도 불구하고 위 태그들을 쓰는 이유가 있다. 

 

초반 강의에서도 말했듯이 HTML 태그들은 웹페이지 내에 해당 내용이 무슨 의미를 가지는지 정보를 개발자에게 전달하는 역할을 한다.

 

따라서 kdb는 키보드를 나타낸 것이란 정보를 전달한다.

dfn은 dfn 영역이 뒤에서 설명 하고 있는 특정 용어라는 정보를 전달한다.

small 영역은 해당 텍스트가 다른 텍스트에 비해 작게 보일 것이라는 정보를 전달한다. 

해당 정보들은 검색 엔진이 인식하기 때문에, 관련 내용을 찾는 사용자에게 해당 태그로 쓰여진 내용을 우선적으로 띄워줄 확률이 높아진다.

4.아무것도 하지 않는 태그

  <h1>아무것도 하지 않는 두 태그</h1>

  <span>span 태그 1</span>
  <span>span 태그 2</span>
  <span>span 태그 3</span>
  <span>span 태그 4</span>
  <span>span 태그 5</span>

  <br><br>

  <div>div 태그 1</div>
  <div>div 태그 2</div>
  <div>div 태그 3</div>
  <div>div 태그 4</div>
  <div>div 태그 5</div>

<span>과 <div>는 특별한 기능이 없는 컨텐츠 주머니이다.

이 둘의 차이는 주머니가 차지하는 공간이다. 

<span> 태그는 한 줄씩 적어도

과 같이 옆으로 나열되고, 공백 없이 해당 글자 만큼만 공간을 차지한다. 

반면, <div> 태그는 해당 글자가 적힌 줄 자체를 차지한다.

위의 태그들이 구현된다면,

이와 같이 태그마다 한 줄씩 차지한다. 

해당 태그들의 위치는 java 객체 지향에서 object 클래스와 같은 위치이다.

**object클래스는 java 모든 클래스의 조상이 되는 클래스로,

다형성의 원리에 따라, object 참조 변수는 모든 클래스의 객체를 참조할 수 있다.

 

<span>은 <em>, <a>, <strong> 등의 태그들의 조상이 되는 태그이다.

<div>는 <h1~6>,<p>,<ul>등의 태그들의 조상이 되는 태그이다.

 

각 후손 태그들의 기능을 전부 빼버리면 각각 <span>과 <div>가 된다. 

 

*그렇다면, 아무 기능도 없는  <span>, <div>를 왜 배우는가?  

이 태그들이 CSS와 콜라보 하여 무궁무진한 의미를 담기 때문이다. 

이는 후에 CSS에서 배워보자.