CSS
Layout
float
- 이미지와 텍스트 배치
- block 요소가 컨텐츠 크기에 맞게 줄어든 것 처럼 보여 좌우로 배치할 수 있음
- float 적용을 없애려면 clear 속성 부여
display
- block : 요소의 크기를 부모의 크기대로 맞춤
- inline-block : 요소의 크기를 내용물의 크기대로 맞춤 + 크기 조절 가능
- none : 숨기기
display : grid
- 표 형태 + 위치 및 크기 명시
- 사용 속성
- grid-column : 열 기준 위치
- grid-row : 행 기준 위치
- grid-gap : 요소 간격
display : flex
- 가변 배치 형태, 유연한 반응형 레이아웃 지원
- 브라우저 크기에 맞춰 바뀌어 요즘 많이 사용
- justify-content : 가로 정렬, 주 축 방향에서 아이템을 정렬
- align-items : 세로 정렬, 교차 축 방향에서 아이템을 정렬
position
- 요소가 배치되는 방식
- static : 기본 값 흐름대로 배치
- relative : static 배치 방식에 위치 이동 가능
- relative 적용하면 원래의 위치에 자리를 인식
- absolute : HTML 문서 기준 절대 좌표에 배치
- absolute 적용하면 원래의 위치에서 벗어나 다음 요소가 앞으로 이동
- fixed : 사용자 브라우저 기준 절대 좌표에 배치
- sticky : static의 배치 방식에 추가로 fixed와 같이 위치 고정
배우는중입니다.