본문 바로가기
Development/html

html 기초 문법 정리

by eoieiie 2024. 3. 4.

태그 


html에서 태그는 꺾쇠기호를 사용하는 문법입니다. 일반적으로 시작 태그와 종료 태그로 내용을 감싸며, 시작 태그는 <태그 이름> 형태로, 종료 태그는 </태그 이름> 형태로 씁니다. 

<p>
    단락을 구분하는 태그입니다.
</p>

 

HTML 파일의 기본 구조


맨 윗줄에는 이 파일이 html문법을 쓴다는 걸 알려주는 코드가 들어갑니다. <!DOCTYPE html>이 바로 그 코드인데요. 

그 아래로는 html태그로 감산 뒤에 head 태그와 body 태그로 나눕니다. head 안에는 페이지에 대한 정보가 들어가고, <body> 안에는 페이지 내용이 들어갑니다. 

 

<!DOCTYPE html>
<html>
  <head>
  </head>
  <body>
  </body>
</html>

 

기본 태그들 정리


사이트 이름

<head>
  <title>입 속의 검은 잎</title>
  ...
</head>

 

인코딩 정하기

<head>
  <meta charset="utf-8">
  ...
</head>

<!--utf-8은 한글을 지원하는 인코딩이다.-->

 

제목

<h1>시작메모</h1>
<h2>시인 기형도</h2>

<!--h다음의 숫자가 클수록 글자의 크기가 작아진다.-->

 

단락

<p>
    나는 한동안 
    무책임한 자연의 비유를 경계하느라 
    거리에서 시를 만들었다. 
    거리의 상상력은 고통이었고 
    나는 그 고통을 사랑하였다. 
    그러나 가장 위대한 잠언이 자연 속에 있음을 
    지금도 나는 믿는다. 
    그러한 믿음이 언젠가 나를 부를 것이다. 
    나는 따라갈 준비가 되어 있다. 눈이 쏟아질 듯하다.

</p>
<p>
    -시작메모-
</p>

 

링크

<a href="https://ko.wikipedia.org/wiki/%EA%B8%B0%ED%98%95%EB%8F%84">
  위키 문서 보기
</a>

 

이미지

<img src="https://upload.wikimedia.org/wikipedia/ko/thumb/1/11/%EA%B8%B0%ED%98%95%EB%8F%84.jpg/360px-%EA%B8%B0%ED%98%95%EB%8F%84.jpg">

 

영역 나누기

<div>
    <p>
        나는 한동안 
        무책임한 자연의 비유를 경계하느라 
        거리에서 시를 만들었다. 
        거리의 상상력은 고통이었고 
        나는 그 고통을 사랑하였다. 
        그러나 가장 위대한 잠언이 자연 속에 있음을 
        지금도 나는 믿는다. 
        그러한 믿음이 언젠가 나를 부를 것이다. 
        나는 따라갈 준비가 되어 있다. 눈이 쏟아질 듯하다.

    </p>
    <p>
        -시작메모-
    </p>
</div>

<!--이렇게 영역을 나누는 건 나중에 CSS를 사용할 때 스타일을 적용하는 용도로 사용.-->

댓글