[HTML] HTML이란? HTML의 기본 문법, 태그와 속성 알아보기
HTML이란? HTML의 기본 문법, 태그 알아보기
'파이썬으로 크롤링하기'
포스팅에 있는 HTML문법을 그대로를 옮긴 포스팅입니다.
HTML(Hyper Text Markup Language) 기본
웹사이트에서 눈에 보이는 정보나 특정 구역을 설정할 때 사용하는 언어이다.
웹사이트에서 F12키를 누르면 웹페이지의 정보를 나타내준다.
티스토리를 운영하는 사람이라면 잘 사용하지는 못해도, 스킨을 html로 꾸밀 수 있을것이다.
오른쪽에 보이는 것처럼 html이 있으면 왼쪽 화면 웹페이지가 구상되어있는 것을 볼 수 있다.
이처럼 html은 일련의 요소들로 이루어진 문서이다.
이때, 텍스트나 이미지들을 다른형식으로할지, 어떤 방식으로 동작하게 할지 만들어주는 것을 요소라고한다.
요소를 작성해보자.
<여는 태그 속성 ="속성값">텍스트컨텐츠</닫는태그>
태그는 열었으면, 꼭 닫아주어야한다.
예를 들어 <title>이라는 태그를 사용했으면 </title> 꺽새를 이용해서 닫아주는 태그를 꼭 넣어줘야한다.
태그 : 요소의 특징을 나타낸다.
텍스트 컨텐츠 : 요소가 나타낼 텍스트
속성="속성값" : 태그가 가진 기본 특징이나 동작을 변경. 기본값이 있지만 여러 속성 옵션을 속성값으로 지정해줄 수도 있다.
기본적으로 아래와 같은 틀을 가지고 있고
<!DOCTYPE html>
<html>
<head>
<meta charset = "UTF-8">
<title>HTML 파헤치기</title>
</head>
<body>
</body>
</html>
위에 쓰인 각 요소에 대해서 알아보도록하자.
<!DOCTYPE html>
이 문서가 HTML문서임을 선언하는 요소이다.
따라서 문서 맨 윗줄에 작성해야하며, html 태그안에 쓰지 않고, 단독 태그이다.
<html> ... </html>
HTML의 시작과 끝을 의미한다.
위 !DOCTYPE html을 제외한 모든 다른 요소들은
<html>요소 안에 들어가야한다.
당장 F12를 눌러서 확인을 해보면
<!DOCTYPE html> 바로 밑에 <html>이 있고,
가장 아래로 내리면 </html>로 닫혀있는 것을 확인할 수 있다.
<head> ... </head>
무조건 한개만 있어야한다.
head는 메타데이터가 들어가는 곳이다.
즉. 웹사이트에 대한 설명을 적어놓는 요소이다.
<head>안에 들어가는 대표적인 요소
1. <meta>
html의 특징이나 설명을 적으며
빈 요소이다.(닫는 태그가 없다)
charset라는 속성으로 문자 인코딩을 선언한다.
한글로 쓰였으니 utf-8인 속성값을 넣어주지 않으면
한글이 깨져서 보일 수 있다.
2. <title> ... </title>
head에는 무조건 한개의 <title>요소가 들어가있어야한다.
당연한 말이다. 한 페이지에서 title이 없어도, 2개여도 안되기 때문이다.
<body> ... </body>
실제로 눈에 보이는 내용, 화면을 넣어준다.
대부분의 요소는 body에 들어간다.
따라서..엄청나게 많은 요소들이 존재한다.
하지만 언제나 그랬듯이 외울 수 없다.
웹페이지를 만드는 것이 아닌 크롤링을 하는 것이기 때문에
대표적인 몇개만 알아보자.
1. <p>...</p>
paragraph의 약자이다.
문단을 나타내고, 문단 간에는 한 줄의 간격을 생성한다.
2. <h>...</h>
heading의 약자이다.
제목과 부제목을 표현하는데, h만 단독으로 쓸 수 없고
1~6까지의 숫자로 나타낸다.
이는 폰트의 크기이고, 숫자가 클수록 폰트 사이즈가 작아진다.
디자인적으로 h태그는 한 번만 사용하는 것이 좋다.
왜냐하면, 제목을 나타내는데 한 페이지에 제목이 여러개이면 당연히 좋지 않겠다.
3. <a>...</a>
anchor의 줄임말로
다른 URL로 연결하는 하이퍼링크를 만들어준다.
<a herf = "naver.com" target="_blank">네이버</a>
위 문법으로 네이버로 연결되는 하이퍼링크를 만들 수 있다.
href : 연결하고자하는 URL을 나타내준다.
target : 해당 링크를 어디서 보여줄지 정하는 링크이다.
위 코드는 _blank라는 속성값으로 새로운 탭을 열어서 보여준다.
4. <img>
이름처럼 문서에 이미지를 넣고자할 때 사용한다.
<img src="logo1.png" alt="logo1">
<img>태그는 혼자쓰이는 빈요소이다. 닫을 필요가 없다.
src : 이미지를 어디서 가져올지 넣어주는 경로이다. 당연히 필수로 들어가야한다.
alt : 이미지가 깨졌을 때 대체해서 보여줄 텍스트를 넣어준다.
5. <div>...</div>
아무것도 표현되지 않는 컨테이너(캔버스)이다.
여러 요소를 하나의 구역으로 묶어서 그룹시켜준다고 생각하면 편하다.
div안에 있는 요소들은 하나로 그룹이 되어서
속성값을 주었을 때 요소들이 한번에 변화가된다.
6. <span>...</span>
span또한 div처럼 아무것도 표현이 되지 않는다.
div는 만들어진 컨테이너 자체를 꾸며준다면,
span은 문장 중간에서 일부분을 꾸며줄 때 사용한다.
<span style = "color: red">eunji</span>
이라고 하면,
문장 중간에 eunji라는 부분을 빨간색으로 바꿔라!는 뜻이다.
7. <ul>...</ul>
unordered list의 줄임말로 비정렬 목록이다.
순서가 없는 리스트를 표현할 때 사용한다.
사용을 하면,
● 이름
● 나이
● 주소
이런식으로 불릿으로 나타내고, 불릿의 형태 역시 다양하게 바꿀 수 있다.
ul안에 들어가야하는 요소가 있다.
<li>...</li>
list item의 줄임말로 목록의 항목을 나타낸다.
위에서 이름, 나이, 주소를 써주는 곳이다.
따라서 정렬태그(ul, ol) 안에서만 쓰이는 태그이다.
8. <ol>...</ol>
ordered list의 줄임말로 순서가 있는정렬 목록이다.
ul과 다르게 순서가 있으므로, 불릿이 아닌
숫자나 알파벳, 로마숫자 등 오름차 순으로 표현이 된다.
1.이름
2.나이
3.주소
전역속성(global attributes)
각 태그마다 가지고 있는 속성이 있다.
앞서 배운것처럼 img는 scr,alt와 같이 쓰이고, a는 href 랑 같이 쓰이는 것을 알 수 있었다.
img에 href를 적용하면 오류가 나는 것처럼 각 태그마다 가지고 있는 속성이 아닌,
모든 태그에 공통으로 쓸 수 있는 속성들을 전역속성이라고 한다.
1.style
요소에 css의 스타일을 적용할 수 있게 해준다.
디자인적인 것들을 넣어줄 수 있는 속성이다.
color나 font-size등 다양한 속성값이 있지만, 현재는 디자인을 할 것이 아니기 때문에 넘어가도록 하자.
2. class
css에서 class를 정의를 해두고
html에서 class속성을 가져올 수 있다.
마치 파이썬에서 import시키는 것과 비슷하다고 생각하면 된다.
각 요소는 여러개의 class를 가질 수 있다.
3.id
css에서 id를 만들고
html에서 css속성을 가져올 수 있다.
class와 매우 유사하지만 각 요소는 하나의 id만 가질 수 있다.
4.hidden
이름 그대로 요소를 보이지 않도록 해준다.
속성값 없이 hidden만 적어도 적용이 된다.
5.title
태그 title과는 완전히 다른 속성이다.
이렇게 마우스를 가져다대면 요소의 정보를 나타내주는 툴팁을 제공한다.