[HTML] 초보자에게 유용한 비주얼 스튜디오 코드 단축키 태그 정리

초보자에게 유용한 HTML에 필요한 비주얼 스튜디오 코드 기본 단축키 및

초보자에게 HTML 태그를 정리해서 소개해드릴까 합니다. 

 

비주얼 스튜디오 &  HTML 코드 단축키

---

 

 1 

 

비주얼 스튜디오 기본 단축키

및 

HMTL 태그 정리  

 

[alt+L], [alt+O] : 실시간 보기  [ctrl+H] : 문서내용 바꾸기  [alt+shift+방향키(위/아래)] : 복사   ctlr+] :  들여쓰기 <br> 태그 : 줄바꿈, 종료태그가 없음. ex) 한줄한줄 끊어낼 때 쓰임 <br> <P> 태그 : 단락, 새로운 단락을 만듬.  앞뒤로 감싸서 태그를 만들어줌.  ex) <p>새로운 단락을 만듭니다.</p> <h1> ~ <h6> 태그 : 제목 태그 1~3번까지만 거의 쓰임  ** 기본 픽셀은 16px(12pt)이다 **  ※ 섹션에서 제목은 h2, 섹션에서 내부 내용은 h3을 많이 쓴다. <b> 태그 : 강조태그, 특정부분만 진하게 강조하고 싶을 때 쓰임. <strong> 태그는 의미론적인 태그임.  일반적으로 strong 쓰는 걸 권장함!(웹표준 준수때문) <i>, <em> 태그 : <i>는 이탤릭(기울임 문자)를 표현함) <em> 태그가 의미론적인 태그임.  <img> 태그 : 이미지 삽입 태그 종료 태그가 없다. <src> 태그 : 파일 경로, 이름 지정  <alt> 태그 : 대체 텍스트, 이미지를 보여주지 못할 때  <width, height> 태그 : 이미지 가로세로 크기 지정  (나중에 스타일에서 하게 됌)

 2 

[문자 관련 태그]

제목 : h1~h6
단락 구분 : p
줄 바꿈 : br
진하게 강조 : b, strong
기울여서 강조 : i, em
밑줄 태그 : u 

[이미지 관련 태그]

이미지 삽입 : img 
수평선 : hr 

[리스트]
순서 있는 리스트 : ol
순서 없는 리스트 : ul 

[표 테이블]
표 : table
줄 : tr
칸(셀) : td
제목 셀 : th 

 

[순서 있는 리스트 OL(ordered list)]
- 리스트는 <ol>태그로 선언하며 각 리스트 항목은 <li> 태그를 이용

※ 최근에는 반응형 때문에 표( table)보다는

리스트를 많이 쓴다.

- 표 <table> 행 <tr>, 열<td>, 제목 열 구성<th>
 

- height 값은 왠만한 경우 아니면 넣지 말기