지난 겨울 열심히 배웠던 웹개발
시간이 너무 오래 흘러서인지 벌써 많이 까먹었다ㅠㅠ
이번 기회에 복습하면서 다시 기본기를 쌓아보아야겠다.
HTML
- 풀어서 HyperText Markup Language
- 웹은 인류의 가장 많은 디지털 정보가 생산되는 곳 & 퍼블릭 도메인
그렇기 때문에 우리가 어느 브라우저에서든 똑같은 페이지를 볼 수 있다 (출처 : 생활코딩)
✔️ 기본 구조
<!DOCTYPE html> <html>
<head>
<meta charset="utf-8" />
<title> 제목 </title>
</head>
<body>
</body> </html>
- DOCTYPE : 문서의 유형을 정의하기 위해 사용하는 선언문. HTML 문서의 시작을 알려주며 어떤 버전으로 작성되었으니 해당 방식으로 해석하라는 의미를 지님
- head : 페이지의 속성 정보를 담고 있음
- body : 페이지의 실제적인 내용을 담고 있음
- title : head 안에 들어가는 태그로 제목표시줄 내용을 나타냄
- meta : 페이지에 대한 설명을 표시함. 속성으로 charset = "utf-8"라고 기재한 것은 브라우저에게 한글 인코딩을 UTF-8로 설정하라고 알린 것. 이 부분이 있어야 한글이 안 깨짐
✔️ 주요 태그
-
h1 ~ h6 : body 안에서 제목을 표시하는 태그. 숫자가 커질수록 크기가 작아짐.
- 사용하면 위아래에 자동으로 줄이 띄어짐
- p를 사용해서도 모든 내용 표시할 수 있지만 h 태그를 썼다는 것은 해당 정보가 문서 내에서 중요한 역할을 한다는 것을 의미하므로 써주는 게 좋음
-
div : 구역을 표시하는 대그
-
p : 문단을 표시하는 태그
- 사용하면 위아래에 자동으로 줄이 띄어짐
-
img : 이미지를 표시하는 태그
- src : 이미지의 경로
- alt : 이미지의 경로가 잘못되었거나 파일이 깨졌을 때 나오는 메세지를 입력하는 부분
-
br : 한 줄 띄는 태그
-
a : 클릭 시 다른 페이지로 이동시켜주는 태그
- href : 주소
- target : 새 창을 어디 띄울 것인지
-
ul : 순서가 없는 리스트 태그
-
ol : 순서가 있는 리스트 태그
<!-- 예시 -->
<img src="https://usercontents-c.styleshare.io/images/14933251/640x640">
<a href="https://www.naver.com">네이버</a>🔔 HTML 공간의 종류 3가지
(1) Block : 한 줄을 통째로 차지함 ex: div
(2) Inline : 내용물의 길이만큼 차지함. 높이랑 너비 지정할 수 없고 패딩과 마진 줄 수 없음 ex: span
(3) Inline-block : 내용물의 길이만큼 차지함. 그리고 css 통해서 높이와 너비 지정할 수 있음
<div style="display:inline-block;width:30%;height:50px;background:yellow"></div>
Be a developer