html - b / strong / i / em / abbr / cite / image-map 태그

html, css 를 공부하며 기존에 잘 몰랐던 내용을 위주로 정리를 해보려고 한다.(사실 html 태그는 공부를 해도 계속 까먹게 되는 것 같다. 자주 사용해야 까먹지 않을 것이다..)

가장 먼저 html 태그에서 b vs strong, i vs em 태그를 비교해보고 처음 알게 된 abbr, cite, image-map 태그를 정리하겠다. 추가적으로 매 번 헷갈리는 target 의 속성에 대해서도 정리를 해보려고 한다.

 

 

b vs strong 태그

두 태그 모두 텍스트를 굵게 표현하는데 사용하는 태그이다.

하지만 <b> 요소는 텍스트 자체에 주의를 끌기 위해 사용하는 것이고, <strong> 요소는 콘텐츠 자체의 중요성을 강조할 때 사용한다는 점에서 차이가 있다.

사실 두 태그 역할이 같은데 굳이 구분해서 사용할 필요가 있을까 싶지만, 웹 브라우저를 읽을 수 있는 사람에게는 같은 결과로 보여질 수 있지만 웹 브라우저의 태그를 통해서 내용을 읽을 수 있는 사람들에게는 태그 각각의 역할에 따라 콘텐츠를 전달력, 이해도가 달라질 것이라고 생각한다. 그런 점에서 태그의 역할, 목적을 잘 이해하는 것이 중요하다고 본다.

아래는 b, strong 태그의 예시를 보여준다.

b vs strong 태그 예시

 

 

i vs em 태그

아래 예시를 보면 알 수 있듯이 두 태그 모두 이탤릭체 모양과 비슷한 결과를 가져온다.

i vs em 태그 예시

하지만 em 은 이름에서 알 수 있듯이 문맥 강조를 의미한다. 따라서 이탤릭체로 보여지지만 내용을 강조하기 위해 사용하는 태그라는 의미에서 i 태그와 차이가 있다.

 

 

abbr 태그

abbr 태그는 축약형이나 머리글자로만 된 단어를 정의할 때 사용하는 태그이다. 아래와 같이 title 속성을 통해 전체 이름을 작성하고, 마우스를 올려놓으면 title 에 명시한 전체 이름이 나타나게 된다.

abbr 태그 예시

 

 

cite 태그

이 태그를 창작물의 제목을 정의할 때 사용하며 아래와 같이 사용할 수 있다.

cite 태그 예시

 

 

image-map 태그

html 에서 이미지맵을 만들어주는 태그로 이미지 파일에 링크를 걸어주는 태그라고 보면 된다. 

아래와 같이 작성을 하게 되면, 'usermap' 과 map 의 'name' 이 일치하는 곳에서 이미지맵을 만들어 준다.

이미지맵을 쉽게 만들어주는 사이트인 www.image-map.net/ 을 참고하여 만들었다.

<img src="/img/ikea.png" usemap="#image-map">

<map name="image-map">
    <area target="_blank" alt="솜마르플레데르 식탁보" title="솜마르플레데르 식탁보" href="https://www.ikea.com/kr/ko/p/sommarflaeder-tablecloth-patterned-red-light-beige-40523035/" coords="379,765,18" shape="circle">
    <area target="" alt="순쇠 야외의자" title="순쇠 야외의자" href="https://www.ikea.com/kr/ko/p/sundsoe-chair-outdoor-grey-80509315/" coords="576,560,17" shape="circle">
</map>

 

 

a 태그의 속성

_blank : 새로운 창에서 오픈

_self : (default) 현재 페이지에서 오픈

_parent : 15_iframe_content 와 같이 iframe 에 속해있을 때, 부모로 이동하는 것을 의미

_top : html 에 안에 iframe 구성하고 그 안에 iframe 을 넣었을 경우, 최상위 html 에서 응답을 받는 것을 의미

 

 

 

출처

TCP SCHOOL

코딩교육 티씨피스쿨