HTML5, CSS 편집기 아톰(Atom)에서 Emmet을 이용한 A태그(Tag) 생성 방법입니다.
HTML5, CSS 편집기 아톰(Atom) Emmet A 태그(Tag) 단축키
a[#].icon$>span{icon$} + TAB
HTML5, CSS 편집기 아톰(Atom) Emmet A 태그(Tag) 생성
A태그 및 그 안의 SPAN 태그도 같이 한번에 생성하였습니다.
HTML5, CSS 편집기 아톰(Atom) Emmet A 태그(Tag) 복사
생성된 태그에 뒤에 마우스를 놓고 Ctrl + Shift + D 를 통해서 줄 복사를 합니다.
HTML5, CSS 편집기 아톰(Atom) Emmet A 태그(Tag) 편집 및 완성
줄복사한 내용이 숫자들을 순서에 맞게 변경하여 완료합니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
a[#].icon$>span{icon$}
<a href="#" class="icon1"><span>icon1</span></a>
<a href="#" class="icon2"><span>icon2</span></a>
<a href="#" class="icon3"><span>icon3</span></a>
<a href="#" class="icon4"><span>icon4</span></a>
<a href="#" class="icon5"><span>icon5</span></a>
</body>
</html>
HTML5, CSS3, JavaScript, PHP, Python 편집기 아톰(Atom) 유용한 단축키 활용법 - 줄복사, 줄찾기(검색), 일괄주석, 파일검색
HTML5, CSS3, JavaScript, PHP, Python 편집기 아톰(Atom) 사용 시 유용한 단축키입니다. 줄 복사 한줄 내용을 그대로 다음줄에 복사합니다. 단축 키 : Ctrl + Shift + d 주석 일괄 처리 원하는 블럭을 한번에 주..
han288.tistory.com
'유용한 활용팁' 카테고리의 다른 글
| Microsoft Windows10(윈도우)에서 유닉스, 리눅스처럼 Symbolic Link(바로가기) 생성하기 (0) | 2019.11.19 |
|---|---|
| PHP 2차원 Array에서 unset후 배열 index 재 정렬 방법 (0) | 2019.11.17 |
| JavaScript 구분자로 배열 만들기, 타입 변경하기(String, Number) (0) | 2019.11.15 |
| .htaccess를 이용하여 301 리다이렉트하기 - mod_rewrite 이용 (2) | 2019.11.14 |
| 반응형 웹사이트, 모바일 최적화 점검 가능한 다음 트로이 (0) | 2019.11.13 |