CSS 속성 # 박스 모델

달다로·2024년 5월 31일

CSS

목록 보기

2/7

📌CSS 제어요소

박스모델
가로 세로 너비 등 (사각형)
글꼴, 문자
폰트(서체), 글씨 크기 굵기 등 제어(문자 관련 속성)
배경
배경색상 혹은 배경 이미지 제어
배치
특정 요소를 원하는 위치로 이동시키기 위함을 뜻함
플렉스(정렬)
수평정렬
전환
요소의 전상태와 후상태를 애니매이션 상태로 표현하는 것
변환
요소를 회전, 이동, 크기조절 등 요소에 변화를 주는 속성(2D변환, 3D변환)
띄움
플렉스가 나오기 전에 사용했음. 요소를 공중으로 띄운다. 띄어진 요소 주변으로 문자가 흐를 수 있도록 함(신문기사 사진 주변의 글자들)
애니메이션
복잡한 구조의 애니매이션 만들 수 있음(전환은 단순한 애니매이션)
그리드
행과 열의 구조를 가지고 있는 2차원의 레이아웃을 만들기 위함.
다단
문서작업을 할 때 단을 여러개로 나누는 것과 같은 이치
필터
흐리게, 흑백 등 이미지에 필터 넣는 것

📌박스모델

width, height
요소의 가로/세로 너비
auto
브라우저가 자동으로 요소를 계산 후 브라우저에 보여줌 (기본값, 요소에 이미 들어있는 속성값)
단위
px, em, vw 등 단위로 지정

span 인라인 요소
아무것도 나타내지 않는 콘텐츠 영역을 설정하는 용도. 블록크기가 포함한 콘텐츠 크기만큼 자동으로 크기 조절됨
div 블럭 요소
아무것도 나타내지 않는 콘텐츠 영역을 설정하는 용도. 가로사이즈는 부모요소의 크기만큼 자동으로 늘어남.(전체너비사용)

max-width, max-height

요소가 커질 수 있는 최대 가로/세로 너비

min-width, min-height

요소가 작아질 수 있는 최소 가로/세로 너비

단위
px, %, em(요소 글꼴 크기1em=10px), rem(루트요소(최상위), vw, vh

margin

요소의 외부 여백(공간)을 지정하는 단축 속성, 음수를 사용할 수 있다(-)

margin: 10px(top, right, bottom, left);
margin: 10px(top/bottom) 20px(left,right);
margin: 10px(top) 20px(left,right) 30px(bottom);
margin: 10px(top) 20px(right) 30px(bottom) 40px(left);

Padding

요소의 내부여백(공간)을 지정하는 단축 속성, 사용하면 요소의 크기가 커진다. %로 부모요소의 가로 너비에 대한 비율 지정가능

padding: 10px(top, right, bottom, left);
padding: 10px(top, bottom) 20px(left, right);
padding: 10px(top) 20px(left,right) 30px(bottom);
padding: 10px(top) 20px(right) 30px(bottom) 40px(left);
padding 방향 입력 가능(top, bottom, right, left)

Border

요소의 테두리 선을 지정하는 단축 속성, 요소의 크기가 커진다!
선-두께, 선-종류, 선-색상;

border: medium none black;
border: 4px solid black;

border-width
테두리 두께

medium, thin, thick, eksdnl(px...권장)

border-style
- none
- solid(일반선)
- dotted
- dashed(- - -)
- double
- groove(홈파인모양)
- ridge
- inset
- outset
border-color
```
	transparent: 투명       
```

border-radius
요소 모서리를 둥글게 깎음

border-radius: 0 0 10px 0; (원하는 방향만 둥글게 깎을수도 있음)

Box-sizing

요소 크기 계산 기준 지정

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

Overflow

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

visible(기본값)
hidden(넘친내용 잘라냄)
scroll(옆, 아래에 스크롤바생성)
auto(요소가 넘치는 부분만 스크롤바 생성)

Display

이미 지정되어있는 값 / 따로 지정해서 사용하는 값
요소 화면 출력(보여짐) 특성

block 상자(레이아웃) 요소
inline 글자요소
inline-block 글자+상자요소
flex 플렉스 박스 (1차원 레이아웃)
grid 그리드(2차원 레이아웃)
none 보여짐 특성 없음, 화면에서 사라짐
기타 table, table-row ...

Opacify

투명도 0 ~ 1로 조절

Font

Font-style
글자 기울기 (italic, oblique)
Font-weight
글자 두께(bold(700), 100~900, 기본 400)
line-height
- 한 줄의 높이(행간과 유사)
- 숫자 (기본값 16px의 배수 ex line-height: 1.4; 는 기본 16px x 1.4배 가 되는 것)
- 단위 px ...
font-faily
글꼴1, "글꼴2", ... 글꼴계열(필수)); 폰트명에 띄어쓰기가 되어있으면 " "로 묶어줘야함
text-align
정렬 center;(right, left)
text-decoration
underline 밑줄 line-through 중앙선
text-indent
10 들여쓰기 -10 내어쓰기

Background

background-image: url("이미지 경로");
배경에 이미지 넣기
background-size: 200px;
처음에 지정한 가로세로 크기로 적음! 더 작게 혹은 크게 하면 이미지가 반복적으로 나옴
- cover 이미지가 더 넓은 너비에 맞춰져서 나옴
- contain 이미지가 더 짧은 너비에 맞춰져서 나옴
background-repeat: no-repeat;
- 이미지를 반복하지 않겠다.
- repeat-x x축만 repeat-y y축
background-position: center;
이미지위치
backgournd-attachment
요소에 배경 이미지 스크롤 특성
- scroll(기본값) 요소를 따라서 같이 스크롤
- fixed 이미지가 뷰포트에 고정, 스크롤 X(사이트 제작할때 배경을 고정시키고 싶을때 사용)
- local 요소 내 스크롤 시 이미지가 같이 스크롤(잘 쓰이지 않음)
position
static(기본값) / relative / absolute / fixed / sticky