20210525 CSS04 : box-sizing, overflow, display, opacity, font관련 속성, 문자 관련 속성, background 관련 속성

CSS04

크기 계산(box-sizing)

• padding과 border의 값은 요소의 크기를 키우기 때문에 수정시 계산하기 어려운 문제가 발생함

box-sizing

• 요소의 크기 계산 기준을 지정
• 기본값 : content-box (요소의 내용으로 크기 계산)
• 지정할 수 있는 값 : border-box (요소의 내용 + padding + border로 크기 계산)

넘침 제어(overflow)

• 요소의 크기 이상으로 내용이 넘쳤을때(자식이 부모의 크기를 넘치는 경우), 보여짐을 제어하는 단축 속성
• 넘치는 주체가 아닌 부모 요소에 사용
• 기본값 : visible (넘친 내용을 삐져나오게 그대로 보여줌)
• 지정 가능한 값
  • hidden : 넘친 내용을 잘라냄
  • auto : 넘친 내용이 있는 경우에만 잘라내고 스크롤바 생성
  • scroll : 무조건 넘친 내용을 잘라내고, 스크롤바 생성(x축, y축 모두)
• 개별 속성
  • overflow-x : value (x축으로 넘치는 경우)
  • overflow-y : value (y축으로 넘치는 경우)

출력 특성(display)

display

• 요소의 화면 출력(보여짐) 특성
• 기본값
  • 일단, 각 요소들마다 기본으로 가지는 값이 달라짐(이미 지정되어 있는 값)
  • block : 상자요소 (가로세로 너비 지정 가능)
  • inline : 글자요소 (가로세로 너비 지정 불가)
  • inline-block : 글자 + 상자요소
  • 기타 (table, table-row,table-cell ...)
• 지정 가능한 값
  • flex : 플렉스 박스 (1차원 레이아웃)
  • grid : 그리드 (2차원 레이아웃)
  • none : 보여짐 특성 없음, 화면에서 사라짐(안보임, devTool의 element 분석에는 나옴)

투명도 (opacity)

opacity

• 요소의 투명도를 결정
• 기본값 : 1 (불투명)
• 지정 가능한 값
  • 0 ~ 1 (0 부터 1사이의 소수점 숫자, 숫자가 클수록 불투명)
• 예시) opacity: 0.07

글꼴

요약정리

속성	설명	기본값	지정 가능한 값(권장 값)
font-style	글자의 기울기 지정	normal	italic oblique
font-weight	글자의 두께(가중치)	normal, 400	bold, 700 100~900
font-size	글자의 크기 지정	16px	px, em, rem 등
line-height	한 줄의 높이, 행간과 유사	normal	숫자 px, em, rem ...
font-family	글꼴 지정	글꼴 계열 sans-serif 권장	serif

font-style

• 글자의 기울기 지정
• 기본값 : normal (기울기 없음)
• 지정 가능한 값 : italic (이텔릭체), oblique(기울어진 글자, 보통 안쓰고 이텔릭 씀)

font-weight

• 글자의 두께 지정
• 기본값 : normal, 400 (기본 두께)
• 지정 가능한 값
  • bold, 700 (두껍게)
  • 100~900(100 단위 숫자9개, normal과 bold이외 두께)
  • bolder (상위,부모요소 보다 더 두껍게)
  • liter (상위,부모요소 보다 더 얇게)

font-size

• 글자의 크기 지정
• 기본값 : 16px (기본 크기)
• 지정 가능한 값
  • 단위 px, em, rem 등 단위로 지정
  • % : 부모 요소의 폰트 크기에 대한 비율
  • smaller : 상위(부모) 요소보다 작은 크기
  • larger : 상위(부모) 요소보다 큰 크기
  • xx-small ~ xx-large : 가장 작은 크기 ~ 가장 큰 크기까지 7단계의 크기를 지정

line-height

• 한 줄의 높이, 행간과 유사
• 기본값 : normal 브라우저의 기본 정의를 사용
  • (보통 css reset 되면서 1값을 가지게 됨)
• 지정 가능한 값
  • 숫자 : 요소의 글꼴 크기의 배수로 지정 (권장-> 수정시 편함)
  • 단위 px, em, rem 등 단위로 지정
  • % : 요소의 글꼴 크기의 비율로 지정
• Tip!
  • flex를 못쓰고 인라인 요소(문자)를 세로 중앙 정렬 하고싶은 경우
  • -> line-height를 요소의 height와 같게 하면 content가 가운데로 감

