[CSS] CSS(3) - position / background / display

 

이번엔 CSS 의 속성 중 position 과 flex 에 대해 정리해보았다. CSS 속성 중 가장 헷갈리는 부분이다.

 

< CSS >

 

1. position 

 

• static : 정적 위치 지정 방식 ( 고정값 )
• relative : 상대 위치 지정 방식
• absolute : 절대 위치 지정 방식
• fixed : 고정 위치 지정 방식

position
relative	요소 자신을 기준으로 배치
absolute	위치상 부모요소를 기준으로 배치 → 부모는 무조건 relative 여야함. 없으면 부모의 부모 조상까지 올라감. 계속 없으면 뷰포트까지도 올라감. → 브라우저 크기가 바뀌면 변함, 그러나 고정은 안됨 ( = 스크롤 내려도 변함 )
fixed	뷰포트를 기준으로 배치 → 고정 됨 (스크롤내려도 그대로)

➡️ position이 absolute나 fixed 일 때는 display를 block 으로 둬도 똑같음

      = position의 속성 값으로 absolute 나 fixed 가 지정된 요소는 , display 속성이 block으로 변경 됨.

 

 

 z-index 

 

요소 쌓임 순서 ( stack order )  = 어떤 요소가 사용자와 더 가깝게 있는지 ( 위에 쌓이는지 ) 결정 1. 요소에 position 속성의 값이 있는 경우 위에 쌓임. ( 기본값 static 제외 ) 2. 1번 조건이 같은 경우, z-index 속성의 숫자 값이 높을 수록 위에 쌓임. 3. 1번과 2번 조건까지 같은 경우, html 의 다음 구조일 수록 위에 쌓임.

 

z-index	요소의 쌓임 정도를 지정	auto : 부모 요소와 동일한 쌓임 정도 숫자값 : 숫자가 높을 수록 위에 쌓임

➡️ z-index : n; 값을 주면 위에 쌓이는 높이를 높게해서 올릴수있음. 숫자가 커질수록 위로 올라옴

➡️ 단, 포지션이 static이 아닌 것에만 적용 가능. static에는 적용 불가. 정수만 부여 가능

 

 

2. 배경 

 

배경
background-color	요소의 배경 색상	transparent : 투명함 색상 : 지정 가능한 색상
background-image	요소의 배경 이미지 삽입	none : 이미지 없음 url ( "경로" ) : 이미지 경로
background-repeat	요소의 배경 이미지 반복	repeat : 이미지를 수직 / 수평 반복 repeat-x : 이미지를 수평 반복 repeat-y : 이미지를 수직 반복 no-repeat : 반복 없음
background-position	요소의 배경 이미지 위치	0% 0% : 0% ~ 100%  사이 값 방향 : top,bottom,left,right,center  단위 = px, em, rem 등
background-size	요소의 배경 이미지 크기	auto : 이미지의 실제 크기 단위 = px, em, rem 등 단위로 지정 cover : 비율을 유지, 요소의 더 넓은 너비에 맞춤 contain : 비율을 유지, 요소의 더 짧은 너비에 맞춤
background-attachment	요소의 배경 이미지 스크롤 특성	scroll : 이미지가 요소를 따라서 같이 스크롤 fixed : 이미지가 뷰포트에 고정, 스크롤 X local : 요소 내 스크롤 시 이미지가 같이 스크롤

 

배경 색상을 그라데이션으로 넣는 방법

 

3. display 

 

 flex 

• 부모와 자식이 있을 때 , 부모에게 주고 , 그 안 자식들을 수평 정렬 하는 것

 

display=flex;
flex-direction	주 축을 설정	row : 행 축 ( 좌 -> 우 ) row-reverse : 행 축 ( 우 -> 좌 ) column : 열 축 ( 위 -> 아래 ) column-reverse : 열 축 ( 아래 -> 위 )
flex-wrap	flex items 묶음 여부 ( = 줄바꿈 여부 )	no-wrap : 묶음 없음 ( = 줄바꿈 없음 ) wrap : 여러 줄로 묶음 wrap-reverse : wrap 의 반대방향으로 묶음
justify-content	주 축의 정렬 방법	flex-start : flex items를 시작점으로 정렬 flex-end : flex items를 끝점으로 정렬 center : flex items를 가운데 정렬 space-between : 각 flex items 사이를 균등하게 정렬 ( 끝점 고정됨 ) space-around : 각 flex items의 외부 여백을 균등하게 정렬 ( 요소 하나에 똑같은 마진을 줌 ) space-evenly : 시작점부터 간격을 줘서 전체 간격이 동일 함
align-items	교차 축의 한 줄 씩 정렬하는 방법	stretch : flex items를 교차축으로 늘림 flex-start : flex items를 각 줄의 시작점으로 정렬 flex-end : flex items를 각 줄의 끝점으로 정렬 center : flex items를 각 줄의 가운데 정렬 baseline : flex items를 각 줄의 문자 기준선에 정렬
align-content	교차 축의 여러 줄씩 정렬하는 방법	stretch : flex items를 시작점으로 정렬 flex-start : flex items를 시작점으로 정렬 flex-end : flex items를 끝점으로 정렬 center : flex items를 가운데 정렬 space-between : 각 flex items 사이를 균등하게 정렬 space-around : 각 flex items의 외부 여백을 균등하게 정렬