6/22 TIL : CSS 속성, 배치

border

border: border-width border-style border-color

border-width: top right bottom left(px, em, % 등 단위로 지정)

border-style: top right bottom left(soild, dotted, dashed, double..)

border-color: top right bottom left

border-방향-속성

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

- px, em, vw 등 단위로 지정

- 왼쪽 위 꼭지점부터 시계방향

 

box-sizing: 요소의 크기 계산 기준

- content-box: 요소의 내용으로 크기 계산

- border-box: 요소의 내용 + padding + border로 크기 계산

 

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

- visible: 넘친 내용을 그대로 보여줌

- hidden: 넘친 내용을 잘라냄

- scroll: 넘친 내용을 잘라내고 스크롤바 생성

- auto: 넘친 내용이 있는 경우에만 잘라내고 스크롤바 생성

- overflow-x, overflow-y

 

display: 요소의 화면 출력 특성

- block: 상자 요소

- inline: 글자 요소

- inline-block: 글자+상자 요소

- flex: 요소들이 수평 정렬 되도록 함

- grid

- none

 

opacity: 요소 투명도

- 1: 불투명

- 0~1 사이의 소수점 숫자

 

요소를 숨기는 방법

- opacity: 0 모습 숨김, 속성 남음, 자리 차지

- visibility: hidden 모습 숨김, 속성 숨김, 자리 차지

- display: none 그냥 없애버림, 자리도 사라짐

 

font

font-style: normal, italic

font-weight: 100~900. 기본 두께 400(normal)

font-size: px, em, rem 등 단위로 지정. 기본 크기 16px

line-height: 한 줄의 높이

- 숫자: 글꼴크기의 배수

- 단위: px, em, rem 등

font-family: 글꼴1, "글꼴2:, ... 글꼴계열(필수);

- serif, sans-serif, monospace, cursive, fantasy

 

문자에 대한 속성

color

text-align: left / right / center / justify

text-decoration: none / underline / overline / line-through

text-indent: 문자 첫 줄의 들여쓰기

- 단위: px, em, rem 등

- 음수 사용 가능(내어쓰기)

 

배경

background-color

background-image: url("경로")

background-repeat: repeat / repeat-x / repeat-y / no-repeat

background-position: 방향(방향1 방향2) / 단위(x축 y축)

background-size: 단위 / cover(요소의 더 넓은 너비에 맞춤) / contain(짧은 너비에 맞춤)

background-attachment: scroll / fixed(뷰포트에 고정)

background: linear-gradient: 그라데이션

- 색상1 색상2

- 방향 색상1 색상2

- 방향 색상1 색상1의 비중 색상2

- 방향 색상1 색상2 색상3

 

배치1

position: 요소의 위치 지정 기준

- static: 기준 없음

- relative: 요소 자신을 기준

- absolute: 위치 상 부모 요소를 기준, 부모가 static이면 기준이 될 수 없고 relative인 상위 요소가 없다면 뷰포트를 기준으로 함

- fixed: 뷰포트를 기준

- sticky: 스크롤 영역 기준

- top, bottom, left, right

- absolute, fixed면 display 속성이 block으로 변경됨

 

요소 쌓임 순서

1. 요소에 position 속성의 값이 있는 경우 위에 쌓임(기본값 제외)

2. 1번이 같은 경우, z-index 속성의 숫자가 높을 수록 위에 쌓임

3. 1, 2번이 같은 경우, HTML의 나중 구조일 수록 위에 쌓임

 

z-index: 요소의 쌓임 정도를 지정

 

flex container 속성

display

- flex: 컨테이너가 한줄을 전부 차지함

- inline-flex: 컨테이너가 요소만큼만 차지함

 

flex-direction: row / row-reverse / column / column-reverse

 

flex-wrap: items 묶음(줄 바꿈) 여부

- nowrap: 줄 바꿈 없음, item 크기가 줄어들 수 있음

- wrap: 여러 줄로 묶음

 

justify-content: 주 축의 정렬 방법

- flex-start / flex-end / center / space-between / space-around / space-evenly

 

align-content: 교차 축의 여러 줄 정렬 방법

- stretch / flex-start / flex-end / center / space-between / space-around

 

align-items: 교차 축의 한 줄 정렬방법

- stretch / flex-start / flex-end / center / baseline

 

flex item 속성

order: 숫자가 작을수록 먼저

flex-grow: 숫자(증가 비율)

flex-shrink: 숫자(감소 비율)

flex-basis: 공간 배분 전 기본 너비(단위로 지정)