CSS의 border-radius(모서리 둥글게), box-sizing(크기계산), overflow(넘침제어)에 대해 알아보자

border-radius

border-radius(모서리 둥글게)

요소의 모서리를 둥글게 깍는 기능

• border-radius : 10px; > 반지름을 10px 만큼 깍아낸다
• 표현
  1. 0 : 둥글게 없음
  2. 단위 : px, em, vm 등
• 깍는 방향(1개~4개까지 입력 가능) : 시계방향(좌상, 우상, 우하, 좌하)

box-sizing

box-sizing(크기계산)

요소의 크기 계산 기준을 지정

• content-box : 요소의 내용(content)으로 크기 계산
• border-box : 요소의 내용 + padding + border로 크기 계산

overflow

overflow(넘침제어)

요소의 크기 이상으로 내용이 넘쳤을 때, 보여짐을 제어하는 단축속성

• visible : 넘친 내용을 그대로 보여줌(기본값)
• hidden : 넘친 내용을 잘라냄
• auto : 넘친 내용이 있는 경우에만 잘라내고 스크롤바 생성
• scroll : X축과 Y축에 스크롤바가 생성
• 예시
  1. overflow-x : x축으로 넘치는 부분만 체크
  2. overflow-y : y축으로 넘치는 부분만 체크