알아둬야 하는 태그들
The document element
- html
Document metadata - head
- title
- meta
- link - style
Sections - body
- article
- section
- nav
- aside
- h1, h2, h3, h4, h5, h6 - hgroup
- header
- footer
- address
Grouping content - p
- blockquote
- ol
- ul
- menu
- li
- dl
- dt
- dd
- figure
- figcaption - main
- div
Text-level semantics - a
- em
- strong
- cite -q
- dfn - abbr
- code - var - span - br
- wbr
Embedded content - img
- picture
- source
- iframe
- video
- audio
- track
- Tabular data - table
- caption - colgroup - col
- tbody
- thead
- tfoot
- tr
- td
- th
Forms - form
- fieldset
- legend
- label
- input
- button
- textarea
- select
- option
- Interactive elements - details
- summary
- dialog
emmet 문법
치고 Tab키를 누르면 자동완성된다.
<body>
h1
h1{hello world}
h1+p
h1{hello}*10
h1#one <!--아이디주는법-->
h1.one <!--클래스주는법-->
table>(tr>(td*4))*3 <!-- 테이블 만드는 법 td(테이블데이터)가 열 tr(테이블로우)이 행-->
lorem <!--아무 의미없는 문자열 , 홈페이지 골격 잡을 때 필요하다.-->
lorem*5 <!--lorem의 문장이 5번 반복-->
lorem3 <!--lorem의 단어가 3개 나온다-->
img
img:z
a
a[a="value1" b="value2" c=1]
a[href="www.naver.com"]
h1.one.two#three <!--의 결과는
<h1 class="one two" id="three"></h1>이다. 클래스 2개와 아이디를 줄 때 사용한다.-->
h$*6 <!--변수할당-->
h$*6{hello world}
ol>li*6 <!-- ol은 번호순서 -->
</body>
</html>Ctrl + \ : 토글 보이기
Ctrl + O : 파일 열기
Ctrl + P : 프로젝트 검색
Ctrl + F : 열려 있는 파일 내에서 검색
Ctrl + Shift + F : 열려 있는 전체 프로젝트 내에서 검
Ctrl + , : Settings (설정가는법)
Ctrl + N : 새로운 파일
Ctrl + S : 파일 저장
Ctrl + Shift + S :다른 이름으로 저장
Shift + del : 라인 지우기
Ctrl + 클릭 : 여러줄 입력
1.<h1~h6>
heading은 제목을 지정하기 위해 사용됩니다. <h1>내용</h1> ~ <h6>내용</h6>까지 중요도에 따라 사용되며 단순히 글자를 크게하거나 굵게 하기 위해 사용하지는 않습니다.
2.<p>
단락을 표시하는 태그입니다.
3.<br>
<br> 태그는 줄바꿈을 위한 태그입니다. <wbr> 태그도 간혹 사용하는데요. <wbr>은 텍스트 박스에서 한 줄로 모두 표시가 안될 때에만 줄바꿈이 일어나게 하는 것입니다.
4.<hr>
단락을 구별할 때 사용됩니다. 그러므로 <p>내에서 사용되는 것은 웹 표준에 어긋나므로 사용하면 안됩니다.
5.<a href="경로">
앵커 태그는 인라인 요소입니다. html 문법 상 블록레벨 요소는 인라인 요소의 자식으로 사용되지 않지만, 앵커 태그만 예외적으로 블록 레벨 요소를 자식으로 하는것이 허용됩니다.
6.<mark>
<mark> 태그는 텍스트 내용 중 하이라이트 표시를 하고 싶을 때 사용합니다.
7.<abbr>
태그는 준말, 약자를 나타내고 싶을 때 사용합니다. 보통은 홀로 쓰이고 dfn 태그로 으로 감싸주기도 합니다.
<p>
<abbr title="National Aeronautics and Space Administration">NASA</abbr>는
미국의 국가 기관으로서 우주 계획 및 장기적인 일반 항공 연구 등을 실행하고 있다.
- 위키백과
</p>8.<sup>,<sub>
<sup>태그는 윗첨자, <sub>태그는 아랫첨자를 나타냅니다.
<p>x<sup>2</sup>=4</p> 의 결과는
x2=4
<p>H<sub>2</sub>0</p> 의 결과는
H2O
9. <blockquote>
인용볼록
<blockquote> <p>제발 그만해.. 이러다가 다~~ 죽어!</p> <cite>오징어게임 오일남</cite> </blockquote>
9. <span>
- 보통 줄 바꿈 없이 영역을 묶는 용도로 사용합니다.
뒤에서 배울 div는 줄바꿈이 됩니다. - div와 마찬가지로 최후 수단으로 사용한다.
