박스 모델
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은 단어를 고려하지 않고 부모 영역에 맞추어 강제 개행함.