font-family

• 글꼴(서체) 지정
• font-family: 글꼴1, "글꼴2", ... 글꼴 계열(필수)
• 쉼표 구분하여 여러 글꼴 후보 지정 가능
• 띄어쓰기 등 특수문자가 포함된 글꼴 이름은 큰 따옴표로 묶어야 함
• 글꼴 계열 (마지막 최선의 후보)
  • sans-serif : 고딕체 계열 (깔끔하게 떨어짐, 권장)
  • serif : 바탕체 계열 (뻗침이 있음)
  • monospace : 고정너비(가로폭이 동등) 글꼴 계열
  • cursive : 필기체 계열
  • fantasy : 장식 글꼴 계열
• body 태그에 지정해서 하위 요소에 모두 상속시킴

문자 관련 속성

color

• 글자의 색상
• 기본값 : rgb(0, 0, 0) (검정색)
• 가능한 값 : 색상코드, rgb, rgba ... (기타 지정 가능한 색상)

text-align

• 문자의 정렬 방식
• 기본값 : left (왼쪽 정렬)
• 가능한 값
  • right (오른쪽)
  • center (가운데)
  • justify (양쪽 정렬)

text-decoration

• 문자의 장식(선)
• 기본값 : none (장식 없음)
• 가능한 값
  • underline (밑줄)
  • line-through (중앙선)
  • overline (윗줄)
• Tip !
  • 보통 a태그, 링크의 밑줄형태 없애고자 할때 자주 사용함

text-indent

• 문자의 첫 줄의 들여쓰기
• 기본값 : 0 (없음)
• 가능한 값
  • 단위 px, em, rem ...
  • % (요소의 가로 너비에 대한 비율)
  • 음수 사용이 가능함 -> 내어쓰기 (outdent)

배경 관련 속성

background-color

• 요소의 배경 색상
• 기본값 : transparent (투명함)
• 가능한 값 : 색상코드, rgb, rgba ...
• background-image가 들어가면 이미지의 배경에 color가 깔림

background-image

• 요소의 배경 이미지 삽입
• 기본값 : none (이미지 없음)
• 가능한 값 : url("경로") (이미지 경로, 따옴표 주의)
• 이미지가 추가되면 기본적으로 바둑판식으로 배열되어 반복적으로 출력되어 요소를 채움

background-repeat

• 요소의 배경 이미지 반복
• 기본값 : repeat (이미지를 수직, 수평 반복 -> 바둑판식)
• 가능한 값
  • repeat-x (이미지 수평 반복)
  • repeat-y (이미지 수직 반복)
  • no-repeat (이미지 반복 없음)

background-position

• 요소의 배경 이미지 위치를 결정하는 단축 속성
• 기본값 : 0%0% (0% ~ 100%의 값)
  • 브라우저에서 x, y축은 4사분면 느낌임 (y축이 아래로 갈수록 숫자가 커짐)
• 가능한 값
  • 방향 (top, bottom, left, right, center 방향)
    • 예) background-position: top right -> 우 상단 위치에 배치
    • 예) background-position: center -> 중앙 위치에 배치
  • 단위 (px, em, rem ...) -> x, y축의 개념으로 들어감
    • 예) background-position: 100px 30px -> 좌상을 기준으로 x: 100px, y: 30px에 배치

background-size

• 요소의 배경 이미지 크기
• 기본값 : auto (이미지의 실제 크기)
• 가능한 값
  • 단위 (px, em, rem ...)
    • -> 단축 속성으로 background-size: 100px 150px 처럼 배경의 width, height 설정가능
    • -> 하지만 비율 관리가 힘들기 때문에 background-size: 100px 처럼 값 하나만 넣어도 알아서 비율을 조정함
  • cover (비율을 유지, 요소의 width, height 중에 더 넓은 너비에 맞춤)
  • contain (비율을 유지, 요소의 width, height 중에 더 짧은 너비에 맞춤)

background-attachment

• 요소의 배경 이미지 스크롤 특성
• 기본값 : scroll
  • (이미지가 요소를 따라서 같이 스크롤 됨)
  • -> 같은 배경의 일부만 유지되고 스크롤시 변화없이 지나감
• 가능한 값
  • fixed
    • (이미지가 뷰포트에 고정, 배경은 스크롤 X)
    • -> 배경의 일부를 전체적으로 훑음면서 스크롤시 이미지가 변하면서 지나감)
  • local (요소 내 스크롤시 이미지가 같이 스크롤)