CSS 04

Position : box의 위치를 지정할 때 사용하는 속성

static(기본) : box요소가 문서 흐름에 따라 배치(순차적)

relative : box요소가 문서 흐름에 따라 배치(순차적). 상위 box요소를 기준으로 위치 결정가능(top, left, right, bottom)

absolute : 상위 box요소를 기준으로 위치 결정 가능, 상위 box요소가 position설정이 되어 있어야 가능 만약 상위 box요소의 position이 설정되어 있지 않는 경우는 뷰포트를 기준으로 위치 조정 가능

fixed : 뷰포트를 기준으로 배치, 스크롤을 해도 항상 같은 위치 고정

sticky : 스크롤 영역을 기준으로 배치, 스크롤 위치를 따라가다가 일정위치를 넘어서면 고정

위의 코드 기준

relative 결과

absolute 결과

fixed 결과

sticky 결과

z-index : position이 설정된 형제요소 간의 z축의 우선순위를 지정할 때 사용

표시형태 : display-flex

수평배치형태 : center right left space-between space-evenly space-around

수직배치형태 : center flex-end flex-start

flex-wrap:no-wrap 기본값, 한 라인 안에 모든 아이템 포함

flex-wrap:wrap item의 크기가 부모의 width를 초과할 때 다음 라인으로 이동

align-content: stretch : 교차 축 정렬방식 flex-wrap:wrap으로 설정된 이후에 사용 가능

flex-grow : 0보다 큰 값을 세팅하면 Flexible 박스로 변하면서 남은 여백을 메우는 속성

Sementic 태그 : 웹 문서를 의미 있는 블록으로 나누어 구조를 만드는 데 사용되는 태그

종류

<header> : 헤더섹션

<nav> : 네비게이션 링크 섹션

<section> : main안의 특정 부분 지정

<article> : 문서 본문 섹션

<aside> : 문서의 사이드바 영역

<footer> : 푸터 영역

<main> : 문서의 주요 콘텐츠 영역

두두더지