먼저 VScode를 설치한다.
설치 후 확장팩으로 아래와 같이 깔아주면 html을 작성할 때 편리하다.
- korean Language pack은 한국어로 바꾸어주는 것이고
- open in browser는 html을 작성한 다음 alt + b 를 눌렀을 때 브라우저로 바로 결과를 확인할 수 있도록 해준다.
- Live Preview는 아래 그림과 같이 버튼을 클릭하면 우측에서 내용을 바로바로 확인이 가능하다 (꼭 벨로그에 글 작성할때 같다)
- alt + shift : 줄 복사
- 선택한 줄의 텍스트를 오른쪽으로 이동 : tab
- 선택한 줄의 텍스트를 왼쪽으로 이동 : tab + shift
- alt + b : 브라우저 실행
📌 h1 ~ h6
제목처럼 굵게 나타나며 뒤에 숫자가 커질수록 그 크기가 작아진다.
즉, h1이 가장 큰 헤드라인과 같은 역할을 한다.
<body>
<h1>H1</h1>
<h2>H2</h2>
<h3>H3</h3>
<h4>H4</h4>
<h5>H5</h5>
<h6>H6</h6>
</body>
📌 p
<body>
<p>단락1</p>
<p>단락2</p>
단락을 나누지 않은 구간1
단락을 나누지 않은 구간2
</body>p태그는 단락을 나누어 준다.
📌 table / tr / td / th
table 태그는 테이블을 만들 수 있는 태그다.
table 태그 안에 행을 만들 수 있는 태그인 tr을 넣고 다시 그 안에 열을 만들 수 있는 td 태그를 넣는다.
특별히 중요하게 작성해야 하는 열 이름이라면 td 대신 th를 넣어서 글씨를 진하게 넣을 수도 있다.
table 태그 안에는 옵션을 넣을 수 있다.
기본적으로 <table>만 적을 경우에 테이블의 선이 보이지 않는데 옵션을 넣어야 선이 보이며 그 선의 두께, 테이블 내 칸의 두께 등을 설정할 수 있다.
border 옵션은 선의 굵기를 나타내며
cellpadding은 셀과 테이블의 선 사이의 간격을 조절한다
cellspacing은 셀과 셀 사이의 간격이다.
<body>
<table border="1" cellpadding="10" cellspacing="0">
<tr>
<th>No.</th>
<th>color</th>
<th>animal</th>
</tr>
<tr>
<td>1</td>
<td>red</td>
<td>rabbit</td>
</tr>
<tr>
<td>2</td>
<td>orange</td>
<td>bear</td>
</tr>
<tr>
<td>3</td>
<td>yello</td>
<td>horse</td>
</tr>
<tr>
<td>4</td>
<td>blue</td>
<td>cat</td>
</tr>
</table>
</body>
📌 img
이미지 파일을 넣을 수 있는 태그로
옵션인 src는 이미지 파일의 경로를 넣어주어야 하며
alt는 대체 택스트로 이미지 파일이 오류로인해 불러오기에 실패했을 때 나타나는 텍스트다.
title은 해당 이미지에 마우스를 올렸을 때 나타나는 툴팁으로 나타난다.
height와 width는 각각 높이와 너비를 지정해 주는 것으로 각각 하나씩만 지정할 경우 나머지는 해당 비율에 맞추어 크기가 변하지만 둘다 설정할 경우 비율이 깨져서 출력될 수 있다.
<body>
<img src="짱구/흰둥이.png" title="귀여운 흰동이" height="300">
</body>
📌 a
링크를 넣어 문서와 문서를 연결해주는 역할을 한다
html에서 이미지는 글자로 취급하기 때문에 a태그를 이용해 링크를 걸 수 있다.
href옵션에 연결될 링크를 넣어주고 a태그 안에 링크랑 연결될 글자 또는 이미지를 넣어준다.
<body>
<a href="https://search.naver.com/search.naver?query=짱구유리">
<img src="짱구/유리.png" height="150px">
</a>
</body>
<!--유리 이미지를 클릭하면 네이버 검색창에 짱구유리를 검색한 페이지로 넘어가게 된다-->각 태그의 자세한 내용들은 다음 글에 올려보도록 하겠다 ㅎㅎ
