/
/

박스 모델과 폰트

CSSbox-sizingbackground그라디언트폰트텍스트
avatar
전상욱
2025.04.10
·
4 min read

박스 모델

box-sizing

  • box-sizing의 기본값이 content-box이기 때문에 지정한 width, height는 컨텐츠의 가로, 세로 크기를 지정한다.

  • box-sizing을 border-box로 지정하면 width, height값은 컨텐츠 + padding + border를 포함한 영역을 지정한다. 그렇기에 padding을 높여도 박스의 크기가 커지지 않는다.

  • box-sizing 속성은 상속되지 않기 때문에 box-sizing 속성을 사용하도록 초기화 하려면 아래와 같은 방법으로 정의해야한다.

html {
  box-sizing: border-box;
}
*, *::after, *::before {
  box-sizing: inherit;
}

background

  • image : 배경 이미지

  • repeat : 배경 이미지 반복

  • size : 배경 이미지 사이즈

    • cover : 크기 비율을 유지하지 않으며 부모 요소의 width, height값에 이미지 크기를 맞춤.

    • contain : 크기 비율을 유지하며 배경 이미지가 잘리지 않는 선에서 최대크기로 맞춤

  • attachment

    • fixed : 스크롤이 되어도 배경 이미지는 고정.

  • position : 배경 이미지의 시작점 변경. (Default. 좌상단)

  • color : 배경색 지정

  • shorthand : color | image | repeat | attachment | position 순서로 요약해서 한 번에 쓸 수 있음.

그라디언트

그라디언트는 CSS를 통하여 그라데이션(gradation) 효과를 만들 수 있다.

그라디언트 종류

  • linear-gradient (선형 그라데이션)

  • radial-gradient (원형 그라데이션)

선형 그라디언트 (linear-gradient)

사용법

div{
  background: linear-gradient(to right, blue, white);
}

설명
linear-gradient(방향, 시작 색, 종료 색);

  • 방향 속성값

    • to top : 아래에서 위로 그라데이션 생성

    • to left : 오른쪽에서 왼쪽으로 그라데이션 생성

    • to right : 왼쪽에서 오른쪽으로 그라데이션 생성

    • to bottom : 위에서 아래로 그라데이션 생성 (기본값)

원형 그라디언트 (radial-gradient)

사용법

div{
  background: radial-gradient(circle at 10% 10%, blue, white);
}

설명
radial-gradient(모양 at 위치, 시작 색, 종료 색);

  • 모양에는 circle(원형)과 ellipse(타원형)이 있다.

  • 위치는 생략 가능하지만 기본값은 center이다.

  • ellipse -> 기본값

폰트와 텍스트

white-space

공백, 들여쓰기, 줄바꿈 등을 컨트롤하는 속성

text-overflow

부모 영역을 벗어난 텍스트의 처리 방법

  • width가 지정되어 있어야함

  • 자동 줄바꿈을 방지하기 위해 white-space 값을 nowrap으로 설정해야함.

  • overflow 속성은 visible 외의 다른 값이여야함

해당 속성의 값

  • hidden : 영역을 벗어난 값은 표시하지 않음

  • ellipsis : 벗어난 영역을 자르고 '...'으로 표시함

word-wrap, word-break

  • 한 단어의 길이가 부모 영역을 벗어날 때 처리하는 방법

  • 기본 값은 부모의 영역을 넘어 텍스트가 표시됨

  • word-wrap : break-word는 단어를 어느정도 고려하여 개행함.

  • word-break : break-all은 단어를 고려하지 않고 부모 영역에 맞추어 강제 개행함.

- 컬렉션 아티클