7. HTML과 CSS를 더 빠르고 쉽게 관리하는 방법

1. 에밋으로 빠르게 코딩하기

 

• 에밋으로 HTML 구현

p -> tab 키를 누르면

<p></p>

p.text 입력 후 엔터

<p class="text"></p>

p#id 입력후 엔터

<p id="id"></p>

ul>li

        <ul>
            <li></li>
        </ul>

p*3

        <p></p>
        <p></p>
        <p></p>

ul.menu>li*3

        <ul class="menu">
            <li></li>
            <li></li>
            <li></li>
        </ul>

 

• 에밋으로 CSS구현

m

margin: ;

mb

margin-bottom: ;

w100

width: 100px;

w100p

width: 100%;

w100r

width: 100rem;

w100e

width: 100em;

c#0bd

color: #0bd;

m10-20-15-20

margin: 10px 20px 15px 20px;

• 에밋 입력 방법 모음

 https://docs.emmet.io/abbreviations/syntax/

 

2. calc 함수로 계산식 사용하는 법

width: calc(100% / 3);

calc(계산식)

height: calc(100vh - 100px);

전체 화면에서 100px 를 뺀 높이

width: calc(var(--number) * 1px);

--number 에 설정 된 값 * 1px 단위