html이란?=>hyper text markup language
웹페이지 표시를 위해 개발된 마크업 언어
제목,목록,같은 구문을 구조적으로 나타낼 수 있다
첫날에는 기본적으로 html의 기본개념부터 시작하였다.
우리가 보는 모든 브라우저는 html로 사용자에게 보여진다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
</html>
vsc상에서 !로 자동완성 시킬수있는 기본 헤더와 태그들이다.
이 안에서 우리가 사용할 수 있는 기본적인 태그부터 알아보자.
1. h1~h3
폰트 사이즈가 0.5씩 줄어드는 문자태그이다. 크기에 따라 제목과 같은 곳에 태그를 넣으면 되겠다.또한 볼드가 기본으로 적용되어있다.
2.p태그
기본적인 문단을 구성하는 태그이다. 아무리 엔터를 눌러 줄을 나눠도 브라우저 상에서는 한줄로 쭈욱 표시가된다. 근데 나는 줄을 바꾸고 싶은데?
3.br태그
<br/>닫는 태그만 있으면 된다. 줄을 바꿔주는 역할을 한다.
4.div 태그
주인공 div태그이다. 웹개발을 하면서 가장 많이 쓰이는 태그로서 display가 block으로 되어있다. 이말이 즉슨 자신이 가로를 다 차지한다는 것이다.
반갑습니다. 허허허
<div>안녕 난 딥이야</div>이렇게 하면
반갑습니다. 허허허
안녕 난 딥이야
요렇게 나온다.div태그안에 있는 글이 가로를 다 차지해서 줄바꿈이 일어난 것이다.
근데 난 줄 바꾸기 싫은데...
5.span태그
display:block이 가로를 차지하는게 싫다면? inline속성이 있는 span태그를 이용하자.
안 반갑습니다 허허
<span>안녕 난 스판이야</span>
이렇게 코드를 작성하면
안 반갑습니다 허허 안녕 난 스판이야
이렇게 브라우저에 표시된다 div랑 다르게 가로영역을 차지하지 않아 줄 바꿈이 이루어지지 않는 모습이다.
여담: p태그랑 div랑 무슨 차이인가요?
둘 다 가로 한 영역을 차지하는 태그인데 둘은 무슨 차이일까?
바로 p태그 하위에는 다른 블록 요소가 들어갈 수 없다.
즉, p태그 안에는 div가 못 들어가고 span과 같은 블록요소가 없는 태그가 들어가게 됩니다. 반면에 div안에는 블록요소가 포함돼도 된다.
느낀점:나름 프로젝트도 했는데 html이 뭐의 줄임말인지도 모르고 있었다....
급하게 쌓은 모래성이었지만 지금부터 하루에 한번씩 기본에 충실하게 처음부터 개념을 쌓을 것이다.
