본문 바로가기

개발/HTML

HTML 텍스트 관련 요소의 사용 <abbr> <address> <strong> <sub>


HTML-5 <abbr>태그


<abbr> 태그는 abbreviation(약어) 태그이며

약어인 단어를 툴팁으로 표시할수있습니다.

사용법은


	

홍남기 미래창조과학부 1차관은 "오늘날 한국은 국내총생산(GDP) 대비 연구개발(R&D) 투자 1위, 블룸버그 혁신 역량 1위 국가가 됐다"며

"하지만 핑크빛 통계 수치에 안주할 겨를이 없이 저성장이 '뉴노멀'로 자리 잡고 최근 브렉시트까지 겹쳐 세계 경제가 출렁이고 있다"고 말했다.


위와같이 <abbr> 태그로 약어를 감싼뒤 title 속성에 약어의 뜻을 쓰게되면

툴팁으로 뜻이 나타나게 됩니다.




HTML-6 <address>태그


<address>는 태그 주소를 표시할때 사용하는 태그입니다. css 를 사용해서 표현할수도있지만 

html 에서는 좀더 간편하게 태그를 표현하기위해서 address 라는 태그를 만들었습니다.

사용법은



	
Address: Dong Soong Dong, Jong Ro Gu, Seoul
Phone: 02-123-1234


와 같이 사용하면 주소텍스트를 좀더 주소답게 표현할수 있습니다.




HTML-7 <strong>,<sub>태그


<strong> 태그는 강조의 의미를 가지고있으며 글자를 굵게 표시해줍니다.

사용법은


캘리포니아 포도원은 크게 3개 지역으로 나파 밸리 Napa Valley 와 소노마 카운티 Sonoma 지역, 중부 내륙의 산죠퀸 밸리San Joaquin Valley, 그리고 남부 해안지역의 몬트래이 카운티 Monterey County와 산타 클라라 Santa Clara 가 있다.


와 같이 강조하려는 글자에 <strong> 태그를 감싸주면 굵게 표시되는것을 알수있습니다. 

글자를 강조하고자할때 <strong>과 <b> 태그 2개중 어느것을 사용할까 고민할 경우가 있습니다.

그럴땐 해당글자가 정말 강조하고자하는 텍스트인지 아닌지에대해 구별할 필요가있습니다

왜냐하면 stong 은 말그대로 강조의 의미를 가지고있으며 스크린 리더기에서는 이를 강조의 의미로

확인하고 표현이 됩니다. 하지만 b태그는 단지 글자를 굵게해줄뿐 스크린리더기에서 해당 글자가

강조하려는 글자인지 알수가없기때문입니다.

따라서 상황에 따라 두가지 태그를 잘이용하는것이 좋습니다.


위 코드를 실행하면  지역이름이 한글과 영문이 같이 쓰여있어 글이 지저분해보인다.

이럴때 사용하는것이 sub태그이다


<sub> 태그는 아랫첨자 태그이다

사용법은


캘리포니아 포도원은 크게 3개 지역으로 나파 밸리 Napa Valley 와 소노마 카운티 Sonoma 지역, 중부 내륙의 산죠퀸 밸리 San Joaquin Valley, 그리고 남부 해안지역의 몬트래이 카운티 Monterey County와 산타 클라라 Santa Clara 가 있다.


와같이 <sub>태그를 사용해서 아랫첨자로 바꿀 문장을 감싸주면된다.

이렇게 하면 좀더 글이 세련되보이고 깔끔해진다.