css 속성 모음

1. 내부폰트 적용

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

2. Flex container

.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 중앙정렬 */
}

3. Flex item

.item {
  flex: initial; /* (default) item 크기에 맞춤 (container 크기에 따라 가변) */
  flex: none; /* item 크기에 맞춤 (크기고정) */
  flex: 1; /* container 크기에 맞춤 */
  
  align-self: center; /* items 중에 나만 해당하는 정렬 */
  justify-self: center; /* items 중에 나만 해당하는 정렬 */
}

4. border

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

5. color

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

6. size

.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; /* 넘어가면 짤림 */
}

7. image

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

8. position

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

9.pseudo class

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

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

10. transform

.transformer {
  transform: scale() rotate() translate() skew(); /* 콘텐츠 변형 */
  transform-origin: center; /* 변형 기준점 잡기 */
  
  transition: 1s linear 0.3s /* duration timing-function delay 순 */
}

11. filter

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

12. text

.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; /* 단어사이 간격 */
}

13. media query (반응형)

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