🔶시작 전
-
폴더명 : 영문으로, 소문자로만 가능
-
파일명
:파일명은 영문으로! ←서버에 띄웠을때 오류가 날 수 있어서
:띄어쓰기 대신 언더바 _ 쓰기
:특수문자 쓸 수 없음
:뒤에 확장자명 - 소문자로만 됨.
🔶html파일에 대해
-
DOCTYPE html
:"문서(Document)의 타입"이 html이라고 미리 선언하는 것임.
:html5형태인 문서로 됨. -
html lang="ko"
:이 문서의 기본 언어가 한글이라는 것을 의미
:미국 사이트에서 이 문서를 띄우면 영어로 번역해줄까? 물어보는거 자동으로 뜸
:검색엔진에서 한국어로 된 문서를 우선 검색해서 나타나게 됨. -
head
:이 문서를 작성하기 위한 설정을 해줌
:style적용해서 꾸며주는 역활
:style 태그 를 여기서 씀 -
body
:html이 렌더링 되는 코드들, 화면에 보여짐 -
문서셋팅 단축키
html:5 ← 이 코드 끝에서 tap누름(sublimes)
🔶head
-
meta charset="utf-8"
:char - character
:set - setting
: 해당 HTML 문서의 문자 인코딩 방식을 명시하는 것임. HTML 문서의 문자를 utf-8로 설정하는 것임.
: utf-8 - 다국어 지원임. 이 글자로 세팅해야 어느나라에서 이 문서를 열어도 잘 보임.
: euc-kr - 한국 사이트에서만 이 언어가 지원됨. 다른나라에서 열면 글자가 깨짐(꿿뚥ㅁ?? 이렇게 나옴) -
웹 브라우저의 제목 설정
<title>- 웹 브라우저 제목
<link>- 웹 브라우저 제목에이미지를 설정할 수 있음<head> <link rel="icon" type="image/svg+xml" href="https://nomadcoders.co/m.png" /> <title>Vite App</title> </head>
```
🔶self-closing tag
: 혼자 쓰는 태그이기 떄문에 / 넣어줘야 함.
: <>content</> 두 태그 사이에 담을 내용이 없어서 이렇게 혼자 쓰임.
: 뒤에 "스페이스"하고 / 해야 함. (이게 정석)
<p>안녕하세요. <br />적당히 바람이 쉬원해</p>
<img src="http://link~" />🔶entity code
: 시작이 &로 시작해서 ;으로 끝남
:예시) ← p태그에서 한칸 뛸때 쓰는 것
🔶빈공간
: div > p > span
: 이 순서대로 공간이 큼
: 따라서 p태그 안에 div가 들어갈 수 없음.
🔶semantic tag
- semantic tag:의미가 있는 박스
:코드만 보고도 의미가 바로 파악되기 위해서 되도록 이렇게 써야 함.
:div을 써도 되지만 header를 쓰면 더 의미있는 태그를 명확하게 사용할 수 있음. - ex)navigation, header,main,footer // div와 비슷, 블록박스임
- non-semantic tag : 의미가 없는 박스 ex) div,span
🔶그 외 태그
h
:h1~h6
: 문서의 제목이나 문단의 제목을 입력하기 위해 선언하는 태그.
: "블록요소"이기 때문에 알아서 자동으로 줄 바꿈됨.
a
: target 속성 - 링크한 URL을 표시할 위치를 지정함.
<a href="http://google.com" target="_self">click</a>
<a href="http://google.com" target="_blank">click</a>
<!--
target="_self" : 새로운 탭으로 나옴 / 설정 안하면 이걸 기본값으로 나옴
target="_blank" : 새로운 탭으로 나옴 --><!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>제목글자</title>
<style type="text/css">
/*
<css쓰는 방법>
-style태그는 head에서 작성
-사용: 선택자{속성: 값};
*/
h3{
font-family: "궁서체";
font-size: 50px;
color: red;
}
h4{
/* font-weight: normal(기본두께로 됨),bold,숫자사용 */
font-weight: normal;
}
p{
color: skyblue;
font-size: 18px;
font-weight: bold;
font-family: "맑은고딕";
}
</style>
</head>
<body>
<p>여기에 태그없이 쓰는 글은 사용자가 설정한 <br />브라우져 글자속성대로 나옴(따라서 사용자마다 다 다르게 나옴)</p>
<h1>오늘의 날씨</h1><span>h태그 뒤엔 알아서 줄바꿈 된다~</span>
<h2>오늘의 날씨</h2>
<h3>오늘의 날씨</h3>
<h4>오늘의 날씨</h4>
<h5>오늘의 날씨</h5>
<h6>오늘의 날씨</h6>
</body>
</html>