VScode에서는 User Snippet이라는 기능을 지원한다. 이해하기 쉽게 말하자면 ' 단축어 '와 비슷한 개념이다.
main {
border: 1px solid black;
}
위와 같은 코드를 작성하기 위해서 일일이 다 쓰는 것이 아닌 단 한 글자만 작성하고 Tab만 눌러도 모두 작성이 되는 그러한 기능이다.
나는 이런 기능을 CSS에서 reset, preset을 작성하기 위해 그리고 HTML 기본 문서를 내 입맛에 맞춰 작성하기 위해 User Snippet을 활용해 단축어를 만들었다.
CSS
{
"reset CSS": {
"prefix": "!r",
"body": [
"* { margin: 0; padding: 0 }",
"a { text-decoration: none; }",
"ul,ol,li { list-style: none }"
],
"description": "CSS reset"
},
"translate": {
"prefix": "tft",
"body": [
"transform: translate(-50%, -50%);",
],
"description": "typing to translate"
},
"preset CSS": {
"prefix": "!s",
"body": [
"@charset \"UTF-8\"; @import \"./reset.css\";"
]
},
"absolute": {
"prefix": "patl",
"body": [
"position: absolute;",
"top: 50%;",
"left: 50%;",
],
"description": "typing to absolute"
},
"relative": {
"prefix": "pr",
"body": [
"position: relative;",
],
"description": "typing to relative"
},
}
HTML
{
"Preset HTML": {
"prefix": "!k",
"body": [
"<!DOCTYPE html>",
"<html lang='ko'>",
"<head>",
" <meta charset='UTF-8'>",
" <title>Document</title>",
" <link rel='stylesheet' href='style.css'>",
"</head>",
"<body>",
" ",
"</body>",
"</html>"
],
"description": "HTML reset"
},
"Awesome cdn": {
"prefix": "cdn",
"body": [
"<link rel=\"stylesheet\" href=\"https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.6.0/css/all.min.css\" integrity=\"sha512-Kc323vGBEqzTmouAECnVceyQqyqdsSiqLQISBL29aUW4U/M7pSPA/gEUZQqv1cwx4OnYxTxve5UMg5GT6L4JJg==\" crossorigin=\"anonymous\" referrerpolicy=\"no-referrer\" />"
],
"description": "HTML reset"
}
}'Today I Learned > WEB' 카테고리의 다른 글
| [취업교육] STAR 기법 - 에이블런 프론트엔드부트캠프 28일차 (0) | 2024.08.22 |
|---|---|
| [취업교육] 1분 자기소개 구조 - 에이블런 프론트엔드부트캠프 27일차 (0) | 2024.08.22 |
| [WEB] 비동기 개념 - 에이블런 프론트엔드부트캠프 19일차 (0) | 2024.08.08 |
| [VSCODE] Emmet - 에이블런 프론트엔드부트캠프 (0) | 2024.08.07 |
| [JS] JS - 에이블런 프론트엔드부트캠프 9일차 (0) | 2024.07.25 |
