HTML 기본태그들과 역할 (2)

이미지 (img) - 인라인 블록

HTML ＜img＞태그는 웹 페이지에 이미지를 삽입하는 데 사용한다. 이미지는 기술적으로 웹 페이지에 삽입되지 않고 링크된다. ＜img＞태그는 참조 된 이미지에 대한 유지 공간을 만들며 빈 요소이다. ＜img＞태그는 두 개의 필수 속성이 있는데 src, alt가 있다. src는 이미지의 경로(URL)을 지정하고 alt는 사용자가 이미지가 볼 수 없을 때 이미지 대신 대체 텍스트를 제공한다.

• src : 현재 HTML문서 위치에서의 이미지가 있는 상대경로를 적어준다.
  　 　( 대표적인 파일형식은 jpg, png, gif, jpeg, svg가 있다. )

• alt : alt속성은 Alternate(대체하다)의 줄임 말 이며 이미지가 문제로 인하여 불러오지 못 했을경우에 대체해주는 텍스트다. 그리고 이 alt속성은 시각장애인들은 이미지를 볼 수 없을 때 리더기가 읽어주며 이미지를 제대로 이해하지 못하는 검색엔진 역시 alt속성으로 받아들인다. 그리고 이미지에 alt속성이 없을 경우 웹표준에 어긋난다. ( title속성으로 alt를 대체할 수 없다. )

• width: 이미지의 너비값을 설정한다. 단위는 px

• height: 이미지의 높이값을 설정한다. 단위는 px

하지만 width와 height를 강제로 지정하면 원본 비율이 없어져서 사진이 안좋게 나오므로 내부 style태그를 사용해서 너비와 높이값을 넣는게 좋다.

 <img src="images/cat.jpg" alt="고양이" width="800" height="400">

이미지 맵

이미지에 링크를 걸을 경우 보통 ＜a＞태그 안에 ＜img＞를 써서 하나의 링크만 걸어주는데 이미지 맵을 쓸 경우에는 ＜img＞의 usemap속성을 써서 ＜map＞태그의 id와 연결시켜 이미지의 좌표를 이용하여 여러 이미지를 링크로 걸어줄 수 있디. ＜map＞태그는 하나 이상의 ＜area＞태그를 가지며 이 ＜area＞태그가 바로 버튼과 같은 역할을 한다.

<img src="/resources/images/logo/256x256.png" alt="devkuma logo" usemap="#devkuma"/>
<map id="devkuma">
  <area shape="rect" coords="105,145,150,175" alt="코"
        href="https://ko.wikipedia.org/wiki/%EC%BD%94">
  <area shape="rect" coords="25,50,60,85" alt="왼쪽 귀"
        href="https://ko.wikipedia.org/wiki/%EA%B7%80">
  <area shape="circle" coords="205,65,30" alt="오른쪽 귀"
        href="https://ko.wikipedia.org/wiki/%EA%B7%80">
</map>

• shape : map의 모양. 링크를 걸어줄 영역의 모양. 기본값은 default며 이미지 전체 영역. rect, circle, poly 중에서 하나를 선택하여 사용한다.

• coords : map의 좌표. 다각형(poly)일 경우, 최소 3개의 좌표가 필요하다.

• alt : "스크린 리더" 사용자처럼 이미지를 볼 수 없는 경우, 또는 이미지를 불러올 수 없는 브라우저를 위한 설정. 이미지를 대신할 문구를 넣어준다.

• title : 말풍선. 해당 영역으로 마우스를 가져갔을 때 나타나는 문구.

• href : 클릭시 이동할 URL

링크 (link) - 인라인 요소

웹 페이지는 다른 페이지나 다른 사이트로 연결되는 수많은 하이퍼 링크(Hyperlink)가 존재한다. 이러한 하이퍼 링크를 간단히 링크(link)라고도 부르며, HTML에서는 ＜a＞태그로 표현한다. "a"는 앵커(Anchor)를 의미한다.
＜a＞태그는 두 가지 역할을 하는데 하나는 링크로써의 기능이고, 다른 하나는 앵커로써 링크의 타깃이 되는 기능이다. 보통 ＜a＞는 hrer 속성을 통해서 외부 페이지로 이동을 하는데 페이지 내부에서도 이동이 가능하다.
( 시각장애인들을 위하여 리더기에 읽어줄 title속성으로 부연설명을 적어주는 것도 좋은 방법이다. )

• 내부이동 : 이동하려는 곳에 ID선택자를 주고 그 선택자를 ＜a＞태그 href속성값에 넣어준다.

<h1>목차</h1>
<a href="#history">1. 역사</a>
<h2 id="history">역사</h2>

• 외부이동 : 외부이동을 하려는 그 사이트의 사이트 주소를 ＜a href="이곳에 넣어준다"＞ 주소 전체를 다 써줘야 한다.

<a href="https://www.naver.com/">네이버로 이동</a>

