Box model이란?
요소 - padding, border, margin, content
크기 제어 속성 - 폭: width, 높이: height
- content: 텍스트나 이미지가 들어있는 박스의 실질적인 내용 부분
- padding: 콘텐츠와 테두리 사이의 여백 (내부 여백 영역)
- border: 내용과 패딩 주변을 감싸는 테두리
- margin: 테두리와 테두리 사이의 간격 (바깥 여백 영역)
보더를 기준으로 안쪽 영역이 padding / 바깥쪽이 margin
(이미지 출처: 구글/칸아카데미)
border는 style과 color, width, raadius 속성을 설정할 수 있음.
레이아웃
Grid
가로, 세로의 격자로 나누는 것 (선)
position
박스 구성요소들을 배치하기 위한 속성
- static: 기본 값
- relative: 원래 있던 자리를 기준으로 top, right, bottom, left 속성을 이용해 원하는 위치 지정 / 요소를 일반적인 문서 흐름에 따라 배치.
- absolute: 가장 가까운 상위 요소 중 속성이 relative인 요소를 기준.
따라서 absolute를 사용하는 경우 콘텐츠 박스를 감싸는 컨테이너를 만들고 position을 relative로 지정해놓고 사용.
상위 요소가 없다면 브라우저 화면의 좌측상단을 기준으로 설정.
요소를 일반적인 문서 흐름에서 제거, 어떠한 영역에 구애받지 않고 왕따처럼 혼자 따로 노는 친구.- fixed: 말 그대로 화면에 고정
- sticky: 스크롤을 내려도 화면에 계속 따라다니는 녀석
sticky는 시작과 끝을 지정할 수 있는 느낌이라면 fixed는 계속 화면에 고정되어 있는 있음.
- z-index
3차원적으로 생각하였을 때의 위치
ex) 화면으로 보았을 때 겹쳐져 있는 값 중 1이 맨 뒤에 위치, 2가 1위에, 3이 제일 앞에 배치되는 것처럼 보임.
position의 개념이 제대로 안 선채로 클론을 만들다가 정말 애를 먹었다😂
덕분에 relative와 absolute에 대해서 어느정도 알게 되었지만, 아직 완벽하게 이용하지는 못하는 것 같아서 더 많이 써보고 익혀야겠다.
display
- none
- block: 요소를 나란히 배치 못함 / 한 줄을 다 차지
- inline: 콘텐츠의 크기 만큼만 자리를 차지 / 다른 콘첸츠와 나란히 배치 가능
- inline-block: block과 inline의 중간 형태, inline처럼 같은 줄에 여러 개를 배치할 수 있으면서도 block 특징을 지님.
