CSS 기초 요약

django로 혼자서 프로젝트 만든걸 내부 기능은 다 만들었지만, CSS를 까먹어서 공부했던 걸 복습 겸 정리했다.

자세한 내용을 원하는 분은 안 읽으시는 걸 추천드립니다.

 

/*css 메모*/

그냥 p, h1, .. : 전체 적용
#id : id값에 해당하는 것
.class : class값에 해당하는 것
* : 전체
selector[target="target"] : selector값 중 targe만 골라서 적용

부모 > 자식 : 부모 태그 중 자식 태그한테 적용

pseudo class selector
ex) a:hover = 마우스 올렸을 때 설정 (hover, visited, link, ....)
 
px: 픽셀 값 (보통 기본 16px)
em: 현재 픽셀 기준, rem: 최상위 픽셀 기준 (기본 :16px)
% : %로 계산

색깔 : hex나 rgb 값으로 계산 가능 (+alpha로 투명도)

font-family : 폰트 종류 설정 (두 단어 이상 : 따옴표 필수) 여러 개 지정해서
없으면 다음 거 , 있으면 그거 이런 식으로
외부에서 추가 : link나 @import url로

font-style : normal-기본갑, italic-이탤릭체, oblique-기울임

font-weight : 폰트 굵기 설정 (100~900) 기본 : 400

text-align : left, right, center, justify (양쪽 정렬)

line-height : 줄 간격 (font-size 기준, 기본값: 1=16px)
letter-spacing : 글자 간격 (px로 지정)
text-indent : 문단 들여쓰기

Box model : 바깥부터 Margin - Border - Padding - Content (그림 참고)

display : block, inline, inlie-block
block - 좌우공간 모두 차지 (defualt : width:100%)
div, h1~h6, p, header, footer, section은 기본으로 block
inline : content 크기만큼 차지, 적용 X : width, height, margin-top, margin-bottom
span, a, img는 기본으로 inline 
inline-block : inline에서 적용 안되는 것 적용 가능

position : static, relative, absolute, fixed
static - 기본값
relative - static 기준으로 top, bottom, right, left 값으로 위치 조정
absolute - 상위 태그의 relative, absolute, fixed 값 기준으로 위치 조정
fixed - 보이는 화면을 기준 (스크롤 내릴 때 따라내려오는 것 등)
z-index - 맨 위로 보내기, 맨 아래로 보내기 등 static일 때는 X, 값 클수록 전면 위치

flex container => 정렬에 용이하다.
설정 : 부모 요소에 display:flex; => 자식이 flex item이 된다.
(부모와 자식에 쓰이는 속성이 다름)

부모 : flex-direction, flex-wrap, justify-content, align-items, align-content
자식 : flex, flex-grow, flex-shrink, flex-basis, order

//flex 부모 property
flex-direction : container 내의 item의 방향 (defualt=row)
--> 방향 : flex-direction : row;
<-- 방향 : flex-direction : row-reverse;
아래 방향 : flex-direction : column;
위쪽 방향 : flex-direction : column-reverse;

flex-wrap : item이 container 벗어났을 때 줄바꿈 여부 (default=nowrap)
줄바꿈 설정 = flex-wrap:wrap;

justify-content : item 정렬 방식 결정 (flex-direction 기준)
justify-content: flex-start; - 앞쪽 정렬
justify-content: center; - 가운데 정렬
justify-content: flex-end; - 뒤쪽 정렬
justify-content: space-around; - 고르게 정렬
justify-content: space-between; - 양쪽 정렬

align-items : flex-direction 기준의 수직 방향
(flex-direction:row; 이면 align-items의 방향은 수직)
(flex-direction:column; 이면 align-items의 방향은 수평)
align-items: stretch; - defualt, item의 크기 늘려 칸에 맞게
align-items: flex-start; - item의 시작부분부터
align-items: flex-end; - item의 끝부터
align-items: center; - 가운데부터

align-content : item이 여러 줄일 때, flex-direction 방향을 기준, 수직 정렬
align-content: stretch; - flex-direction과 수직 방향으로 늘림
align-content: flex-start; - " 앞쪽 정렬
align-content: flex-end; - " 뒤쪽 정렬
align-content: center; - " 가운데 정렬
align-content: space-betwwen; - " 양쪽 정렬
align-content: space-around; - " 고르게 정렬

//flex 자식 property
flex-grow : container와 item의 비율 결정
flex-grow: 0; - item 크기 변화 X
flex-grow: 1이상; - 비율에 맞춰 크기 변화 
ex) #zero{flex-grow: 0;}, #one{flex-grow: 1;}, #two{flex-grow: 2;}
=> zero크기 그대로, 나머지 공간을 one과 two가 1:2로 먹음

flex-shrink : flex-grow와 반대
flex-shink: 0; - 크기 변화 X
flex-shrink: 1이상; 비율에 맞춰 축소

상속 - 부모의 property가 자식에게 상속 ex)color
=> 되는 것도 있고 안 되는 것도 있으므로 찾아보면서 하기
상속 안 되는 것의 예 : width, height, margin, padding, display
상속 안 되는 것 상속 받을 때 - inherit
ex) margin: inherit;

우선순위 (cascading)
중요도 - <style> > <style> 내부 @import > <link> > <link> 내부 @import > default
명시도 - !important > inline > id > class,attribute, psudo class > type > universal > inherit
선언순서 - 중요도, 명시도 같은 경우 가장 마지막에 선언한 것 적용