1. CSS Reset
www.jsdelivr.com/package/npm/reset-css
jsDelivr - A free, fast, and reliable CDN for Open Source
Supports npm, GitHub, WordPress, Deno, and more. Largest network and best performance among all CDNs. Serving more than 80 billion requests per month. Built for production use.
www.jsdelivr.com
- 위의 사이트에서 reset.css 를 HTML copy하여 css 파일 위에 붙여넣기 한다.
- 각 브라우저들의 기본 CSS들이 다 초기화된다.
2. Codepen
CodePen
An online code editor, learning environment, and community for front-end web development using HTML, CSS and JavaScript code snippets, projects, and web applications.
codepen.io
- 기본 세팅들이 필요 없이 HTML의 body태그 안의 내용을 작성 가능
- 톱니바퀴 클릭 --> CSS base --> reset.css 사용 가능
3. Emmet
Emmet — the essential toolkit for web-developers
Emmet — the essential toolkit for web-developers Emmet is a plugin for many popular text editors which greatly improves HTML & CSS workflow: Demo | @@@ tooltip: Type CSS-like abbreviation type: ul#nav>li.item$*4>a{Item $} wait: 1000 tooltip: Run “Expan
emmet.io
- Emmet 문법
<body>
<div class="box"></div> <!--기본-->
<div class="box"></div> <!--.box + Tab-->
<ul class="list"></ul> <!--기본-->
<div class="list"></div> <!--.list + Tab-->
<ul class="list"></ul> <!--ul.list + Tab -->
<div class="container"> <!--.container>ul.list>li.list-item*10>a{list$} -->
<ul class="list">
<li class="list-item"><a href="">list1</a></li>
<li class="list-item"><a href="">list2</a></li>
<li class="list-item"><a href="">list3</a></li>
<li class="list-item"><a href="">list4</a></li>
<li class="list-item"><a href="">list5</a></li>
<li class="list-item"><a href="">list6</a></li>
<li class="list-item"><a href="">list7</a></li>
<li class="list-item"><a href="">list8</a></li>
<li class="list-item"><a href="">list9</a></li>
<li class="list-item"><a href="">list10</a></li>
</ul>
</div>
</body>'Front-end > Web' 카테고리의 다른 글
| CSS - 단위 (0) | 2021.02.02 |
|---|---|
| CSS - 선택자, 상속 (0) | 2021.02.02 |
| HTML - 전역 속성, 기타 (0) | 2021.02.02 |
| HTML - 표 콘텐츠 & 양식 (0) | 2021.02.02 |
| HTML - 멀티미디어 & 내장 콘텐츠 & 스크립트 (0) | 2021.02.02 |
댓글