서버/HTML

HTML 기초

무거운 궁댕이 2024. 6. 14. 16:45

본 내용은 "생활코딩! 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