Visual Studio Code 활용 TIP

1. HTML 기본구조 자동 완성

[! + Tap] 을 입력하면 html 기본구조가 자동으로 완성된다.

2. alt + 클릭 = 다중커서

3. 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);
}