Atom 에디터의 단축키는 이곳을 참고하면 된다.
출처 : https://atom.io/packages/emmet
emmet
Emmet – the essential tool for web developers
atom.io
html을 처음 공부할 때 Atom 에디터에서 emmet 패키지를 이용하면 훨씬 수월해진다.
emmet에서 사용하기 좋은 문법들에 대한 소개를 아래 링크로 올려놓았다.
출처 : https://docs.emmet.io/abbreviations/syntax/
Abbreviations Syntax
Abbreviations Syntax Emmet uses syntax similar to CSS selectors for describing elements’ positions inside generated tree and elements’ attributes. Elements You can use elements’ names like div or p to generate HTML tags. Emmet doesn’t have a predefined set
docs.emmet.io
이 외에도, 동일 사이트 내에 Cheat Sheet가 있으니 참고하면 좋을 것 같다.
출처 : https://docs.emmet.io/cheat-sheet/
Cheat Sheet
Download cheat sheet as printable PDF A5
docs.emmet.io
(아주 기본적인것 몇가지만 간단히)
>, ^, +, ( ),* 등의 문법이 있다.
태그에 .을 붙이고 이름을 쓰면 class이름을 정해주는것
태그에 #을 붙이고 이름을 쓰면 id 이름을 정해주는것
태그 안에 속성값을 부여해주고 싶다면
a[target="_blank" title="abcd"] 탭!
{ }중괄호는 text content이다.
a>{abcdefg} 하면 그 결과는
<a href="">abcdefg</a>
'HTML' 카테고리의 다른 글
| <img> 태그 (이미지) (1) | 2020.01.30 |
|---|---|
| <p>, <br> 태그 (0) | 2020.01.30 |
| Html의 문서 구조 (0) | 2020.01.30 |
| <ul>, <ol>, <li> 태그 활용법 (0) | 2020.01.30 |
| Html 공부에 도움이 되는 사이트 (0) | 2020.01.30 |