• target 속성 : target 속성은 해당 링크를 현재 페이지에서 열지, 새 창 (새 탭)에서 열 것인지 또는 다른 프레임에서 열 것인지를 결정하는 속성이다.

1. _self : 현재 페이지에서 이동한다. ( Default 값 )
2. _parent : 부모 프레임이 있다면 부모 페이지에서 이동한다.
3. _top : 최상위 페이지에서 이동한다.
4. _blank : 새로운 창(탭)에서 페이지가 열린다.

( _parent와 _blank는 예전 ＜frame＞ 태그에서 사용하던 방식이다 HTML5 부터는 ＜iframe＞서 사용가능하나 거의 사용하지 않는다. )

( _blank와 blank의 차이점은 _blank는 계속해서 새 탭으로 열리지만 blank는 탭이 초기에 한번 열린뒤 또 열면 열려있는 탭에서 새로고침(?) 같은 걸하고 또 다시 새 탭으로 열리지 않는다. )

( _blank 사용시 시각장애인들은 새창에서 열린지 현재창에서 열린지 알수가 없기때문에 ＜span＞태그로 새창에서 열림을 해주고 blind 클래스로 실제 화면에선 보이지 않도록 처리해준다. )

• 링크의 상태(state) : HTML 링크의 상태는 다음과 같이 4가지가 있다.

1. link : 아직 한 번도 방문한 적이 없는 상태 (기본설정)
2. visited : 한 번이라도 방문한 적이 있는 상태
3. hover : 링크 위에 마우스를 올려놓은 상태
4. active : 링크를 마우스로 누르고 있는 상태

의미없는 태그 ＜div＞ - 블록 ＜span＞ - 인라인

＜div＞와 ＜span＞은 아무런 의미를 가지고 있지않고 레이아웃 잡는 용도로 많이 쓴다. ＜div＞는 다른 HTML 요소에 대한 컨테이너로 사용되고 class속성이나 id로 style을 잡아준다. ＜span＞은 텍스트의 특정 부분을 묶거나 특정 따로 style을 적용하기위해 사용한다.

<div class="wrap">
	<p> 텍스트 </p>
   	<span> 텍스트 </span>
</div>

• id 속성 : id속성은 HTML 요소에 대한 고유 ID를 지정한다. id속성은 CSS를 적용할 때나 JS에서 선택자를 잡을때 용이 하다. 그리고 ＜a＞태그 href속성으로 내부이동으로 할 때도 쓰인다. ( ID는 중복이 되어서는 안된다. )

• class 속성 : HTML class속성은 HTML요소에 대한 클래스를 지정하는 데 사용된다. 중복으로도 사용 가능하다. class속성은 CSS를 적용할 때나 JS에서 선택자를 잡을 때 용이하다.

iframe

iframe 이란 Inline Frame의 약자로, 웹 브라우저 내에 또 다른 프레임, 즉 현재 브라우저에 렌더링되고 있는 문서 안에 또 다른 HTML페이지를 삽입할 수 있도록 하는 기능을 제공한다. 검색을 통해 다른 블로그의 게시물이나 기사를 읽다 보면 글 아래에 유튜브 동영상이 삽입되거나 지도가 보여진다거나 하는 상황들이다. 하지만 ＜video＞나 ＜audio＞가 생겨서 요즘엔 많이 쓰이지 않는다.

iframe의 속성들

• src : 파일명이나 다른 웹 페이지의 주소를 넣는 곳

• title : 현재 iframe에 대한 설명

• width : 너비

• height : 높이

iframe을 추천하지 않는 이유

HTML5가 차세대 웹표준으로 정해지면서, iframe을 대신할 수 있는 여러 태그들이 추가되었고 공식문서에서는 추가된 태그의 사용을 권장하고 있다.

1. CSS(cross site scripting)에 취약 -> 악의적인 사용자가 다른 도메인에서 스크립트를 통해 플러그인을 실행하거나 입력을 가로채는 등의 행위를 할 수 있다.
2. 사용성 문제 -> 브라우저의 뒤로가기 버튼을 간혈적으로 작동되지 않게 하는 등의 웹의 개념 모델과는 맞지 않는 여러 속성들 때문에 브라우저가 정상적으로 내용을 이해하지 못하는 경우들이 생긴다.
3. Google은 다음은 이유들 때문에 iframe생성을 자제하는 것을 권장한다.

• iframe은 웹 크롤링에 문제를 끼칠 수 있음
• 웹의 개념 모델과 일치하지 않기 때문에 검색 엔진에 문제를 일으킬 수 있음
• 한 페이지에 하나의 url만 표시
• iframe내에서 따로 연산된 후 보여지므로 필연적으로 사이트의 overhead를 유발할 수 있다.

출처 - http://www.devkuma.com/books/pages/112
http://webberstudy.com/html-css/html-1/phrase-elements/
https://yeoulcoding.tistory.com/143