사용자 설정
운영체제 : MacOS
사용 프로그램 : Visual Studio Code - 다운로드 경로 : https://code.visualstudio.com/
확장 리소스 : Korean Language Pack for Visaul Studio Code, Live Server
HTML은 hyper text markup language의 줄인말로 웹페이지를 만들기 위해 개발된 마크업 언어이다.
vscode를 사용하여 실습을 진행 하였고 실습을 토대로 단축키와 태그를 정리하였다.
Korean Language Pack for Visaul Studio Code는 vscode 한국어 팩이며 Live Server는 코드가 변할때 웹페이지를 새로고침하지 않고 저장할때 마다 실시간으로 변경사항을 적용해준다.
단축키
MacOS vscode 단축키 배포 자료
https://code.visualstudio.com/shortcuts/keyboard-shortcuts-macos.pdf
! + Enter : 파일 확장자가 .html인 빈 파일에 html 기본 문법을 자동완성
Command + / : 한줄 주석
Command + K + C : 여러줄 주석 처리
Command + K + U : 주석 해제
Command + L + O : Live Server
Command + D : 같은 단어 선택 1번 눌렀을 시에는 표시만 되고 2번 눌렀을땐 일괄 수정 가능
Option + 화살표 위 또는 아래 : 선택된 코드 한 줄 위치 변경
Option + Command + 화살표 위 또는 아래 : 동시에 여러줄 타자 입력 가능
Option + Shift + 화살표 위 또는 아래 : 선택된 코드 한 줄 복사
태그
h1 : 제목을 작성할때 주로 사용 되는 태그로 h1 ~ h6 까지 존재
소스 코드
<h1>안녕하세요 32px 2em</h1>
<h2>안녕하세요 24px 1.5em</h2>
<h3>안녕하세요 21.28px 1.33em</h3>
<h4>안녕하세요 18.72px 1.17em</h4>
<h5>안녕하세요 13.28px 0.83em</h5>
<h6>안녕하세요 10.72px 0.67</h6>
결과
안녕하세요 32px 2em
안녕하세요 24px 1.5em
안녕하세요 21.28px 1.33em
안녕하세요 18.72px 1.17em
안녕하세요 13.28px 0.83em
안녕하세요 10.72px 0.67
브라우저 마다 폰트의 크기가 다르다고 함
p : 문단을 작성할때 사용
소스 코드
<p> 안녕하세요 처음뵙겟습니다 <p>
결과
안녕하세요 처음뵙겟습니다
br : 줄바꿈을 위해 사용 되는 태그
소스 코드
<p> 안녕하세요 <br> 처음뵙겟습니다 <p>
결과
안녕하세요
처음뵙겟습니다
div : 페이지 영역을 분리할때 사용 하는 태그로 기본적으로 block 속성을 가지고 있어 한줄을 다 차지하기 때문에 줄바꿈이 됨
소스 코드
<div>안녕하세요</div>
<div>처음뵙겟습니다</div>
결과
block 속성이 적용 되어 있기 때문에 한줄씩 출력된다.
span : 특별한 기능은 없지만 div와 비슷하게 사용되며 div와는 달리 inline 속성을 가지고 있어 사용한 만큼 공간을 차지하여 줄이 바뀌지 않고 나열됨
소스 코드
<span>안녕하세요</span>
<span>처음뵙겠습니다</span>
결과
안녕하세요 처음뵙겠습니다
inline 속성이 적용 되어 있기 때문에 나열된다.
img : 이미지나 gif를 올리는데 사용 되는 태그로 자동 생성시 기본적으로 src와 alt 속성이 같이 생긴다.
소드 코드
<img src="./img/laptop-1839876_1920.jpg" alt="이미지 깨지면 보임" style="width: 600px;height: 400px;">
결과
a : 페이지를 이동하거나 브라우저의 스크롤을 이동 시킬 때 사용하는 태그로 자동 생성시 href 속성이 같이 생긴다.
소스 코드
<a href="./test1.html">test1.html 파일로 이동</a>
결과
ul / li : 리스트를 생성할때 사용 되며 li와 같이 사용하지만 번호가 붙지 않고 점이 생긴다.
ol / li: ul과 마찬가지로 리스트를 생성할때 사용하는 태그로 li와 같이 사용하며 번호가 자동으로 번호가 매겨진다.
소스 코드
<ul>
<li>첫번째</li>
<li>두번째</li>
<li>세번째</li>
</ul>
<ol>
<li>첫번째</li>
<li>두번째</li>
<li>세번쨰</li>
</ol>결과
table : 표를 작성할때 쓰는 태그
col : table과 같이 사용되는 태그로 가로줄을 나타냄
tr : table과 같이 사용되는 태그로 세로줄을 의미
th : tr 태그와 같이 사용되며 헤더 셀로 내용 작성시 굵은 폰트로 적용 되며 중앙 정렬
td : tr 태그와 같이 사용되며 데이터 셀로 일반적인 데이터를 작성할때 사용
소스 코드
<table style="width: 300px;height: 300px;border-collapse: collapse;">
<col style="border:1px solid black;width: 100px;">
<col style="border:1px solid black;width: 100px;">
<col style="border:1px solid black;width: 100px;">
<tr style="height: 100px;">
<th style="border: 1px solid black;"></th>
<td style="border: 1px solid black;"></td>
<td style="border: 1px solid black;"></td>
</tr>
<tr style="height: 100px;">
<th style="border: 1px solid black;"></th>
<td style="border: 1px solid black;"></td>
<td style="border: 1px solid black;"></td>
</tr>
<tr style="height: 100px;">
<th style="border: 1px solid black;"></th>
<td style="border: 1px solid black;"></td>
<td style="border: 1px solid black;"></td>
</tr>
</table>결과
'HTML' 카테고리의 다른 글
| [HTML] input을 활용한 메뉴 탭 만들기 (0) | 2023.03.07 |
|---|---|
| [HTML] TABLE 태그 사용하여 입사지원서 만들기 (1) | 2023.02.28 |
| [HTML] A태그와 IMG태그를 활용하여 LIST 실습 (0) | 2023.02.28 |