기본 구조

기본 구조(Selector, Property, Value)

.body {        /* 선택자를 Selector */
	width: 100%; /* 각 요소의 키를 Property, 요소의 값을 Value */
	height: 100%;
	margin: 0px;
}

용어

box / item

<div></div> / <div><a class="item1"></a><a class="item2"></a></div>

block / inline

<div></div> / <span></span>

tag / element / contant

element : <p>people<p/> / tag : <p></p> / contant : people

attribute

class="edit-note"

root

:root {
  /* Color */
  --color-white: #ffffff;
  --color-light-white: #eeeeee;
  --color-dark-white: #bdbdbd;
  --color-pink: #fe918d;
  --color-blue: #73aace;
  --color-yellow: #fff7d1;
  --color-orange: #feb546;
  --color-black: #000000;

  /* Font size */
  --font-large: 48px;
  --font-medium: 28px;
  --font-regular: 18px;
  --font-small: 16px;
  --font-micro: 14px;

  /* Font weight */
  --weight-bold: 700;
  --weight-semi-bold: 600;
  --weight-regular: 400;

  /* Size */
  --size-border-radius: 4px;

  /* Animation */
  --animation-duration: 300ms;
}

Universal Tags

/* Universal tags */
* {
  box-sizing: border-box;
}

body {
  font-family: "Open Sans", sans-serif;
  margin: 0;
  cursor: default;
}

a {
  text-decoration: none;
  color: var(--color-white);
}

ul {
  list-style: none;
  padding-left: 0;
  margin: 0;
}

button {
  background-color: transparent; /* 투명하게 */
  cursor: pointer;
  border: none;
  outline: none;
  padding: 0;
}