CSS 스타일 정리

문자 관련 스타일

• font-family: 문자의 글꼴을 지정하는 속성 (여러 개의 글꼴을 쉼표로 구분하여, 지정한 글꼴이 없을 경우 그 다음 글꼴로 지정)
  • 'Noto Sans KR', sans-serif;
• font-size: 문자의 글자 크기를 지정하는 속성 (단위 : px, %, em, rem, vw, vh)
• font-weight: 문자를 굵게 하거나 굵은 문자를 보통으로 재설정하는 속성
  • normal(default): (보통)
  • bold: (굵게)
• font-style: 문자를 기울어지게 하거나 기울어지지 않게 재설정하는 속성
  • normal(default): 기울어지지 않음
  • italic: 기울어짐
• line-height: 줄간격을 지정하는 속성 (단위: px, %, em 등)
• color: 글자의 색상을 지정하는 속성 (색상명, HEX 값, RGB 값, RGBA 값)
• text-decoration: 글자에 밑줄, 윗줄, 가운데줄을 치거나 쳤던 줄을 제거하는 속성
  • none(default): 줄 없음
  • underline: 밑줄
  • overline: 윗줄
  • line-through: 가운데줄
• text-transform: 영어 대소문자 변경하는 속성
  • none(default): 입력된 그대로 출력
  • uppercase: 대문자
  • lowercase: 소문자
  • capitalize: 첫글자만 대문자
• text-shdow: 글자에 그림자를 주는 속성
  • Ex) 2px 3px 5px rgba(0, 0, 0, 0.4);
    • 2px : 그림자가 원본에서 떨어지는 가로 거리
    • 3px : 그림자가 원본에서 떨어지는 세로 거리
    • 5px : 그림자가 흐릿하게 퍼지는 정도 (쓰지 않으면 퍼지는 효과 없음)
    • rgba(0, 0, 0, 0.4) : 그림자의 색상(red, green, blue, alpha)
• text-align: 문단을 블록의 왼쪽, 가운데, 오른쪽, 양쪽 등으로 정렬 시키는 속성 (블록 요소만 해당)
  • left(default): 왼쪽 정렬
  • center: 중앙 정렬
  • right: 오른쪽 정렬
  • justify: 양쪽 정렬
• text-indent: 문단의 첫머리를 들여쓰기 해주는 속성 (단위: px, %, em 등, 블록 요소만 해당)
• letter-spacing: 글자 간의 간격을 주는 속성 (단위: px, %, em 등)
• word-spacing: 단어 간의 간격을 주는 속성 (단위: px, %, em 등)

 

배경 관련 스타일

• background-color: 배경의 색상을 지정하는 속성 (색상명, HEX 값, RGB 값, HSL 값, RGBA 값, HSLA 값)
• background-image: 배경에 들어갈 이미지를 지정하는 속성
  • url(파일경로/파일명.파일확장자)
• background-repeat: 배경 이미지를 어떻게 반복시킬지를 지정하는 속성
  • repeat(default): 배경 이미지를 가로 세로로 반복하여 배치
  • no-repeat: 배경 이미지를 한 개만 배치
  • repeat-x: 배경 이미지를 가로로만 반복하여 배치
  • repeat-y: 배경 이미지를 세로로만 반복하여 배치
  • space: 배경 이미지를 반복하다가 마지막 이미지가 가로로 잘리지 않도록 배치하기 위해 이미지 사이가 벌어짐
  • round: 배경 이미지를 반복하다가 이미지가 세로로 잘리지 않도록 배치하기 위해 이미지가 납작하게 찌그러짐
• background-position: 배경 이미지를 원하는 위치로 옮겨주는 속성
  • Ex) 150px 130px;
    • 150px : 원본에서 떨어지는 가로 거리 < left(default), right, center, px, % 로 대체 가능 >
    • 130px : 원본에서 떨어지는 세로 거리 < top(default), bottom, center, px, % 로 대체 가능 >
• background-attachment: 배경 이미지를 요소 내에 고정시킬지 화면에 고정시킬지에 대한 속성
  • scroll(default): 배경 이미지가 요소 바닥에 붙은 것처럼 화면을 스크롤하면 따라감
  • fixed: 배경 이미지가 화면 바닥에 붙은 것처럼 화면을 스크롤해도 따라가지 않음
• background-size: 배경 이미지의 크기를 변경할 수 있는 속성
  • auto(default): 배경 이미지를 원래 크기로 배치
  • contain: 배경 이미지를 잘리지 않도록 배치
  • cover: 배경 이미지를 빈공간 없이 요소에 꽉 채우고 나머지는 잘림
  • length(px, % 등) 
    • 두 개의 값이면 첫번째 값이 가로 크기, 두번째 값이 세로 크기
    • 한 개의 값이면 가로 크기이며, 세로 크기는 원본 이미지의 가로 세로 비율에 맞게 배치