본문 바로가기
기타/HTML

[HTML] 기본 문법 알아보기

by 거북이 코딩 2024. 4. 1.

html 5

시작하며

 

 최근에 동아리 내 스터디로 프론트엔드에 첫발을 내디뎠습니다. 스터디는 노마드 코더에서 무료로 수강할 수 있는 '바닐라 js로 크롬 앱 만들기'를 수강하며 진행하고 있습니다. javascript를 사용하려면 html과 css 기본을 알아야 합니다. 근데 제가 이 기본이 안되어 있기 때문에 스터디 외적으로 틈틈이 html과 css를 일단은 가볍게 기본만 공부해 보려고 합니다. 어디까지나 기본적인 내용이지만 제가 복습할 때 편하게 훑어보기 위해서 간결하고 꼼꼼하게 작성해 볼 테니 유익하게 봐주시길 바랍니다. ㅎㅎ

 

HTML이란

 

 HyperText Mark-up Language의 약자로 웹 상에서 내용과 구조, 서식을  작성할 때 사용하는 언어로 약자에서도 나와있듯이 프로그래밍 언어가 아닌 마크업 언어입니다.

 

태그

 

 <태그>의 형태로 어떤 단어를 꺽쇠가 감싸고 있는 형태를 말합니다. HTML은 헤드태그와 바디태그로 나눌 수 있습니다. 말 그대로 헤드태그는 웹 위쪽을 담당하고 바디태그는 몸통 부분을 담당합니다. 태그는 혼자서 쓰이는 태그와 쌍으로 쓰이는 태그들이 있는데 쌍으로 쓰이는 태그들은 꼭 끝에서 닫아주어야 합니다. 닫을 때는 </태그>의 형태로 슬래쉬를 추가합니다. 

 

HTML의 기본 문서 구조

<!DOCTYPE html> <!--이 문서가 html로 작성됨을 의미-->
<html lang="en"> <!--영어 문서임을 의미-->
<head> <!--헤드 태그 : 웹에서 상단 부분을 구성한다-->
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title> <--문서의 제목-->
</head> <!--헤드 태그의 끝-->
<body> <!--바디 태그 : 웹에서 몸통 부분을 구성한다-->
    
</body> <!--바디 태그의 끝-->
</html> <!--html문서의 끝-->

 

내용을 작성할 때

 

 <h1~h6> ~ </h1~h6> 태그는 숫자가 커질수록 글자 크기가 작아지는 태그입니다. 대부분 제목을 의미합니다.

 

 <p> ~ </p>는 문단 태그입니다. 문단태그 내에서 줄 바꿈을 하더라도 웹 상에서 줄 바꿈이 되지는 않기 때문에 줄 바꿈을 할 때는 다른 태그를 이용합니다.

 

 <br> 태그는 줄 바꿈 태그입니다. 줄 바꿈을 하고 싶은 곳에 삽입하면 되고 혼자 쓰이는 태그입니다. 바로 위의 문단 태그 내에서 사용할 수 있습니다.

 

 <ul> ~ </ul> 숫자가 없는 리스트 태그입니다. <li>와 함께 사용합니다.

 

 <ol> ~ </ol> 숫자가 있는 리스트 태그입니다. <li>와 함께 사용합니다.

 

 <li> 태그는 리스는 안에 항목을 넣을 때 사용합니다. 

 

인라인과 블록

 

 인라인은 한 줄 안에서 자신의 크기만큼만 자리를 차지합니다. 반면 블록은 줄 전체를 차지합니다. 블록 안에는 블록태그와 인라인 태그 모두 넣을 수 있지만 인라인태그 안에 블록태그는 넣지 못합니다. 예외로 문단태그 안에는 인라인 태그만 넣을 수 있습니다.

 

 대표적인 인라인 태그 : <br>, <span> ~ ~</span>

 

 대표적인 블록 태그 : <div> ~ </div>, <h1 ~ h6> ~ </h1 ~ h6>, <p> ~ </p>, <ul> ~ </ul>, <ol> ~ </ol>

 

주석

 

 html에서 주석은 <!--주석내용-->의 형식으로 작성합니다. 주석 내에서 줄 바꿈이 가능합니다.

 

효과

 

 내용을 작성할 때 사용하는 다양한 효과들을 가진 태그들입니다.

 

 <b> ~ <b>, <strong> ~ </strong> : 글이 Bold처리됩니다. strong은 추가로 중요한 내용이라는 의미를 가집니다.

 

 <i> ~ </i>, <em> ~ </em> : 글이 기울임 처리됩니다. em은 추가로 중요한 내용이라는 의미를 가집니다.

 

 <del> ~ </del> : 글이 취소선처리 됩니다.

 

 <ins> ~ </ins> : 글이 밑줄처리 됩니다.

 

 <q> ~ </q> : 짧은 인용문

 

 <blockquote> ~ </blockquote> : 긴 인용문

 

 <a href="주소" target="_blank"> ~ </a> : 링크를 설정할 수 있습니다. href에는 주소를 넣고 target에는 링크를 여는 방식을 작성합니다. _blank는 새창에서 링크열기, _self는 해당 창에서 링크열기입니다.

 

마치며

 

 오늘은 내용 작성 시 필요한 정말 기본적인 태그들을 소개해 봤습니다. 다음 글에서는 id와 class, form을 주제로 얘기해 보겠습니다. 감사합니다.

 

 

 

 

 

티스토리툴바