| 일 | 월 | 화 | 수 | 목 | 금 | 토 |
|---|---|---|---|---|---|---|
| 1 | 2 | 3 | 4 | 5 | 6 | 7 |
| 8 | 9 | 10 | 11 | 12 | 13 | 14 |
| 15 | 16 | 17 | 18 | 19 | 20 | 21 |
| 22 | 23 | 24 | 25 | 26 | 27 | 28 |
| 29 | 30 | 31 |
- BFS
- 웹
- 타입스크립트
- es6
- 이더리움
- 쿠버네티스
- HTML
- 솔리디티
- kubernetes
- AWS
- 블록체인
- TypeScript
- react
- 리액트
- 가상화
- node.js
- CSS
- 이슈
- 자바스크립트
- 클라우드
- next.js
- 백준
- JavaScript
- 프론트엔드
- 알고리즘
- k8s
- 파이썬
- 백엔드
- 컴퓨터공학
- docker
- Today
- Total
즐겁게, 코드
웹 개발자는 무적이고, 에밋은 신이다 본문
웹 개발자라면 수도 없이 보았을 HTML 기본 구조입니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body></body>
</html>자, 지금부터 간단한 마술을 하나 보여드리겠습니다.
비주얼 스튜디오 코드나 다른 코드 에디터에서 index.html 파일을 만들고 ! 를 입력해보세요.
와! 느낌표 하나를 찍었더니 기본 HTML 템플릿이 생성된 모습입니다.
이건 에디터에 내장된 에밋(emmet)이라는 플러그인의 도움을 받은 결과인데요, 오늘은 에밋 문법을 소개해보도록 하겠습니다.
요소 생성하기
<span>, <div> 등 HTML 요소를 생성하는 방법은 정말 간단한데요, 태그명을 영어로 입력하면 무려 알아서 태그를 생성해줍니다.
<!-- 에밋 코드 -->
span.content
<!-- 결과물 -->
<span class = "content"></span>
Tip 1. [div 태그는 예외적으로 태그명을 생략할 수 있습니다.]
<!-- 에밋 코드 -->
.content
<!-- 결과물 -->
<div class = "content"></div>
Tip 2. [태그 안에 작성할 내용은 {} 기호로 감싸면 됩니다.]
<!-- 에밋 코드 -->
.content{이 블로그는 참 심심합니다.}
<!-- 결과물 -->
<div class = "content">이 블로그는 참 심심합니다.</div>
눈 깜짝할 사이에 <span> 태그가 생성된 모습이네요!
태그에 클래스나 아이디 값을 부여하는 방법도 간단한데요, 클래스와 아이디를 부여하는 방법은 CSS 선택자를 사용하는 방식과 동일합니다.
태그명.클래스명#아이디명 -> <태그명 class = "클래스명" id = "아이디명"></태그명>
아이디와 클래스뿐만 아니라 입력의 타입 등 특정한 속성값을 지정하는 것도 가능합니다.
태그명[속성명=속성값] -> <태그명 속성명 = "속성값"></태그명>input 태그에 my-button 클래스를 부여하고 타입을 버튼으로 지정한 모습입니다.
슬슬 에밋이 매력적으로 느껴지지 않으시나요?
에밋과 CSS 선택자를 결합하면 더 복잡한 HTML 문서도 구성할 수 있습니다.
CSS 선택자와 함께 사용하기
복합 선택자인 >(자식 선택자), +(형제 선택자)를 기억하시나요?
에밋에서도 이러한 선택자들을 사용해 자식 요소들과 형제 요소들을 만들 수 있습니다.
<!-- 에밋 코드 -->
body>header>div{여긴 헤더입니다!}
<!-- 결과물 -->
<body>
<header>
<div>여긴 헤더입니다!</div>
</header>
</body>
<!-- 에밋 코드 -->
form:get>label.label+input[type=email]+input[type=password]
<!-- 결과물 -->
<form action="" method="get">
<label for="" class="label"></label>
<input type="email" />
<input type="password" />
</form>
반복 사용하기
보면 볼수록 엄청난 기능이란걸 느끼셨을 텐데요, 여기서 그치지 않고 원하는 요소를 반복해서 생성하는 것도 가능합니다.
<!-- 에밋 코드 -->
ul>li.item-list*5
<!-- 결과물 -->
<ul>
<li class="item-list"></li>
<li class="item-list"></li>
<li class="item-list"></li>
<li class="item-list"></li>
<li class="item-list"></li>
</ul>
<!-- 에밋 코드 -->
# [$ 기호를 사용해 반복문의 인덱스를 활용할 수도 있습니다.]
ul>li.item-list*5{이건 $번째 요소입니다!}
<!-- 결과물 -->
<ul>
<li class="item-list">이건 1번째 요소입니다!</li>
<li class="item-list">이건 2번째 요소입니다!</li>
<li class="item-list">이건 3번째 요소입니다!</li>
<li class="item-list">이건 4번째 요소입니다!</li>
<li class="item-list">이건 5번째 요소입니다!</li>
</ul>
어떤가요? 이제 <> 기호를 열고 닫고... 태그 짝 맞추고... 하는 불필요한 작업에서 어느 정도 벗어날 수 있게 되었습니다.
비록 리액트 컴포넌트*에서는 에밋을 사용할 수 없지만, 뷰 컴포넌트나 바닐라 HTML 문서에는 얼마든지 활용이 가능합니다!
이제 앞으론 에밋과 함께 행복 마크업 해봐요!
--- 2021. 02. 13 수정
내용에 오류가 있어 수정합니다!
리액트 컴포넌트 -> 컴포넌트를 .js 확장자가 아닌 .jsx 확장자로 작성하면 리액트에서도 에밋 활용이 가능합니다.
잘못된 내용을 전달해 죄송하다는 말씀을 남기며, 앞으로는 더 꼼꼼히 체크한 후 포스팅하도록 하겠습니다 :)
'🎨 프론트엔드' 카테고리의 다른 글
| 쿠키? 그거 먹는 건가요? (0) | 2021.02.15 |
|---|---|
| 웹 페이지 컨텐츠 복사 방지 구현하기 (0) | 2021.02.14 |
| HTML의 data- 속성에 대하여 (0) | 2021.02.13 |
| 페이지를 화사하게 - Font Awesome 사용하기 (0) | 2021.02.10 |
| Critical Rendering Path 에 대하여 (0) | 2021.01.31 |
