[멋쟁이 사자처럼]HTML 기본 (Markup, Semantic Tag)
*HTML 구성요소와 속성
웹페이지의 구성요소는 3가지
HTML, JS, CSS 이다
HTML은 뼈대 - 무엇을 어디에 넣을지
CSS는 살 - 웹페이지 꾸미기
JS(Java Script)는 움직임 - 웹페이지의 움직임
*HTML 이란?
Hyper
Text
Markup
Language
-HyperText :
웹페이지와 연결된 링크를 하이퍼링크라고 하듯이 링크가 포함된 개념.
-Markup :
Markup은 꺽쇠(< , >)로 이루어진 태그로 문서나 데이터의 규격을 정의하는 언어.
*HTML 만드는 방법
vscode를 열고 extensions를 연다(ctrl+shift+x or 사이드바에 최하단 아이콘)
beautify 를 검색하고 설치한다.
설치하고 ctrl+shift+p 로 command palette를 열고 beautify file을 클릭해서
코드를 정렬.
*HTML 문서를 생성해보자
새파일을 만든다 ( 이때 확장자 형식을 .html 로 해주어야 한다)
만들어준 모습
에티더 부분에 !입력하고 엔터치면 내용이 쫘르륵 나오는데 그중에서
title 부분이랑 body 부분에 내가 임의로 글을 추가해주었다
빨간 부분이 내가 한 수정한 부분.
이렇게 쓴걸 저장하고
저 파일을 열어주면
웹페이지가 이렇게 보인다
*HTML의 기본구조
HTML은 html, head, body 요소로 구성
위에 내용을 가져와 보자
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>html_1</title>
</head>
<body>
HTML 문서를 생성했습니다!
</body>
</html>
-<html></html> :
파일을 html로 정의내리는 태그.
페이지 전체를 감싸며 루트요소라고도 한다
lang 속성으로 문서에 사용된 언어를 지정할 수 있음
lang = "en" 은 웹페이지가 영어로 만들어졌음을 알리는 것
"ko"라고 바꿀 수 있다 ->한국어로 바꿈
-<head></head> :
head 메타데이터의 집합
메타데이터 : html 문서에 대한 정보로 웹 브라우저에서는 직접적으로 표현되지 않는 정보
페이지를 열 때 웹 브라우저에 표시되지 않는 대신 페이지에 대한 검색 결과가 표시되기 원하는 페이지 설명, 스타일, 스크립트 등이 포함됨.
예를 들어 title 태그는 검색엔진에 반영됨.
-<body></body> :
우리 눈에 보이는 모든 정보는 body 요소 안에 있음
-시맨틱 태그(Semantic Tag)
현재 버전은 html5에 도입되어 개발자와 브라우저에게 의미있는 태그를 제공
쉽게말해 예전에는
<!-- html5 전: 개발자들이 임의로 설정 -->
<div class="header">
<div id="footer">
이런식이었지만
지금은
<!-- html 5: 미리 정의된 태그를 사용 -->
<header>
<footer>
이렇게만 써도 되는것
-<div> :
웹사이트의 레이아웃 만들 때 주로 사용
css 를 활용하여 스타일을 적용할 수 있다.
style(스타일)
width(가로)
height(세로)
border(테두리 굵기)
background-color(배경색)
float(정렬)
margin(여백) 등등의 속성이 있다.