목차
포지셔닝 레이아웃
position은 요소 박스의 배치 방식을 지정하는 속성이다. 기본 값은 static이다.
position이 가질 수 있는 속성 값은 다음과 같다.
- static: normal flow(일반적인 흐름)에 따른 배치 방식. 마크업 순서대로 선형화되어 배치된다.
- relative: 원래 있던 영역을 기준으로 움직이며 layer 형태(static을 제외하고, 먼저 선언한 게 밑으로 깔린다. 배경 이미지는 먼저 선언한 게 위로 쌓인다.)로 겹친다. 주변 상자 위치에 영향을 주지 않는다. (그림자를 만들 때 사용할 수 있다.)
- absolute: 원래 있던 영역을 기준으로 움직이며 layer 형태로 겹친다. 주변 상자 위치에 영향을 준다. 컨테이닝 블록을 기준으로 배치된다. static 값을 갖고 있는 조상은 기준이 되지 않고, static 이외의 값을 가진 가장 가까운 조상을 기준으로 삼는다.
- fixed: 화면에 영역을 차지하지 않으면서 layer 형태로 겹친다. 주변 상자 위치에 영향을 준다. BFC(Block Formatting Context)가 된다. 뷰포트 기준으로 위치가 고정되고, 스크롤을 내려도 같은 위치에 떠있다.
- sticky: 속성이 지정된 요소의 부모 요소 박스에 보일 때는 원래 위치에 있다가, 스크롤을 내리다가 원래 위치를 벗어날 때 지정한 위치에 고정되어 보인다. 스티키 스크롤을 만들 때 사용한다.
플로팅 레이아웃
float는 일반적인 흐름에서 벗어나서 부모 요소 라인박스의 왼쪽이나 오른쪽에 배치하는 속성이다. 자기 다음에 오는 상자 요소 배치에 영향을 준다.
워드 프로세서와 비교하자면, 이미지를 추가했을 때 '텍스트 줄바꿈' 설정을 한 것과 같은 효과를 준다. 단, 웹에서는 왼쪽이나 오른쪽에만 배치할 수 있다.
float는 이미지를 선형으로 배치하기 위해 만든 속성이 아니지만, 맥락에 따라 사용할 수도 있다.
clear 속성은 float로 받는 영향을 해제한다. 방향에 따라 속성 값은 left, right, both를 갖는다.
부모 요소에게 display: flow-root;를 할당하면 부모 요소가 float 속성을 가진 자식까지 height에 포함한다.
CSS 선택자
- :nth-child(n) - 부모 안에서 전체 자식 중 n번째 자식을 선택한다.
- :nth-of-type(n) - 같은 태그 중에서 n번째를 선택한다.
Mastering the :nth-child | CSS3 pseudo classes and :nth-child ranges
nth-child(3n+1):nth-child(even) li:nth-child(3n+1):nth-child(even) span { background-color: #298EB2; box-shadow: inset -3px -3px 10px rgba( 0, 0, 0, .4), 0 0 10px black; } Using this :nth-child(3n+1) would normally highlight children 1, 4, 7 & 10, but by u
nthmaster.ru
CSS 스타일링
- border-radius: 가장자리를 둥글게 만드는 속성이다. 하나의 값을 할당하면 전체 모서리에 적용되고, 왼쪽 위부터 시계방향으로 4개의 값을 줄 수 있다. 주로 px 값을 주지만, 경우에 따라 % 값을 주기도 한다. 정사각형에 50%를 값으로 할당하면 원이 된다.
- linear-gradient(): 그래디언트 효과를 주는 함수다. 색깔 값으로 줄 수 있다. 함수는 각도와 색깔 값을 받는다.
예) linear-gradient(180deg, #ccc 0%, #eee 100%); - text-align: 텍스트를 정렬하는 속성이다. 속성 값으로 center를 할당하면 가운데로 정렬한다.
- auto margin 기법: 요소의 width가 정해져있다면, 부모 요소의 중간에 위치하고 싶을 때 양 옆으로 동일한 margin을 줘서 가운데로 배치한다. margin-inline: auto;
오늘 하루를 돌아보며
오늘은 배치에 영향을 끼치는 속성들을 배워서 실습 시간을 많이 가졌다. 디자인된 페이지를 보고 어떻게 마크업하고 어떻게 스타일링할지 고민하고 직접 시도해봤다. 중요한 거는 전체를 한꺼번에 만들려고 하지 말고, 부품별로 나눠서 시작해야 한다는 거다. 우선은 반복되는 컴포넌트(부품)를 만들고, 조립해서 전체를 만든다. 처음부터 여러개를 만들어서 한꺼번에 스타일링하려고 했을 때는 힘들었는데, 컴포넌트로 나눠서 만드니까 훨씬 수월해졌다.
fall-back도 중요하다! 세상에는 다양한 디바이스가 있고, 다양한 브라우저가 있다. 서로 지원하는 기능들이 다르기 때문에 만약 지원하지 않는다면을 고민하면서 대체할 수 있는 방법들을 고민하고 더해야 한다. 예를 들어, gradient 기능을 지원하지 않을 수도 있으니 배경 색깔을 주고, 이미지 중에 지원하지 않는 파일 형식이 있을 수 있으니까 다양한 형식을 준비해야 한다.
좋은 스타일링을 위해서는 좋은 마크업이 필요하다. 좋은 마크업을 하기 위해서는 더 많이 보고, 더 많이 고민하고, 더 많이 시도해야 한다. 습(習)의 시간!!
