본 내용은 "생활코딩! HTML + CSS + 자바스크립트" 책을 통해 학습했음.
HTML 이란?
웹 페이지의 구조를 정의하고, 텍스트, 이미지, 링크 등 다양한 요소를 포함하여 웹 콘텐츠를 작성하고 표시하는 언어
웹 페이지란?
인터넷을 통해 접근할 수 있는 문서로, 텍스트, 이미지, 비디오, 링크 등 다양한 콘텐츠를 포함하여 웹 브라우저에서 표시되는 디지털 문서
태그란?
태그는 HTML 문서에서 요소의 시작과 끝을 표시하는 기호로, <태그이름> 형식으로 작성되며, 요소의 속성과 내용을 정의한다. 예를 들어, <p>는 단락을 시작하고 </p>는 단락을 종료한다. <br> 태그처럼 단락을 종료하지 않고 단락을 시작하기만 하는 태그도 있기에 사용할 태그의 형식을 어느정도 알아야 한다.
HTML 기본 양식
HTML은 기본적으로 <head>와 <body> 로 나뉘며, 이를 <html> 태그로 묶어준다. 즉, <head>는 본문을 설명을 작성하고, <body>는 본문의 내용을 작성하며 이 모두를 <html>로 감싸주는 것이다. 추가로 <html> 상단에 <!DOCTYPE HTML> 을 작성해주는데, 이는 이 문서에 HTML이 담겨 있다는 관용적인 의미로 쓰인다.
<!DOCTYPE HTML>
<html>
<head>
"본문에 대한 설명"
</head>
<body>
"본문"
</body>
</html>
기본적인 태그 알아보기
1. <title> 태그
일반적으로 <head> 태그에 작성하며, 작성한 값이 웹 페이지의 이름이 된다.
2. <meta> 태그
일반적으로 <head> 태그에 작성하며, HTML 문서의 정보를 제공하는 태그로, 문자 인코딩, 작성자, 페이지 설명, 키워드 등을 설정하는 데 사용한다.
<head>
<title>WEB1 - HTML</title>
<meta charset="utf-8">
</head>
3. <strong> 태그
글씨를 강조하는 역할을 한다.
<strong>강조할 문장</strong>
4. <h1>, <h2>, ... <h6> 태그
제목의 크기를 결정하는 태그로 숫자가 커질수록 크기가 작아진다.
<h1>제목1</h1>
<h2>제목2</h2>
.
.
.
5. <u> 태그
선택한 글씨에 밑줄을 그어준다.
<u>밑줄 그을 문장</u>
6. <br> 태그
문장이나 단락 사이에 강제적으로 줄을 바꿀 때 사용한다.
문장1<br>문장2
단락1<br>단락2
7. <p> 태그
단락을 나눌 때 사용한다.
<p>문장</pr>
8. <img>
웹 페이지에 이미지를 띄울 수 있다.
<img src = "이미지 이름" width = "배율(%)">
9. <li>, <ol>, <ul> 태그
<li> 태그는 목록 항목을 정의할 때 사용하는 태그로, 순서가 있는 목록(<ol>)이나 순서가 없는 목록(<ul>) 내에서 사용된다. 여기서 <li> 태그를 자식 태그, <ol>과 <ul> 태그를 부모 태그라 한다.
<ol>
<li>목차1</li>
<li>목차2</li>
.
.
.
</ol>
<ul>
<li>목차1</li>
<li>목차2</li>
.
.
.
</ul>
10. <a> 태그
링크를 추가할 수 있다.
<a href = "주소" target = "_blank" title = "링크 설명"></a>
전체 코드는 https://github.com/NamkKungGeon/my-first-web-site 에서 확인할 수 있음. 내가 만든 웹 페이지는 다음에서 https://namkkunggeon.github.io/my-first-web-site/index.html확인할 수 있음.(오류 때문에 뜨지 않을 수 있음.) 웹 페이지에서 뒤에 index.html 을 지우고 검색해도 똑같은 페이지가 나옴. 단, 댓글창에 달린 댓글은 다름. 왜 그런지 이유를 모르겠음.
vscode 설치와 기본 설정에 대해서 다음 유튜브 영상을 참고하였음:
https://youtu.be/2mBbZG9vVtE?si=iAVf1QPEXmuQ2zPP