ch 4 웹에서 시작하기

https://codepen.io/

CodePen

 

코드들을 간편하게 실험해볼수있는 사이트.

 

기초 코드들을 일일이 입력하고 그럴 필요가 없음.

 

 

 

02 브라우저 스타일 초기화

 

크롬의 경우

user agent stylesheet

body {

1. display: block;
2. margin: 8px;

}

 

브라우저에 기본적으로 위와 같은 css가 적용되어 있음. 

 

크로스 브라우징을 위해 이러한 기본 css들을 초기화 해줄 필요가 있음.

 

방법:

구글에 reset.css cdn 검색

 

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/reset-css@5.0.1/reset.min.css">

이런 코드를 복사해와 헤드 태그 안에 타이틀 바로 아래에 넣으면 됌.

 

 

 

03. Emmet

 

vscode에서 태그이름만 적으면 코드가 다 적히는 건 이 Emmet이라는 문법이 자동으로 적용되서 가능한 것임.

 

ex)

html 

div -> <div></div>

 

css

w: -> width: 

h:

bc: -> background-color:

 

->에서는 Tab 키