211011
제목 - h1 ~ h6
사용자 에이전트는 웹 브라우저라고 이해하자. 노션도 그렇지만 헤더, 서브헤더 등은 웹 접근성을 위한 자동 목차 만들기 등에 사용된다.
큰 글씨 쓰고 싶으면 h 태그를 쓰는 게 아니다. 브라우저별로 배정된 크기가 다르니까 그렇다.
예제 코드를 보면 좋다.
SEO를 위해 맞춰주어야 검색엔진이 어떤 내용이 문서를 아우르는 것인지 더 명확히 인식한다.
본문 - p
html에서 스페이스바 여러개도 한개로 인식하고 엔터를 쳐도 한줄로 나온다.(개행 무시)
왜 p 태그로 빈 줄을 추가해서는 안되는가? 스크린 리더 사용자는 문단의 존재를 전달 받지만 내용이 없어 혼란스러워할 것이다.
본문 - br
html에서 개행은 무시되므로 br 태그로 대체하면 되겠다.
아래와 같이 문단을 나누어서 여백을 많이 주고 싶을 때 br을 난무해서는 안된다. CSS를 사용하자.
문단 구분은 무조건 p태그 2개로 나뉘어야 한다. 서로 연관성 있는 이야기끼리 묶어야 웹 접근성에 좋다.
본문 - blockquote, q
q 태그는 노션이나 깃헙에서 마크다운으로 굉장히 자주 쓰고 있지만 개발할 때는 사용해본 적이 없어서 주의깊게 봤다.
둘의 큰 차이점은 긴 텍스트는 블록, 짧은 텍스트는 인라인으로 넣게 된다는 것이다.
blockquote 태그는 들여쓰여져 있다.
q 태그는 기본적으로 쌍따옴표로 묶어준다.
이전에 배웠지만 p태그 같은 인라인 태그 안에는 블록 태그를 넣으면 안된다. 태그가 닫혀버린다.
출처를 위한 cite 속성이 존재한다.(유저에게 보이려는 게 아니라 브라우저를 위한 것)
본문 - pre
요 태그 안에 있는 내용은 그대로 표현된다. 코드를 보여주기에도 좋다.
고정폭글꼴이라 어떤 문자나 폭이 다 똑같이 보이도록 해준다.
본문 - figure, figcaption
앞서 말한 blockquote나 pre 등 독립적 컨텐츠 표현시 사용. 이미지에도 쓴다.
예를 들면 문단이 있고 설명이 짤막하게 있는데 서로가 연관되어 있는 내용일 때 이 둘의 연관성을 나타내기 위해 figure로 묶어서 figcaption으로 설명을 넣어준다면 좋다.
본문 - hr
CSS로 스타일 줘서 쓰자.
본문 - abbr, address, cite, bdo
이 4가지가 뭘까? cite는 좀전에 본 것 같지만 이건 태그다.
abbr은 약어를 뜻한다. WWW에 title 속성으로 원래 의미를 달아서 툴팁으로 보여줄 수 있다. title은 전역 속성이긴 하다.
address는 의미적인 게 크다.
cite는 인용의 출처. 유저에게 보여주기 위함.
bdo는 bidirectional override로 텍스트를 반대로 작성시킨다. 속성 dir="rtl" right to left(일반적)
포매팅 - b, strong
b나 strong을 구별하기 힘든데 어떻게 해야하는가? 요약 키워드, 리뷰 제품명 등등에 b를 쓰고
strong 태그는 앞의 내용에 비해 이 부분이 확실히 중요한가로 판단한다. 스크린리더가 더 또렷하게 읽는다.
포매팅 - i, em
이것도 브라우저나 스크린 리더한테는 다른 태그다.
구분해야 하는 부분? 기술 용어, 외국어 구절 등등
em 태그는 무언가를 강조하기 위한 것이다. (어떤 "때", "왜")
포매팅 - mark, small, sub, sup
mark는 스타일링 용도가 아니다.(브라우저별로 다르니까) 검색결과 표시나 와닿는 부분에 쓰는 것이다.
small은 덧붙이는 글이나 저작권, 법률 표기 등 작은 텍스트 용도이다.
sup은 대가리가 위에 있어서 지수 표시하는 데 쓴다고 외우면 편하다. sub은 아래 첨자로 각주를 다는 등의 용도다.
포매팅 - del, ins, code, kbd
이것들도 사용해본 적은 없는 것 같다.
스타일을 넣으면 형광 표시가 되는데 깃을 쓰다가 컨플릭트가 나면 +와 -로 코드들을 표시해주는 것과 같다. 속성에는 cite로 회의록, 이슈 추적 시스템 등의 변경점을 설명하는 url 등을 넣을 수 있고 datetime도 가능하다.
code는 pre와 다르게 인라인 요소다. 짤막하게 넣고 싶을 때 사용(pre 내에도 code를 여러 줄 하는 게 더 낫다)
kbd는 키보드 입력 요소를 보여주는 것으로 고정폭글꼴로 보여준다. 알아만 두자.
a태그와 하이퍼링크 1
href는 url 스킴만 만족하면 된다.
절대경로 : 어디든 그냥 거기로 이동시켜준다.
상대경로 : 현재 proj/index.html이면 여기 기준으로 이동할 파일이 어디 있는지를 명시해주는 것 ( 같은 폴더의 another폴더로 가려면 "another/index.html"
mailto나 tel을 입력해줄 수도 있다.
a태그와 하이퍼링크 1
속성을 따로 안 주면(_self) 그 창에서 띄워주므로 target = "_blank"를 줄 수 있다.
엔티티(Entity)
pre 태그 안에다가 html 태그를 보여주고 싶은데 꺾새를 태그로 인식해버린다. 문자 있는 그대로 인식하게 만드는 것이 엔티티다. 스페이싱 5개는 5 * : non-breaking spacing이란 뜻이다.
(w3c entity)