[! + Tap]
을 입력하면 html 기본구조가 자동으로 완성된다.
alt + 클릭 = 다중커서
button.btn*6 class 이름지정 , 원하는 개수
<button class="colorbtn"></button>
<button class="colorbtn"></button>
<button class="colorbtn"></button>
<button class="colorbtn"></button>
<button class="colorbtn"></button>
<button class="colorbtn"></button>
처음 기본세팅하면 좋음
* {
box-sizing: border-box;
margin: 0px;
padding: 0px;
}
html,
body {
height: 100%;
}
구글폰트 import 후 html에 입력한 후 css 입력
<style>
@import url('https://fonts.googleapis.com/css2?family=Lobster&display=swap');
</style>
레이아웃을 구성할 때 부모요소의 높이를 미리 정해두고 자식요소의 크기를 정하는 top-down 방식이 아닌, 자식요소의 높이에 따라 부모요소의 높이가 유동적으로 결정되는 bottom-up 방식으로 구성해주세요.
css 변수 지정
:root {
/* color */
--color-black: #3f454d;
--color-white: #ffffff;
--color-blue: #3b88c3;
--color-yellow: #fbbe28;
--color-pink: #fd7f84;
--color-light-grey: #dfdfdf;
--trans-form: scale(1.1);
}