비전공자 HTML ④ - 목적에 따른 다양한 태그들
b 태그 vs strong 태그 / i 태그 vs em 태그
파워포인트, 워드, 노션 페이지 작업등을 하다보면 단축키를 많이 사용하게 된다.
그 중 하나가 Ctrl(혹은 커맨드) + b 이다. 바로 글자를 굵게 만들어 주는 것.
여기서 사용되는 b는 Bold에서 따온 것이다.
1. b 태그와 strong 태그
html 안에서도 태그를 통해 글자를 굵게 만들 수 있는데, 앞서 힌트를 주었듯, b 태그라는 게 존재한다.
또한, 단순히 글자를 굵게 만들어 주는 게 아니라 "이건 중요한 내용이야"라는 의미를 담아주는 태그가 있다. 이게 strong 태그다.
*꼭 알고 넘어가기: 요즘은 디자인 요소의 경우 CSS로 지정해주어야 한다.
source: MDN2. i 태그와 em 태그
파워포인트, 워드에서 또 자주 쓰는 단축키가 있다. Ctrl(커맨드) + i다. 흔히 얘기하는 '기울임체'를 사용하기 위한 단축키다. i를 사용하는 이유는 기울임체를 italic(이탤릭)체라고도 하기 때문이다. 이렇게 외우면 단축키 외우기가 쉽..(하략)
마찬가지로 HTML 역시 예전에는 i 태그를 통해 글자를 기울였다.지금은? 위 1번의 태그들과 같이 스타일 정보는 CSS로 분리한다.
source: MDN결국 이런 태그들은 정보의 종류를 구분하기 위해 사용되는 태그다. 우리가 굵기 설정, 기울임체 등을 어떨 때 사용하는지 생각해보면 바로 이해될 것이다.
3. 실습 (나폴리탄 괴담 작성해보기)
요즘 유행하는 공포 컨셉 중에 나폴리탐 괴단이라는게 있는데, 중요한 결말을 숨기고 상상력과 공포심을 발휘하게 만드는 전개 등이 주로 사용된다.
Ex)
*경비원 근무 수칙*
1. 9시, 11시, 새벽 1시, 새벽4시에 꼭 순찰을 도세요.
2. B동의 11층에서 비명이 들려도, 신경쓰지도 쳐다보지도 마세요.
3. 매주 금요일 새벽 3시에는 놀이터 화장실 세 번째 칸에서 물이 안 새는지 확인해주세요.
4. 식대는 하루에 1만원 까지만 지원이 됩니다.
5. 근무 수칙 3번은 민원 증가로 인해 삭제되었습니다. 원래 아무 내용도 적혀있지 않은 수칙입니다.
약간 이런 느낌?
강조하고 싶거나 구분하고 싶은 내용 등을 <em>태그와 <strong> 태그를 활용해서 표기해보자.
이전 장에서 활용했던 줄바꿈, 문단 나누기, h1 태그 등을 활용해도 좋다.
https://gist.github.com/mind-miner-dave/26b6ae3a2efd671faa72b05798db4477
나는 위와 같이 작성해봤다. 이런 류의 글은 안 써봐서 창의력 매우 부족^^; 중요한건 실습이니까 대충 쓰고 넘어가자. 정답이 있는 것은 아니니, strong 태그와 em 태그를 어디에 활용할지, 잘 적용이 되었는지 등을 신경써주면 충분하다.
결과물은 위와 같이 나왔다. 나처럼 위 아래에 구분선을 넣고 싶다면 <hr> 태그를 활용하면 된다.
4. sup 태그와 sub 태그
https://blog.naver.com/somang8991/2214533780002의 3제곱, x의 y승 같은 것들의 표기, 혹은 각주/변수/화학식 등의 표기는 어떻게 할 수 있을까?
전자는 sup 태그로, 후자는 sub 태그를 사용하면 된다.
source: MDN위 이미지에 있는 산식을 구현해보자.
활자 배치를 위 첨자로 해야하면 <sup> 태그, 아래에 해야하면 <sub> 태그를 사용하면 된다.
숫자를 사용하든 지수를 사용하든 상관없다.
https://gist.github.com/mind-miner-dave/c9a9157bb218e803adc62bd9312780e0
만약 막힌다면 위 스니펫을 복사하여 비교 및 테스트해봐도 좋다.
5. 밑줄, 취소선 태그: u 태그 & s 태그
u 태그는 현재 '철자 오류' 등을 강조하는 용도로 사용 된다.
s 태그는 더 이상 유효하지 않은 정보를 취소선과 함께 나타낸다.
정리하면,
철자 오류 표시 -> u 태그
유효하지 않은 정보 표시 -> s 태그
위와 같이 직접 타이핑하면서 실습해보고 넘어가자.
다음장에서는 인용문과 출처 등을 표기하는 태그에 대해서 짚고, 목록을 표현하는 태그들까지 알아보겠다.
