HTML 기본 문법

웹 페이지를 보려면 글자들이 있어야 한다. 그 글자들은 내용이 될 수도 있고 제목이나 명령어가 될 수 있다.

그러한 글자들을 각각의 용도에 맞게 해 주려면 명령이 필요하다.

뉴스기사를 예로 들어 보겠다.

로버트 기요사키 "미국은 망했고, 시장은 폭망한다, 비트코인이나 사라"
기요사키는 미국 출신의 사업가이자 작가, 경제학자다. 사업가로 이름을 알리던....(중략)

굵은 강조 표시로 되어 있는 부분은 제목에 해당하고 그 밑줄은 인물에 대한 정보로 내용에 해당한다.
HTML에서는 제목으로 쓰일 부분과 내용으로 쓰일 부분에 대해 적절한 지시를 표시해주어야 한다.

이러한 지시를 "태그"라고 한다. 옷에 달려있는 그거. 옷에 대한 정보가 쓰여있다. HTML 문서에 글자를 적어놓고 내가 원하는 "태그"를 달아 놓으면 그 옷이 어떤 역할을 하는지 알 수 있다.

1. 태그

태그는 <"명령어">로 표시한다. "<"는 꺽쇠라고 부르며, "<", ">"는 HTML 문서를 작성할 때는 보이지만 웹페이지를 열었을 때는 보이지 않는다.

① <! docutype html>

문서의 타입이 HTML이란 뜻이다. 웹페이지를 만들기 위해서는 문서 타입이 HTML 이어야 한다.

②<head></head>

웹페이지의 제목을 지정해 준다.

웹페이지 제목을 "HTML 기본 문법"으로 하고 싶으면
HTML에서 <head> HTML 기본문법 </head>라고 적어주면 된다.

③ <meta charset="utf-8">

character(문자) setting(설정) meta(방식)이 UTF-8이다. 우리가 쓰는 문자도 컴퓨터는 0과 1로 인식한다.

예를 들어 01100 은 "ㄱ"이고 01101은 "ㄴ" 이렇게 인식하는데 우린 가끔 아래의 사진과 같이 "깨진 문서"를 종종 접한다.

이것이 바로 각각의 숫자들이 문자와 매칭이 안되어서 발생하는 문제이다. 그래서 문자설정 방식을 지정해 주어야 글자가 깨지지 않고 올바르게 볼 수 있다.

④ <body>, </body>

<head> 태그가 웹페이지 제목에 해당한다면 <body> 태그는 웹페이지 내용에 해당한다. 우리가 클릭하고 드래그하고 읽는 모든 부분이 <body> 태그 안에 해당한다.

⑤ <h></h>

웹페이지 내용 안의 제목을 지정해 주는 태그이다. 제일 큰 제목은 <h1></h1>, 중간 제목은 <h2>, 소제목은 <h3>으로 쭉쭉 내려가면 된다.

⑥<p>, </p>

<p> 태그는 Paragraph, 단락이란 뜻으로 HTML 문서에서 문단을 바꿔주는 역할을 한다.

<body> 태그 안에 내용을 집어넣었으나 가독성이 좋지 않다. HTML 문서 내에서 아무리 엔터를 눌러 줄을 바꿔봤자 웹페이지에서는 줄이 바뀌지 않는다. 따라서 <p>, </p> 태그를 사용해서 문단을 바꿔주어야 한다.

<p> 태그를 넣었더니 문단이 바뀌었다!

⑦ <br>

문단 내에서 줄을 바꿔주는 태그이다. "Break Line"의 준말이다.

● 비트코인은 금이고 나는 신이다.

이 문장을 2줄로 간결하게 쓰고 싶다 하면 <br> 태그를 쓰면 된다.

● 비트코인은 금이고 <br> 나는 신이다.

이 문장을 출력하면

● 비트코인은 금이고
나는 신이다.

⑧ "<" 꺽쇠 기호 넣는 법

HTML에서 "<"는 태그를 입력할 때 쓰인다. 그런데 문자 그대로의 "<"를 쓰고 싶다면 HTML 문서 내에서는 다르게 적어주어야 문자 "<"가 보인다. 바로 < > 가 그것이다.

< 는 <, > 는 >이다.

2. 링크 거는 법

태그는 <a></a>이다.

<a href="주소"> 보여주는 글자 </a>

예시 비트코인 현재가

<a href="https://www.google.com/finance/quote/BTC-KRW?sa=X&ved=2ahUKEwiru-2hxOWHAxWYs1YBHdhnKEQQ-fUHegQIGRAf"> 비트코인 현재가 </a>

보여주는 글자를 누르면 주소로 이동할 수 있다.

3. 이미지 넣는 법

<img src="주소">이다. Image source로 인터넷에 있는 이미지 주소를 복사해서 붙여 넣을 수도 있고, HTML 문서가 있는 폴더에 이미지를 넣어 놓고 이미지 이름을 "주소"에 넣을 수 있다.

① 이미지 주소 복사

② 폴더에 있는 이미지

저작자표시 비영리 변경금지

'기타' 카테고리의 다른 글

시저3 아우구스투스 모드 추가된 건물 (1)	2024.09.08
시저3 아우구스투스 모드 설치 실행 한글패치 (1)	2024.09.07
부산 지하철 이용객 순위 (0)	2024.08.06
혈당 스파이크의 증상, 안좋은 이유 (0)	2024.07.25
내 보증금을 지키기 위한 3가지 핵심 (1)	2024.04.11

HTML 기본 문법