1. HTML구조와 태그(tag)
HTML문서는 .html 확장자가 붙어있는 텍스트 파일입니다. 가장 기본 적인 HTML문서는 다음과 같은데,
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
<title>Document</title>
</head>
<body>
</body>
</html>하나씩 보면
<!DOCTYPE html>은 HTML 파일 첫 줄에 와서 이 문서가 HTML문서임을 알립니다.
<html>으로 웹문서의 시작을 알리고 </html>으로 웹문서의 끝을 알립니다.
<head>에서 </head>안에 웹 페이지의 제목, 설명, 기술적 내용들이 들어가고,
<body>와 </body>안에 실제로 우리 눈으로 보이는 내용들이 들어갑니다.
위에서
<!DOCTYPE html>과 달리 <html>은 </html>과 짝을 이루는데,
<head> </head>, <body> </body> 이렇게 짝을 이루는 것들을 태그라고 합니다.1.1 자주 쓰는 태그들
<hn> </hn>
: n에는 1~5까지의 정수가 들어가고, 숫자가 커질수록 글자의 크기가 작아집니다.
예를 들어 다음과 같이 쓰면 다음과 같이 됩니다.
<h4> 반가워요 :) </h4>
<h5> 반가워요 :) </h5>반가워요 :)
반가워요 ;)
<span> </span>
: 주로 텍스트가 들어가며 개행이 되지 않습니다.<p> </p>
: 주로 텍스트가 들어가며 개행이 일어나며, 주로 문단을 나눠서 적을때 사용합니다.<p> </p>
: 주로 텍스트가 들어가며 개행이 일어나며, 주로 문단을 나눠서 적을때 사용합니다.<a> </a>
: 링크를 걸때 사용합니다.
예를 들어서 다음과 같이 사용하면 my github라는 글자에 필자의 깃허브 주소가 링크 됩니다.
<a href="https://github.com/taeha7b" target="_blank">my github</a>여기서 href는 '속성(attribute)'이라고 하며 각 태그 마다 여러 속성이 있습니다.
위에 예시에서는 href 속성(attribute)에 사이트 주소를 적어준 후 띄어쓰기를 하고
target 속성을 사용하였는데, 이처럼 하나의 태그안에 여러 속성을 사용할 수 있습니다.
target 속성에 속성값으로 "_blank"를 적어주면 새창으로 사이트를 엽니다.
<div> </div>
: div태그는 웹 문서의 비슷한 부분을 묶어서 레이아웃 나눌때 사용합니다.
함께 성장하는 개발자가 되고 싶습니다.