본문 바로가기
프로그래밍/HTML5 태그 를 뛰어넘어라

(HTML/HTML5) 2.서식태그 글자 줄긋기 <del><ins><s><strike><abbr><acronym> 태그 4~9/39

by it-수다쟁이증후군 2019. 4. 6.
직전 포스트 복습
  1. 글자의 스타일을 변경해서 그 내용을 강조하는 방법 5가지
  2. 서식태그의 5가지 원형
  3. 글자 굵기, 글자에 줄긋기, 글자 크기, 글자서체 , 글자 배경색
  4. 글자 굵기 변경 태그는 b , strong , hn 태그

이전의 강의를 간략하게 줄이면 위와 같다. 서식태그 글자 줄긋기 태그에 대해서 알아보자.

html5 태그완전정복 글자 줄긋기


글자-줄긋기 태그는 서식태그39중에 7개가 있다. 아래 그림을 보면 간단히 알 수 있다.



1-1.html - <del> 태그 정리


의미/역활 :글자를 관통하는 줄긋기를 해서 취소 혹은 삭제의 느낌을 주고자 할 때 사용
사용법 :<del> 와 </del> 사이에 넣어 주기만 하면 된다.

html5 del 태그 예제



1-2.html - <del> 태그 한 걸음 더


일반적으로 우리가 홈페이지나 싸이트를 구축할 때 거의 사용하지 않는다. 취소선 사용하느니 그냥 지우고 새로 텍스트를 집어넣으면 되니까! 그럼 어디에서 볼 수 있는가? 바로 위키피디아. 나무위키 같은 백과사전 느낌의 정보제공 싸이트에서 볼 수 있다. 단순 정보제공이 아니라 기존의 정보가 변경되는 자체도 정보가 되는 싸이트를 만들 때 사용된다. 여기서 바로 나온다. 취소자체가 정보가 된다는 말은 취소의 근거는 무엇이고 언제 취소되었냐 하는 정보도 필요로 한다. 이를 del태그 속성에 넣어두었다. 아래표를 참조하자.

del 속성
속성Attribute 속성값Value 설명
1 cite URL 취소선을 사용하게 되는 근거를 제공하는 싸이트주소
2 datetime YYYY-MM-DDThh:mm:ssTZD 언제 취소되었는가?


2-1.html - <ins> 태그 정리


의미/역활 :del태그와 짝을 이루어 삭제된 정보대신 새로운 정보를 삽입할 때 사용
사용법 <ins> 와 </ins> 사이에 넣어 주기만 하면 된다.

html6 서식태그 ins 예제



2-2.html - <ins> 태그 한 걸음 더


ins 태그는 del태그와 짝을 이룬다. 어렵지 않다. del태그로 삭제하고 대신 할 정보를 ins태그로 넣어주면 된다. ins태그의 속성 또한 반복된다. 새로 넣어주는 정보의 근거와 시간. 딱 2가지.

ins 속성
속성Attribute 속성값Value 설명
1 cite URL 취소선을 사용하게 되는 근거를 제공하는 싸이트주소
2 datetime YYYY-MM-DDThh:mm:ssTZD 언제 취소되었는가?

여기서 또다른 질문. 그럼 새로운 정보를 넣지 않고 그냥 잘못된 정보를 삭제하는 방법은? 다음에서 알아보자.



3-1.html - <s> 와 <strike> 태그 정리


이것이야 말로 진정한 취소선이 아닐까 한다. 쭉 ~~~ 취소 퉤퉤퉤!
의미/역활 :글자를 관통하는 줄긋기를 해서 취소 혹은 삭제의 느낌을 주고자 할 때 사용
사용법 :<s> 와 </s> 혹은 <strike> 와 </strike> 사이에 넣어 주기만 하면 된다.

html5 서식태그 s strike 예제



3-2.html - <s> 와 <strike> 태그 한 걸음 더


두 태그의 차이점은 없다. html5에서 구버전과 신버전의 차이일 뿐. html5에서는 s 태그를 권장한다.



3-3.html - <del> 와 <s> 와 <strike> 태그 한 걸음 더


세 태그의 형태의 차이점은 전혀 ~~ 없다. 단지 이름붙이고 의미를 부여 했을 뿐이다. 컴퓨터가 알아먹을 수 있도록 말이다.
1) del태그는 ins와 짝지어 사용하고
2) strike 태그는 html5에서는 지원하지 않고
3) s 태그는 html5에서 사용하기를 권장한다.



4-1.html - <u> 태그 정리


의미/역활 :글자에 밑줄을 그어서 그 내용을 강조하기 위해서
사용법 :<u> 와 </u> 사이에 넣어 주기만 하면 된다.



5-1.html - <abbr> 와 <acronym>태그 정리


의미/역활 :글자에 밑줄을 그어서 줄임말을 표시하고 해당 줄임말에 마우스를 올리면 전체 문장을 보여준다.
사용법 :<abbr> 와 </abbr> 혹은 <acronym> 와 </acronym> 사이에 넣어 주기만 하면 된다.

html5서식태그 abbr acronym 예제



5-2.html - <abbr> 와 <acronym> 태그 한 걸음 더


두 태그의 차이점은 없다. html5에서 구버전과 신버전의 차이일 뿐 html5에서는 abbr 태그를 권장한다.



6.html <del> <ins> <s> <strike> <abbr> <acronym> 태그 최종정리

  1. 글자 가운데 줄긋기 3개 - del태그 s태그 strike태그
  2. 글자 밑줄 4개 - ins태그 abbr태그 acronym태그 u태그
  3. del태그는 ins 태그와 짝지어 사용
  4. strike태그 와 acronym태그 이제 그만!
  5. 글자 줄긋기 태그 7개는 5개로 줄어든다.
  6. del태그 s태그 ins태그 abbr태그 u태그

다음에는 서식태그중 글자크기변경과 관련된 태그에 대해서 알아보자.

댓글