42seoul이 끝난지 1개월... 함께 으쌰으쌰했던 언니들과 함께 앱 개발을 해보기로 했다. 하지만! 두둥탁!!! 지금까지 접해본 언어는 C언어 하나뿐이었기 때문에 앱개발을 위해 HTML, CSS, JavaScript를 새로 배워보기로 했다. 먼저 시작하는 것은 웹 문서를 만드는 언어인 HTML과 만든 웹 문서를 꾸미기 위한 CSS이다!
<Do it! HTML5 + CSS3 웹 표준의 정석>이라는 책을 발견해 이 책과 구글링을 통해 혼자 해보려고 한다.
편집기는 원래 사용하던 VS code를 사용할 예정이다.
HTML 문서의 기본 구조
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title> HTML과 CSS </title>
</head>
<body>
<h1> Hello World </h1>
</body>
</html><!doctypeㅤhtml>
먼저 가장 위에 쓰여있는 <!doctypeㅤhtml>은 현재 문서가 html로 쓰여진 웹 문서라는 뜻이다. 즉 문서 유형을 지정해 준다.
<html> ~ </html>
<html> 태그는 웹 문서의 시작을 알려주고, </html> 태그는 문서의 종료를 알려준다.
<head> ~ </head>
<head> 태그와 </head> 태그 사이에는 웹 브라우저에서 보이지 않지만 웹 브라우저가 알아야 할 정보를 담는다. 예를 들얼 <meta charset="utf-8">은 html의 문자들을 utf-8로 인코딩하라는 정보를 담고 있다. 이를 통해 우리가 문자를 깨지지 않고 볼 수 있게 된다.
<body> ~ </body>
<body> 태그와 </body> 태그 사이에는 실제 브라우저에 보여지는 내용을 담는다. 이 부분을 실제로 사용자가 보게 되는 것이다.
텍스트 관련 태그 - (1)
제목
<h1> ~ </h1> 가장 크게 표시됨
<h6> ~ </h6> 가장 작게 표시됨
단락
<p> ~ </p> 앞뒤에 줄바꿈이 있는 텍스트 덩어리
줄바꿈
<br> 닫는 태그 없음!!!
수평줄
<hr> 가로선 삽입 & 닫는 태그 없음
인용문
<blockquote> ~ </blockquote> 인용문을 삽입할 때 사용하며 다른 텍스트보다 들여써짐
텍스트 관련 태그 - (2)
굵게 표시
<strong> ~ </strong> 굵게 "강조"할 텍스트
<b> ~ </b> 굵게 "표시"할 텍스트
*두 태그는 화면에 나타났을 때 차이가 없다.
이텔릭체
<em> ~ </em> 이탤릭체로 "강조"할 텍스트
<i> ~ </i> 이탤릭체로 "표시"할 텍스트
인용
<q> ~ </q> 자동으로 인용내용에 "~"를 붙여줌 & 줄바꿈 하지 않음
형광펜
<mark> ~ </mark> 형광펜같은 효과를 내줌
줄바꿈 없이 단락 묶기
<span> ~ </span> 줄바꿈 없이 일부 텍스트만 묶어 스타일을 적용하고자 할 때 사용
목록을 만드는 태그
순서 없는 목록 (unordered list)
<ul> ~ </ul> 순서가 필요하지 않은 목록임을 표시
<li> ~ </li> 각 항목을 표시
<ul>
<li> 첫번째 내용 </li>
<li> 두번째 내용 </li>
<li> 세번째 내용 </li>
</ul>- 첫번째 내용
- 두번째 내용
- 세번째 내용
순서 있는 목록(orderded list)
<ol> ~ </ol> 순서가 필요하지 않은 목록임을 표시
<li> ~ </li> 각 항목을 표시
<ol>
<li> 첫번째 내용 </li>
<li> 두번째 내용 </li>
<li> 세번째 내용 </li>
</ol>- 첫번째 내용
- 두번째 내용
- 세번째 내용
표를 만드는 태그
기본 구조
<table> ~ </table> 표의 자리 만들기
<tr> ~ </tr> 행 만들기
<td> ~ </td> 각 셀 안에 들어갈 내용
<table>
<tr>
<td> 1행 1열 </td>
<td> 1행 2열 </td>
</tr>
<tr>
<td> 2행 1열 </td>
<td> 2행 2열</td>
</tr>
</table>| 1행 1열 | 1행 2열 |
| 2행 1열 | 2행 2열 |
제목
<caption> ~ </caption> 표의 위쪽 중앙에 표시됨
<figcaption> ~ </figcaption> 태그 위치에 따라 제목의 위치가 달라짐
<table>
<caption> 위쪽 중앙에 위치한 제목 </caption>
<tr>
<td> 1행 1열 </td>
<td> 1행 2열 </td>
</tr>
<tr>
<td> 2행 1열 </td>
<td> 2행 2열</td>
</tr>
</table>| 1행 1열 | 1행 2열 |
| 2행 1열 | 2행 2열 |
<figure>
<figcaption> 위쪽에 위치한 제목 </figcaption>
<table>
<tr>
<td> 1행 1열 </td>
<td> 1행 2열 </td>
</tr>
<tr>
<td> 2행 1열 </td>
<td> 2행 2열</td>
</tr>
</table>
</figure>| 1행 1열 | 1행 2열 |
| 2행 1열 | 2행 2열 |
<figure>
<table>
<tr>
<td> 1행 1열 </td>
<td> 1행 2열 </td>
</tr>
<tr>
<td> 2행 1열 </td>
<td> 2행 2열</td>
</tr>
</table>
<figcaption> 아래쪽에 위치한 제목 </figcaption>
</figure>| 1행 1열 | 1행 2열 |
| 2행 1열 | 2행 2열 |
열 또는 행 합치기
<td colspan = "합칠 셀의 개수"> ~ </td> 열 합치기
<td rowspan = "합칠 셀의 개수"> ~ </td> 행 합치기
표의 구조 정의하기
<thead> ~ </thead> 제목 부분
<tbody> ~ </tbody> 본문 부분
<tfoot> ~ </tfoot> 요약 부분
이 외에도 HTML에는 다양한 태그가 존재하지만 나는 이런 태그들을 다 외우지는 않을 것이다. 왜냐하면 우리는 필요한 태그가 있을때마다 검색을 하면 된다!
이 사이트에는 다양한 html 태그들이 많이 사용하는 순으로 정리되어 있다. https://www.advancedwebranking.com/seo/html-study/
