+)프로젝트 홈페이지 주제 선정
실습7 복습+코드 이해
positive
static: 정적 위치 지정 방식 (default)relative: 자신의 위치를 기준으로 배치absolute: 위치 상 부모 요소를 기준으로 배치
부모가 무조건 relative여야함
부모 요소가 없을 시 부모요소가 있을 때까지, 뷰포트까지 올라감fixed: 뷰포트(브라우저)를 기준으로 배치
++ 스크롤을 내려도 브라우저에서 고정되어있는 점이 absolute와 다름
++ position이 absolute, fixed가 지정된 요소는 display속성이 block으로 변경됨
요소 쌓임 순서
z-index
요소의 쌓임 정도를 지정
기본적으로 body에서 나중에 적은 코드가 맨 위로 올라오기 때문에 처음에 적은 요소에 z-index를 주면 올라오게됨
position이 static인 블록에는 줄 수 없음
배경
background-color
transparent: 투명함색상코드: 지정가능한 색상linear-gradient: 그라데이션 컬러를 배경에 지정
background-image
url()로 이미지를 넣을 수 있음
이미지가 반복하는 게 기본
background-repeat: 이미지 반복설정
(no-repeat,repeat-x/y..)background-position: 위치 지정
(px, center..로 가능)background-size: 배경 이미지 크기 조절
(cover: 더 넓은 너비에 맞춰짐/contain: 더 짧은 너비에 맞춰짐)
background-attachment
배경이미지 스크롤 특성
scroll: 이미지가 요소를 따라 스크롤fixed: 이미지가 뷰포트에 고정, 스크롤Xlocal: 요소 내 스크롤시 이미지가 같이 스크롤됨 (내가 스크롤을 내리면 이미지도 같이 움직임)
Display
flex : 부모한테 주는 속성으로 수평정렬을 하게됨
flex-direction
주 축을 설정함
row: 행 축 (좌=>우)row-reverse:행 축 (우=>좌)column: 열 축 (위=>아래)column-reverse: 열 축 (아래=>위)
flex-wrap
flex items 묶음 (줄 바꿈) 여부
no-wrap: 묶음(줄 바꿈)없음wrap: 여러 줄로 묶음
justify-content
주 축의 정렬 방법
flex-start: flex items 를 시작점으로 정렬flex-end: flex items 를 끝점으로 정렬center: flex items 를 가운데 정렬
align-items
교차 축의 한 줄 정렬 방법
stretch: 교차축으로 늘림flex-start: flex items 를 각 줄의 시작점으로 정렬flex-end: flex items 를 각 줄의 끝점으로 정렬center: flex items 를 각 줄의 가운데 정렬
align-contents
교차 축의 여러 줄 정렬 방법
stretch: 교차축으로 늘림flex-start: flex items 를 시작점으로 정렬flex-end: flex items 를 끝점으로 정렬center: flex items 를 가운데 정렬
++ - flex-flow: flex-direction+flex-wrap
order: flex 요소들에서 순서를 정렬
적은 값이 앞으로 옴align-self: align을 나 자신만 줌
⋆｡˚☁｡⋆｡˚☾˚｡⋆