2022-04-05
파일만 생성하면 프로젝트가 시작되지 않음 폴더를 만든 후, 폴더 선택
확장 프로그램(Extension) 설치
Auto Rename Tag
Beautify
VSCode 공식 한글 패치
Live Sever
기본 폼
! + Tab Key
<!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>
<div>
<h1>123</h1>
</div>
</body>
</html>img + Tab key
<img src="" alt="">빈 태그
<img> = <img><img/>HTML5에서는 혼용 가능
표준 문법적으로는 문제가 없지만 하나의 방식으로 통일해서 쓰자!
의미적 요소
<header></header>
<section></section>
<div></div>
<span></span>기능적 요소
<img src="" alt"">div의 기본 값: 블록 요소(상자), 레이아웃 구조를 만든다
span의 기본 값: 인라인 요소(글자)
<img src="" alt"">전역 속성
titie, class, id, tabindex, data 등
class
<div class="이름"></div>->css파일에서 .이름 형태로 불러올 수 있음
id
<div id="이름"></div>->css파일에서 #이름 형태로 불러올 수 있음
title
<div title="이름">a</div>->css파일에서
[title="hello"] <- 선택자를 입력하는 요소{
color: red; <- 스타일 입력 요소 (전역 속성)
}형태로 불러올 수 있음
title 속성: 요소의 설명, a에 마우스를 갖다대면 "이름"이 뜨게 됨
html파일과 css파일 연결 방식(선언 방식)
링크 방식
html 파일 - head 태그 안에
link + tab key
<link rel="stylesheet" href="">이 나오고
href=""안에 ./main.css (상대경로) /main.css (절대경로) 같은
병렬로 링크를 가져옴
빠르지만 언제 뭘 먼저 가져올 줄 모른다는 특징이 존재
임베디드 방식
html 파일 - head 태그 안에
<style>
[title="hello"] {
color: blue;
}유지보수에 악영향을 끼칠 수 있다
인라인 방식
body 안에
<div title="hello" style="color: red;">1234</div>장점: 불러올 필요가 없다
단점: 선택자 우선순위 때문에 임베디드 방식과 마찬가지로 유지보수에 악영향을 끼칠 수 있다
임포트 방식
css파일에서
@import url("경로");
CSS의 @import 규칙으로 CSS 문서 안에서 또 다른 CSS 문서를 가져와 연결하는 방식
때문에 직렬 방식이다
링크 방식으로 가져왔을 때, 후에 임포트 방식이 안에 있다는 걸 알아서 상대적으로 느리다
혼자 코드를 작성할 때는 쓰지 않는다
css 파일이 순서대로 필요한 특수한 상황에 이 직렬 방식을 쓴다
에밋 문법
태그 이름이 div인 경우 .heropy(class 이름) 입력, div가 아닌 경우 태그 이름.heropy 입력
<div class="heropy"></div>자동 입력됨
ul>li*7{$}-> 아래로 변환
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
</ul>7{$} -> 에밋 문법
ul > li:nth-child(5) {
background-color: red;
}
nth-child(숫자)로 특정 순서 선택 가능
div > div:nth-child(3)
-> 세 번째 자식 요소 + div tag가 붙어있는가 + div의 자손인가
div > div 자손 선택자
div div 후손 선택자
ex) div div:nth-child(2)
-> 두 번째 자식 요소 + div tag가 붙어있는가 + div의 후손인가
div:nth-child() = 콜론이 하나가 붙어있으면 가상 클래스 선택자
div::after = 콜론이 두 개가 붙어있으면 가상 요소
상속의 개념
<div style="color: red;">1
<div>2
<div>3
<div>4</div>
</div>
</div>글자(문자) CSS 속성의 값 자동 상속되어 2,3,4의 색도 빨강이 된다.
