* {
  color: black;
}

body {
  width: 100vw;
  height: 100vh;
}
p {
  font-size: 10px;
}

.box {
  border: 2px solid red;
}

#selectedBox {
  background: blue;
}

<style>
  .blue {
    color: blue;
  }
  .red {
    color: red;
  }
</style>

<!-- 중복된 클래스 순서를 바꿔서 지정 -->
<div class = "blue red"></div>
<div class = "red" blue"></div>

@font-face {
  font-family: '폰트명';
  src: url(폰트파일.otf) format('truetype');
}

.container {
  display: flex; /* 컨테이너 상태를 flex로 설정*/

  flex-direction: row; /* (default)items 정렬을 가로로 */
  flex-direction: column; /* items 정렬을 세로로 */

  flex-wrap: nowrap; /* (default) items 넘어가면 짤림 */
  flex-wrap: wrap; /* items 넘어가면 줄바꿈 */

  /* items 메인축 (진행방향) 정렬 */
  justify-content: flex-start; /* (default) items 앞쪽정렬 */
  justify-content: flex-end; /* items 뒤쪽정렬 */
  justify-content: center; /* items 중앙정렬 */
  justify-content: space-around; /* items 일정한 간격 정렬 */
  justify-content: space-between; /* items 일정한 간격 정렬(양끝붙임) */

  /* items 교차축 (진행방향의 수직방향 정렬 */
  align-items: stretch; /* (default) items container 크기에 맞춤 */
  align-items: flex-start; /* items 앞쪽정렬 */
  align-items: flex-end; /* items 뒤쪽정렬 */
  align-items: center; /* items 중앙정렬 */
}

.item {
  flex: initial; /* (default) item 크기에 맞춤 (container 크기에 따라 가변) */
  flex: none; /* item 크기에 맞춤 (크기고정) */
  flex: 1; /* container 크기에 맞춤 */

  align-self: center; /* items 중에 나만 해당하는 정렬 */
  justify-self: center; /* items 중에 나만 해당하는 정렬 */
}

.box {
  border: 2px solid red; /* 두께, 속성, 색깔 순 */
  border-radius: 2px; /* 가장자리를 뭉툭하게 (50%로 설정하면 원이 된다)
  */

  box-shadow: 2px 2px 2px black; /* offset-x | offset-y | blur-radius | color 순 */
}

.colorBox {
  color: rgba(255,255,255,0.5); /* rgb색상과 투명도 사용 */

.sizeBox {
  width: 100%;
  height: 100%; /* 부모의 기준 */
  width: 100vw;
  height: 100vh; /* viewport 기준 */

  max-width: 40px;
  max-height: 40px; /* max범위 설정 (반응형에서 유용) */

  margin: 5px; /* 바깥쪽 여백 */
  padding: 5px; /* 안쪽 여백 */

  overflow: auto; /* 넘어가면 스크롤 나옴 */
  overflow: visible; /* 넘어가면 초과해서 나옴 */
  overflow: hidden; /* 넘어가면 짤림 */
}

.image {
  background-image: url(이미지경로.png);
  background-position: center; /* 50% 50% 나 left bottom 등 이미지 정렬 */
  background-repeat: no-repeat; /* 이미지 반복 x */
  background-size: contain; /* 이미지 설정한 크기에 맞추기(짤리지 않게) */
  background-size: cover; /* 이미지 설정한 크기에 맞추기(짤림) */

.positionBox {
  position: static; /* (default) 차례대로 왼쪽에서 오른쪽으로(<span>) 위에서 아래로 쌓임(<div>) */
  position: relative; /* 기존의 static 상태에서 위치조정 가능 */
  position: absolute; /* 완전히 자신의 고유 위치를 갖는다. 부모의 position이 relative인 경우, 그 위치 내에서의 고유위치를 찾음 */
  position: fixed; /* 브라우저 내의 고정위치를 가짐 */

  z-index: 5; /* 레이어의 순서 지정가능 */
}

.box:hover {
  /* 마우스 올렸을 때 */
}
.box:link {
  /* 방문하지 않은 링크 */
}
.box:visited {
  /* 방문한 링크 */
}
.box:active {
  /* 마우스로 클릭한 상태 */
}
.box:focus {
  /* 활성화 (ex. input태그의 클릭) */
}

.box:nth-child(n) {
  /* n번째 태그요소 선택 */
}

.transformer {
  transform: scale() rotate() translate() skew(); /* 콘텐츠 변형 */
  transform-origin: center; /* 변형 기준점 잡기 */

  transition: 1s linear 0.3s; /* duration timing-function delay 순 */
}

.filterBox {
  filter: blur() grayscale() drop-shadow(); /* 다양한 필터들 */
}

.textBox {
  text-align: center; /* 글정렬 */
  line-height: 20px; /* 줄간격 */
  text-decoration: underline; /* 밑줄 */
  text-shadow: 1px 1px 2px pink; /* offset-x | offset-y | blur-radius | color 순 */
  letter-spacing: 10px; /* 글자사이 간격 */
  word-spacing: 10px; /* 단어사이 간격 */
}

@media (max-width: 1070px) {
}
@media (max-width: 770px) {
}