HTML&CSS EMMET (w.VSCODE) Kassid

EMMET이란?

html이나 css 등의 코드를 작성할 때 효과적으로 시간을 단축시켜주는 확장기능!

입력 후 Tab키 or Enter키 누르기!

HTML

! & html:5

html 표준 DTD문서

!
>>>
<!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>
    
</body>
</html>

link

링크페이지

link
>>> <link rel="stylesheet" href="">

link:css, favicon 등

link:css
>>> <link rel="stylesheet" href="style.css">

.

div 태그생성

.
>>> <div class=""></div>

.(클래스명)

지정한 클래스명 가진 div태그 생성

.title
>>> <div class="title"></div>

#(id명)

지정한 id명 가진 div태그 생성

#title
>>> <div id="title"></div>

태그명.(클래스명)

태그명#(id명)

span.title
>>> <span class="title"></span>
span#title
>>> <span id="title"></span>

>

자식 노드로 추가

table>tr>td
>>>
<table>
    <tr>
        <td></td>
    </tr>
</table>

*로 여러 개를 한 번에 생성 가능

table>tr>td*3
>>>
<table>
    <tr>
        <td></td>
        <td></td>
        <td></td>
    </tr>
</table>

+

형제 노드로 추가

div>li+ol
>>>
<div>
    <li></li>
    <ol></ol>
</div>

CSS

속성:값으로 설정 값 한 번에 생성 가능

%는 p로

font

fs

글자 모양

fs
>>> font-style: italic;

fz

글자 크기

fz
>>> font-size: ;

fz숫자 로 px값을 넣을 수 있다.

fz30
>>> font-size: 30px;

fw

글자 굵기

fw
>>> font-weight: normal;

color

c

색

c
>>> color: #000;

background

bg

배경

bg
>>> background: #000;

bgc

배경색

bgc
>>> background-color: #fff;

border

bd

윤곽선

bd
>>> border: 1px solid #000;

bx

box-sizing: border-box;

bdrs

모서리 둥글게

bdrs
>>> border-radius: ;

bdrs15
>>> border-radius: 15px;

text

tt

텍스트 형태 설정

tt
>>> text-transform: uppercase;

ta

텍스트 정렬

ta
>>> text-align: left;

ta:r
>>> text-align: right;
ta:c
>>> text-align: center;

position

pos

pos
>>> position: relative;

pos:r pos:a pos:f

pos:r
>>> position: relative;
pos:a
>>> position: absolute;
pos:f
>>> position: fixed;

float

fl

fl
>>> float: left;

fl:r
>>> float: right;

fl:l
>>> float: left;

width&height

w

너비

w
>>> width: ;

w값 / %=p로 치환

w30
>>> width: 30px;

w100p
>>> width: 100%;

h

높이

h
>>> height: ;

h30
>>> height: 30px;

'🌌 | WEB DEV > HTML CSS' 카테고리의 다른 글

CSS 기본 (4)_박스(border, border-radius) (0)	2022.01.01
CSS 기본 (3)_자손, 자식 선택자 (0)	2021.12.31
CSS 기본 (2)_서식 (0)	2021.12.31
CSS 기본 (1)_문법,선택자 (0)	2021.12.31
HTML 핵심 태그들 (0)	2021.12.31

내 블로그 - 관리자 홈 전환	`Q` `Q`
새 글 쓰기	`W` `W`

글 수정 (권한 있는 경우)	`E` `E`
댓글 영역으로 이동	`C` `C`

이 페이지의 URL 복사	`S` `S`
맨 위로 이동	`T` `T`
티스토리 홈 이동	`H` `H`
단축키 안내	`Shift` + `/` `⇧` + `/`

HTML&CSS EMMET (w.VSCODE)