[CSS] css 정리 (단위, position, float, flex ect)

Block / inline 요소 태그 특징 

block : 한 줄 모두 차지한다 = 자동 줄바꿈이 된다 (<div>, <p>, <ul>, <li>,<ol>,<table>) 

inline: 콘텐츠 영역만 차지한다 = 넓이, 높이값 변경할 수 없다 ( <span>, <em>,<b>,<a>,<img>)

inline block: 인라인 요소와 블록 요소 속성을 둘 다 가지고 있다.

 

CSS 단위

in(인치) =96px

cm(센티미터) = 37.8px 

mm(밀리미터) = 3.78px

pt (포인트)= 1/72in

pc(파이카) = 12pt

 

vh : 브라우저(뷰포트) 높이값의 1/100단위, 뷰포트가 바뀌면 자동으로 반응 변환

vw: 브라우저(뷰포트) 너비값의 1/100단위, 뷰포트가 바뀌면 자동으로 반응 변환

vmin: vh와 vw중 더 작은 것을 적용

vmax: vh와 vw중 더 큰 것을 적용

ex: 현재 폰트의 소문자 "x"높이 값/ em의 절반 값 

ch: 제로 문자인 "0"의 너비값을 기준으로 함, 10ch = 0000000000

%: 부모 요소를 기준으로 한 비율

 

rem / em 차이

rem과 em은 모두 속성 값에 비례해 결정되 상대 단위이다. 

 

rem : 최상위 요소의 font-size 속성 값을 기준으로 한다.

em: 해당 단위가 사용되고 있는 요소의 font-size 속성 값을 기준으로 한다. 해당 단위가 사용되고 있는 요소의 font-size 값이 없는 경우, 부모의 font-size 값을 기준으로 한다. 

 

*{	
     font-size: 20px;
}

div{
     font-size: 4px;
     width: 10em /*40px*/
     height: 10rem; /*200px*/
}

 

text-align 특징 및 사용

block 요소에만 속성을 적요할 수 있으며, 정렬은 block 요소 안에 있는 inline요소(텍스트, 이미지 등)에만 적용됩니다.

• left: 왼쪽 정렬
• right: 오른쪽 정렬
• center: 중앙 정렬
• justify: 양쪽 정렬
• inherit: 부모 요소의 속성 값을 상속 받음

 

letter-spacing, word-spacing

letter-spacing : 글자 사이 간격

word-spacing: 단어 사이 간격 

• normal : 기본 간격
• length (cm, mm, in, px, pt, pc) : 음수 가능
• initial : 속성의 기본값으로 설정
• inherit : 부모의 속성값 상속 

 

margin, padding

margin: 외부 여백 (상 우 하 좌)

padding: 내부 여백 (상 우 하 좌)

 

 

box-sizing

• content-box: 콘텐츠 영역을 기준으로 박스 크기를 정한다
• border-box: 테두리를 기준으로 박스 크기를 정한다
• initial: 기본값으로 설정한다.
• inherit: 부모 요소의 속성값을 상속받는다. 

 

background

• background-color : 배경화면 색 지정
• background-image : url(../폴더/파일이름.확장자)
• background-repeat: 반복 유무 no-repeat / repeat-x / repeat-y
• background-position: 이미지 위치 center/ bottom/ top / right / left  / % / px..
• background-size:이미지 크기 contain / cover 
• background-attachment: 이미지 위치를 고정 fixed

 

float

요소를 정렬하는 속성, 블록 태그에만 적용할 수 있다.

해당 요소들의 높이값이 맞아야 미디어쿼리 적용시 제대로 동작한다. 

• none: 기본 속성 그대로 유지
• left: 왼쪽 정렬
• right: 오른쪽 정렬 

 

position 

• static: 기본값
• relative: 자기 자신의 요소 기준으로 배치한다
• absolute: 부모 요소를 기준으로 배치한다
• fixed: 뷰포트 기준으로 배치한다
• stickey: 스크롤 영역 기준으로 배치한다 

 

object-fit

• fill: 기본값, 요소 크기에 맞게 꽉 차게 이미지 크기 조정됨 
• contain: 요소 크기에 맞게 비율이 조정되어 이미지 노출
• cover:  요소의 크기에 맞게 이미지가 확대 크롭되어 이미지 노출, 비율 고정
• none: 원본사이즈가 요소의 크기에 맞게 크롭됨
• scale-down: 크기가 작아보이게 처리됨 

 

flex container와 flex item

• flex container : display, flex-flow, flex-direction, flex-wrap, justify-content, align-content, align-items
• flex item: order, flex-grow, flex-shrink, flex-basis, flex, algin-self

 

flex-wrap

요소들을 정렬하는 기능이다. 부모요소에 display:flex;가 설정되어 있어야 한다.

• nowrap: 부모 넓이에 맞게 요소의 넓이를 강제 축소함
• wrap: 부모 넓이보다 요소들의 총 넓이가 크면 나머지 요소를 다음 줄로 줄바꿈함
• wrap-reverse: 줄바꿈하는 요소들을 역순으로 배열함
• initial: 기본값(nowrap)
• inherit: 부모 요소의 설정값을 적용

 

flex-direction

요소들의 나열방향을 지정한다. 부모요소에 display:flex;가 설정되어 있어야 한다.

• row: 가로 정렬
• row-reverse: 가로로 오른쪽부터 정렬
• column: 세로로 정렬
• column-recerse: 세로로 밑에서부터 정렬
• initial: 기본값(row)
• inherit: 부모 요소의 설정값을 적용