태그(Tag)
< > 를 사용하는 문법, 일반적으로 시작 태그와 종료 태그로 내용을 감싼다.
시작태그 : <태그 이름>, 종료 태그 : </태그이름>
<p>
단락 이렇게 사용
</p><br>(줄바꿈)이나 <img>(이미지)처럼 안에 내용이 없는 태그는 시작 태그만 사용한다.
<img src="pumpkin.png">
<img src="pumpkin.png" />마지막에 / 기호를 넣어서 하나짜리 태그라는 걸 표시하기도 한다.
속성
시작 태그에 속성 이름= "속성 값" 형태로 사용하는 문법으로 태그의 속성을 정한다.
<a href="https://old-pumpkin.tistory.com>블로그</a>HTML 파일의 기본 구조
맨 윗줄에는 이 파일이 HTML 문법을 사용한다는 걸 알려주는 코드가 들어간다.
<!DOCTYPE html>
<html>
<head>
</head>
<body>
</body>
</html>DOCTYPE은 문서 타입(Documemt Type)이라는 뜻이고, 그 아래로는 <head> 태그와 <body> 태그로 나눈다. <head> 태그 안에는 페이지에 대한 정보가 <body> 태그에는 페이지 내용이 들어간다.
태그 정리
사이트 이름
웹 브라우저 탭이나 창에 보이는 제목을 정할 수 있다. 페이지에 대한 정보이므로 <head> 태그 안에 넣는다.
<head>
<title>호박 블로그</title>
</head>인코딩 정하기
한글을 지원하는 UTF-8을 사용하도록 정하는 코드이다. <meta> 태그를 사용하여 <head> 태그 안에 넣어준다.
<head>
<meta charset="utf-8">
</head>제목
크기 순으로 <h1><h2>...<h6> 태그를 사용할 수 있다. <h1> 태그의 크기가 가장 크다.
단락
단락은 <p> 태그로 감싸면 된다. 이때 코드에서 엔터키를 치더라도 화면에는 줄 바꿈이 되지 않은 상태로 나온다. 줄 바꿈을 하기 위해선 <br> 태그를 사용하면 된다.
<p>
지금은<br>
1시 4분 입니다.
</p>이미지
이미지는 <img> 태그를 사용한다. src 속성으로 이미지 파일의 주소나 경로를 적어 주면 된다.
<img src="https://i.namu.wiki/i/Ky3gvS2WV8VQp_ay_j8BoUx6zywyIy_WgR5Mp1R4XlxbT77rfvfIDteIfbTgWDj0e1na-r0pe2mLkgoG9InBOVEOlf6BumFHJOjH6UoRqAnzZ1sOY0Jkxr2eHgLM5oDOdjAT9Cze1LCNgOROnnBxsw.webp">
<img src="pumpkin.png">
<img src="images/pumpkin.png">영역 나누기
<div> 태그로 여러 태그를 감싸거나, <span> 태그로 텍스트 일부만 감쌀 수 있다. 이 태그들은 CSS에 사용된다.
