유용한 크롬 익스텐션 : HTML validator, Web Developer, Photopea(포토샵 대용)
유용한 vscode 익스텐션 : Live Server, Image preview, HTML Snippets, Indenticator
vscode 현재파일 브라우저에서 여는 단축키 : alt + l + o(익스텐션필요)
HTML 주석 단축키 : ctrl + /
블록(레벨)요소(싸여있는 구조) : h1~h6, hr, p, blockquote, address
인라인(레벨)요소(규격없이 붙음, 위아래 여백이 없음) : q, strong, em
<<주요태그 및 유의점들 정리>>
h1~h6 : 제목 요소
- 인라인 요소는 블록레벨 요소 안에 넣어 사용해야 함.
- 블록레벨 요소 안에는 또다른 블록레벨요소를 넣어서 사용할 수 있음.
- 블록레벨요소를 넣을 수 없는 예외 : h1~h6, p, address(p제외)
p : 문단(블록레벨요소 넣지말기!)
hr / : 구분선
br : 줄바꿈
q : 인용구
strong : 강조
& nbsp; : 띄어쓰기
blockquote : 인용문
em : 약한강조
address : 사이트정보, 주소, 연락처
& gt; : >
& lt; : <
& amp; : &
img : 이미지 태그, src에는 파일경로, alt에는 텍스트정보, longdesc는 롱 디스크립션(파일지정)
div : 의미없는 블록레벨요소
span : 의미없는 인라인레벨요소
a : 링크 태그, href에는 url, title에는 커서도움말 target="_blank"는 새창, 링크가 메일일 경우 href="mailto:'메일주소'"
ol : 순서있는 리스트, li를 품을 수 있음
ul : 순서없는 리스트, li를 품을 수 있음
조직도, 탭 등 만들 때 ul안의 li가 새 ul을 품도록 해서 마크업
dl : 정의형 리스트, dt(title)와 dd(description)를 품을 수 있음, dt 아래 여러개의 dd가능, dl아래의 dd에 dl사용하기도 함
