📖Position
position을 이용해서 요소의 위치를 지정할 수 있다.
- static : 정적 위치 지정 방식 (기본값)
- relative : 상대 위치 지정 방식
- absoslute : 절대 위치 지정 방식
- fixed : 고정 위치 지정 방식
relative
자기 자신이 있던 자리를 기준으로 위치를 잡는다.
absolute
부모의 position이 static이 아닌 가장 가까운 부모 요소를 기준으로 배치
적합한 position을 가진 부모를 만날 때까지 계속 타고 올라간다. 없으면 뷰포트를 기준으로 배치한다.
fixed
뷰포트(브라우저)를 기준으로 배치
ex- 헤더 : 스크롤을 하더라도 위치가 변하지 않는다.
📖Stack order(요소 쌓임 순서)
어떤 요소가 사용자와 더 가깝게 있는지(위에 쌓이는지) 결정
- 요소에 position 속성의 값이 있는 경우 위에 쌓임(기본값 static 제외)
- 1번 조건이 같은 경우, z-index 속성의 숫자 값이 높을 수록 위에 쌓임
- 1번과 2번 조건까지 같은 경우, HTML의 다음 구조일 수록 위에 쌓임
🔍z-index
요소의 쌓임 정도를 지정
z-index를 사용하려면 position을 줘야한다.
auto : 부모 요소와 동일한 쌓임 정도
숫자 : 숫자가 높을 수록 위에 쌓임
position 속성의 값이 absolute, fixed가 지정되면 display 속성이 block으로 변경된다.
📖배경
background-color
요소의 배경 색상
transparent : 투명함
색상 : 지정 가능한 색상
background-image
요소의 배경 이미지 삽입
none : 이미지 없음
url("경로") : 이미지 경로
background-repeat
요소의 배경 이미지 반복
repeat : 이미지를 수직, 수평 반복
repeat-x : 이미지를 수평 반복
repeat-y : 이미지를 수직 반복
no-repeat : 반복 없음
background-position
요소의 배경 이미지 위치
방향 : top, bottom, left, right, center 방향
background-size
cover : 비율을 유지, 요소의 더 넓은 너비에 맞춤
contain : 비율을 유지, 요소의 더 짧은 너비에 맞춤
background-attachment
요소의 배경 이미지 스크롤 특성
scroll : 이미지가 요소를 따라서 같이 스크롤
fixed : 이미지가 뷰포트에 고정, 스크롤x
📖Display
📌Flex
블럭요소 자식들을 가로로 정렬하고 싶을 때 inline block을 사용할 수도 있지만, 부모 display에 flex를 주면 자식 요소들이 전부 inline block으로 디스플레이 요소가 바뀌게 된다.
부모에게 flex를 주면 원래 세로로 일렬로 되어있던 블럭 요소들이 수평으로 정렬된다.
flex는 부모에게 줘야 한다.
flex-direction
주 축을 설정
flex-direction 역시 부모에게 줘야한다.
row : 행의 축을 왼쪽에서 오른쪽으로 // 주축-> 가로, 교차축-> 세로
row-reverse : 행의 축을 오른쪽에서 왼쪽으로
column : 열의 축을 위에서 아래로 // 주축-> 세로, 교차축-> 가로
column-reverse : 열의 축을 아래에서 위로
flex-wrap
Flex Items 묶음(줄 바꿈) 여부
nowrap : 묶음(줄 바꿈) 없음
wrap : 여러 줄로 묶음
justify-content
주 축의 정렬 방법
flex-start : Flex Items를 시작점으로 정렬 (기본 값)
flex-end : Flex Items를 끝점으로 정렬
center : Flex Items를 가운데 정렬
space-between : 각 Flex Item 사이를 균등하게 정렬
space-around : 각 Flex Item의 외부 여백을 균등하게 정렬
space-evenly : 양끝 여백과 사이사이 여백을 모두 동일하게 정렬
align-items
교차 축의 한 줄 정렬 방법
stretch : Flex Items를 교차 축으로 늘림
flex-start : Flex Items를 각 줄의 시작점으로 정렬
flex-end : Flex Items를 각 줄의 끝점으로 정렬
center : Flex Items를 각 줄의 가운데 정렬
align-content
교차 축의 여러 줄 정렬 방법
flex가 wrap일 경우 묶어서 정렬한다.
stretch : Flex Items를 시작점으로 정렬
flex-start : Flex Items를 시작점으로정렬
flex-end : Flex Items를 끝점으로 정렬
center : Flex Items를 가운데 정렬
🖇결론
이번에 배운 내용이 지금껏 배운 내용 통틀어서 가장 복잡한 것 같다 실습한 것들도 정리해야 할 내용이 매우 많은데 언제 정리한담 하하ㅏ 한 번에 묶어서 어렵거나 헷갈렸던 부분들을 1주차 내용으로 정리하려고 한다. 아무튼 일주일간 열심히 달린 것 같고 다음 일주일도 파이팅..!
