[CSS] 실습 환경 setting

1. CSS Reset

기본적으로 브라우저에서 제공하는 스타일은 표준화 된 것이 아니므로 초기화해서 사용해야한다.

 

 

https://www.jsdelivr.com/package/npm/reset-css

jsDelivr - A free, fast, and reliable Open Source CDN for npm and GitHub

 

 

html 문서의 header에 다음 추가

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/reset-css@5.0.1/reset.min.css">
<!--main.css 보다 먼저 호출되야함-->

 

 

2. Codepen 사이트

 

https://codepen.io/

 

html에 body 태그가 이미 감싸져있고, console창도 바로 확인할 수 있다.

환경세팅을 안하고 간편하게 테스트 해볼 수 있는 사이트

 

CSS reset 세팅도 체크만 하면 된다

 

 

 

3. Emmet 문법

 

https://emmet.io/

html과 css 편리하게 코딩하기

태그 이름 입력후 tab 키를 누르면 자동완성되는 기능 등이 있다.

태그만들 때 많이 사용. 기본적으로 많은 에디터들에 emmet 플러그인이 내장되어있다.

 

 

html 예제

.container>ul.list>li.list-item*10>a{list$}

tab ↓

    <div class="container">
        <ul class="list">
            <li class="list-item"><a href="">list1</a></li>
            <li class="list-item"><a href="">list2</a></li>
            <li class="list-item"><a href="">list3</a></li>
            <li class="list-item"><a href="">list4</a></li>
            <li class="list-item"><a href="">list5</a></li>
            <li class="list-item"><a href="">list6</a></li>
            <li class="list-item"><a href="">list7</a></li>
            <li class="list-item"><a href="">list8</a></li>
            <li class="list-item"><a href="">list9</a></li>
            <li class="list-item"><a href="">list10</a></li>
        </ul>
    </div>

 

 

css 예제

.div{
    w: 100
    h: 100
}

tab ↓

.div{
    width: 100px;
    height: 100px;
}