Frontend/HTML

[HTML] HTML의 모든 것

ssungni 2023. 9. 13. 22:01

HTML의 모든 것을 정리해보자!

기본 틀

<!DOCTYPE html>

<html>
    (쓰고 싶은 내용)
</html>

첫 번째, <! ~>는 HTML에서 주석을 나타내는 부분이라고 한다.

두 번째, DOCTYPE html 이 부분은 이 파일을 html의 언어로 작성하겠다고 쓰는 것이라고 한다.

세 번째. <html> (쓰고 싶은 내용) </html>을 쓰면 짜잔!!

이렇게 만든 파일 클릭하면 다음과 같이 나온다.

또한, 아래 netlify 사이트에 들어가면 내가 만든 사이트를 공유할 수 있다...!

 

https://www.netlify.com/

 

Develop and deploy websites and apps in record time | Netlify

Accelerate the time to deploy your websites and apps. Bring your integrations and APIs together on one powerful serverless platform. Get started for free!

www.netlify.com

htmlstudy1.netlify.app

 

https://htmlstudy1.netlify.app/

 

htmlstudy1.netlify.app

사이트에 이름 붙이기

위에서 제목명이 index.html로 되어 있지 아니한가?

이름을 바꾸기 위해서는 <title> ~ </title> 로 묶어 내용을 구성해야하며,

안에 들어가는 내용과 구별하기 위해 <head> ~ </head>, <body> ~ </body>로 나뉘어지게 해야한다.

<!DOCTYPE html>

<html>
    <head>
        <title> Weekly Codeit </title>
    </head>
    <body>
        ~
    </body>
</html>

제목 넣기

<!DOCTYPE html>

<html>
    <head>
        <title> Weekly Codeit </title>
        <meta charset = "utf-8">
    </head>
    <body>
        <h1> Weekly Codeit </h1>
        <h2> ~ </h2>
        <h3> ~ </h3>
    </body>
</html>

다음과 같이 제목 1, 제목 2, 제목 3... etc를 나타내기 위해서는 <h1> ~ </h1>, <h2> ~ </h2>의 부분이 필요하다

본문 넣기

<!DOCTYPE html>

<html>
    <head>
        <title> Weekly Codeit </title>
        <meta charset = "utf-8">
    </head>
    <body>
        <h1> Weekly Codeit </h1>
        <p>
      		금요일에 만나는
      		코딩 한 스푼
    	</p>
        <h2> ~ </h2>
        <h3> ~ </h3>
    </body>
</html>

<p> ~ </p>가 필요하다.

본문에 enter 집어넣기

그런데 위의 '금요일에 만나는 코딩 한 스푼'을 주의해서 보자

다음 사이를 enter 치게 하려면 어떻게 해야할까?

<!DOCTYPE html>

<html>
    <head>
        <title> Weekly Codeit </title>
        <meta charset = "utf-8">
    </head>
    <body>
        <h1> Weekly Codeit </h1>
        <p>
      		금요일에 만나는<br>
      		코딩 한 스푼
    	</p>
        <h2> ~ </h2>
        <h3> ~ </h3>
    </body>
</html>

다음과 같이 <br>을 치면 되며, br은 break의 줄임말이라고 생각하면 좋을 것 같다.

<>를 글자로 넣는 방법

예를 들어, 글자로 <html>를 표현되기 위해서는 &lt;html&gt; 이렇게 적어줘야 한다.

링크 추가하는 방법

1. '<a> (페이지명) </a>'로 하여 틀을 잡는다.

2. <a href = "(실제 주소)"> (페이지명) </a>로 하여 실제 링크를 삽입한다.

이미지 넣는 방법

1. 주소로 넣는 방법

1. 이미지 주소 복사 ex) https://www.kyongbuk.co.kr/news/photo/201402/158150_20140220077.jpg

2. 다음 주소를 검색창에 쳐서 이미지 파일이 나오는지 확인한다.

ex)

3. <img src = "(복사한 이미지 주소)">

 

2. 파일로 넣는 방법

1. 이미지 다운로드

2. 실행하는 파일과 같은 위치에 이미지 위치 시키기

3. <img src = "(다운로드받은 이미지 파일)">

영역 나누는 방법

1. 이미지 다운로드

2. 실행하는 파일과 같은 위치에 이미지 위치 시키기

3. <img src = "(다운로드받은 이미지 파일)">