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과는 완전히 다른 속성이다.
이렇게 마우스를 가져다대면 요소의 정보를 나타내주는 툴팁을 제공한다.
'Front-End > HTML&CSS' 카테고리의 다른 글
[HTML] HTML로 웹페이지 구조 잡기 / <header>,<nav>,<main>,<article>,<main>,<footer>,<div> (3) | 2022.07.22 |
---|
댓글