1. CSS 초기화
1)초기화 이유
의미를 가지고 있는 태그들이 브라우저에 특정한 스타일을 가진 형태로 나타난다
하지만 다양한 브라우저에서는 각기 다른 모습으로 나타날 수 있다
그러므로 만들려고 하는 모양을 각 브라우저에서 같아보이도록 하기 위해 초기화를 해야한다!
2)초기화하는 방법
(1) body 태그가 원래 가지고 있는 기본값을 초기화
body{
margin: 0;
body: 0;
}
이렇게 매번 초기화를 하기 어렵기 때문에
(2) reset.css라는 라이브러리를 연결해서 사용한다
reset.css cdn으로 검색해서 들어가면
reset.min.css파일을 copy html 선택해서
html 파일에 main.css에 적용해야 하므로 그 이전에 넣어야 한다.
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/reset-css@5.0.1/reset.min.css">
2. 코드펜
: 온라인 코드 에디터
html, js, css를 자유롭게 작성할 수 있다
다른 개발자들이 작업한 결과물을 볼 수 있다
pen기능으로 코딩을 시작할 수 있다
: html, css, js가 있다
: 작성하면 그 결과물을 화면에서 볼 수 있다
시작하기 전에 change view로 원하는 세팅을 만들 수 있다
html에 <body>를 따로 넣지 않고 그 안에 작성하듯이 쓰면 된다.
<style>, <script>도 작성하지 않아도 아래 css, js가 연결되어 있다
css도 마찬가지로 바로 <style>없이 {} 사용
JS도 <script> 없이 바로 사용
-만약에 한 화면에 다 작성하기 어려우면 더블 클릭을 통해 해당 창만 더 확대해서 쓸 수 있다
-reset.css제공 : css 창의 톱니바퀴를 클릭하고 css base의 reset를 선택하고 save&close
-타이틀을 더블 클릭해서 바꿀 수 있다
-코드팬에서도 emmet 문법을 사용할 수 있다
3. Emmet
: the essential toolkit for developers
- documentation에서 watch demo를 해서 본다
- emmet 문법을 사용하면 태그를 빨리 작성할 수 있다
- 또 더 빠르게 css를 작성할 수 있다
[html에서 emmet쓰기]
1)선택자.box + tab을 치면 <div class = "box"></div>가 만들어진다
2) 그냥 치면 div 태그로 나오기 때문에 ul.list+tab을 치면
: <ul class= "list"></ul>
3).container>ul.list>li.list-item*10>a{list$}
: continer 태그의 자식 요소로 ul태그, class = "list"그 자식 요소 li태그의 class = list-item가 10개
그 안에 a 태그, 그 내용으로 list1~10
[css에서 emmet쓰기]
.box{
w: 100 tab키를 누르면 width: 100px;
h:100 tab키를 누르면 heigth: 100px; (다른 단위를 쓰고 싶으면 명시해주면 된다)
}
'패캠 네카라쿠배 도전: HTML CSS' 카테고리의 다른 글
| [패캠 네카라쿠배 2기 도전] CSS/ 단위 (1) | 2021.05.28 |
|---|---|
| [패캠 네카라쿠배 2기 도전]CSS/ 개요, 선택자, 상속 (0) | 2021.05.27 |
| [패캠 네카라쿠배 2기 도전] HTML/ 전역 속성, 기타 (1) | 2021.05.27 |
| [패캠 네카라쿠배 2기 도전] HTML/ 요소 - 표 콘텐츠&양식 (0) | 2021.05.24 |
| [패캠 네카라쿠배 2기 도전] HTML/요소 - 멀티미디어&내장 콘텐츠&스크립트 (0) | 2021.05.23 |