CSS(2)
오늘 배운 것
1. CSS (Cascading Style Sheets) 2
display
- 웹페이지의 레이아웃을 결정하는 핵심 속성이다.
- 주요 속성 값:
block: 항상 새 줄에서 시작하며, 너비와 높이를 가질 수 있다. 지정하지 않으면 너비는 100%가 된다. div, p, h1~h6 태그 등이 기본값이다.inline: 줄바꿈 없이 다른 요소와 같은 줄에 배치된다. 너비와 높이를 적용할 수 없으며, 콘텐츠의 크기만큼만 공간을 차지한다. span, a 태그 등이 기본값이다.inline-block: inline처럼 줄바꿈이 없지만, block처럼 너비와 높이를 지정할 수 있다. button, input 태그 등이 기본값이다.none: 요소를 렌더링하지 않아 화면에서 완전히 사라지게 한다. 차지하던 공간도 없어진다.
visibility: hidden과의 차이점: visibility: hidden은 요소를 보이지 않게만 할 뿐, 원래 차지하던 공간은 그대로 유지한다.
- Flexbox: 1차원 레이아웃을 위한 모델로, 요소들을 효율적으로 배치, 정렬, 분산시킬 수 있다.
- 부모 요소에
display: flex;를 적용하여 자식 아이템들을 정렬한다.
- 주요 축(Main Axis) 과 교차 축(Cross Axis) 의 개념이 중요하다.
- Flex Container 속성 (부모에게 적용):
flex-direction: 아이템이 배치될 주축의 방향을 설정한다 (row, column 등).justify-content: 주축 방향의 정렬 방식을 설정한다 (flex-start, center, space-between 등).align-items: 교차 축 방향의 정렬 방식을 설정한다 (stretch, center 등).flex-wrap: 아이템들이 한 줄에 맞지 않을 때 줄바꿈 여부를 설정한다.align-content: 여러 줄로 배치되었을 때의 교차 축 정렬을 다룬다.gap: 아이템 사이의 간격을 설정한다.
- Flex Item 속성 (자식에게 적용):
align-self: 개별 아이템의 교차 축 정렬을 따로 설정한다.flex-grow: 컨테이너에 여백이 있을 때 아이템이 늘어나는 비율을 설정한다.flex-shrink: 컨테이너 공간이 부족할 때 아이템이 줄어드는 비율을 설정한다.order: 아이템의 배치 순서를 지정한다.
float & clear
- 본래 이미지를 띄워 주변에 텍스트를 배치하기 위한 속성이었으나, 과거에는 레이아웃 구성에도 사용되었다.
float 속성은 요소를 일반적인 문서 흐름에서 벗어나게 하여 좌우로 띄운다.clear 속성은 float의 영향을 받지 않고, 띄워진 요소 아래로 배치되도록 한다.- 최근에는 레이아웃 구성 시
flex나 grid를 사용하는 것이 권장된다.
position
- 요소를 문서 내에 어떻게 배치할지 지정하는 속성이다.
- 주요 속성 값:
static: 기본값으로, 일반적인 문서 흐름에 따라 배치된다. top, left 등의 속성이 적용되지 않는다.relative: 자신의 원래 위치(static 위치)를 기준으로 top, left 등을 사용해 상대적으로 이동한다. 이동 후에도 원래 있던 공간은 그대로 차지한다.absolute: static이 아닌 가장 가까운 조상 요소를 기준으로 위치가 결정된다. 만약 조상이 없으면 body 태그를 기준으로 한다. 문서 흐름에서 제거되어 다른 요소에 영향을 주지 않는다.fixed: 뷰포트(viewport)를 기준으로 위치가 고정되어 스크롤을 해도 움직이지 않는다.
z-index: position 속성이 있는 요소들의 쌓임 순서를 결정한다. 숫자가 높을수록 위에 배치된다.
반응형 웹 (Responsive Web)
- 웹에 접속하는 디바이스의 종류(화면 크기)에 따라 페이지의 레이아웃이 자동으로 재조정되는 웹 디자인 기법이다.
- 미디어 쿼리(Media Query):
@media 규칙을 사용하여 특정 조건(예: 화면 너비)에 따라 다른 CSS 스타일을 적용할 수 있다.min-width, max-width 등의 조건을 사용하여 중단점(breakpoint)을 설정하고, 각 중단점마다 다른 레이아웃을 구성한다.- 모바일 우선(Mobile-first) 접근법: 작은 화면(모바일)의 스타일을 기본으로 작성하고, 미디어 쿼리를 사용해 화면이 커짐에 따라 스타일을 추가하거나 재정의하는 방식이 일반적이다.
내일 할 일
- 알고리즘, 정처기 필기 공부
