chapter 8-5
float된 요소의 위치가 어떻게 지정될까? 마진은 어떻게 적용되는 걸까?
float된 요소 다음에 인라인 요소가 온다면 어떻게 배치되나?
블록 요소를 부모로 갖는 인라인 요소의 마진은, 부모 요소의 마진과 충돌할까 옆에 있는 인라인 요소의 마진과 충돌할까?
자식 요소는 부모 요소의 컨텐츠 영역에 포함되나, 아니면 독립되어 있나??
인라인 요소의 자식으로 인라인 요소가 오면 안에 포함되나 그냥 옆으로 나열되나?
부모 자식 관계에서는 요소의 구조가 다르게 나타날까? (문서로 따로 정리할 것)
블록 요소가 자식으로 블록 요소를 가질 수 있나?
position: <속성값>; top: <값>; right: <값>; bottom: <값>; left: <값>;position 속성은 top, right, bottom, left 속성과 함께 사용합니다. 마진과 패딩을 할 때 많이 보았던 키워드인데, 여기서 다른 점은 margin-top처럼 붙여서 쓰는 키워드가 아니라 top이라는 독립된 속성이라는 것입니다. 이러한 4가지 속성은 무조건 position 속성과 같이 쓰이며, 기준 위치를 기준으로 각 방향으로 얼마나 떨어져 있는지를 나타냅니다. 여기서 기준위치가 무엇인가요? 이 기준을 정해주는 position의 속성값 4개가 있습니다.
position 속성이 없는데 top 속성을 쓰면?? position 속성이 없을 시 기본값은 static인데, 이 설정에서는 top right bottom left 속성을 무시합니다.
static
position 설정의 기본값입니다. CSS의 일반적인 흐름에 따라 배치된 기본값을 의미하며, top right bottom left 속성을 무시합니다. 즉, position: static이라고 명시를 하는건 코드낭비입니다.
relative
"static일 때의 위치" 를 기준으로 얼마나 움직일지를 정합니다.
absolute
"static이 아닌 가장 가까운 조상의 컨텐츠 영역"을 기준으로 얼마나 움직일지 정합니다. 조상이 모두 static이라면, body태그를 기준으로 움직입니다.
fixed
body태그를 기준으로 움직입니다.
margin과 padding은 어떻게 되나요?
position이 적용된 요소 근처에 있는 요소의 마진은 어떻게 반응할까요? 혹은, position이 적용된 요소를 자식으로 하는 요소의 padding은 어떻게 반응할까요? 만약 relative인 경우, 이러한 margin과 padding은, position이 적용되기 전 요소의 위치를 기준으로 반응합니다. absolute나 fixed인 경우, position이 적용된 요소는 문서의 흐름에서 아예 배제되어 없는 요소 취급을 받으며, 이에 따라 다른 요소들이 빈 자리를 채웁니다. 그 후, position이 적용되는 요소는 위의 기준 위치에 따라 재배치 됩니다.
즉, position으로 요소를 옮긴다고 주변 요소가 밀려나거나, 부모 요소가 패딩을 유지하려고 움직이지 않습니다. 단, absolute와 fixed의 경우 해당 요소가 없는 취급을 받으며 이 빈자리를 채우기 위해 요소들이 움직일 수는 있습니다
겹치면 어떻게 되나요?
position으로 옮겨진 요소는, position이 없는 다른 요소와 겹쳐지면 해당 요소를 가리게 됩니다. 만약 position이 있는 요소끼리 겹쳐지면, css 코드 상 아래에 있는 요소가 위에 있는 요소를 가리게 됩니다.
Last updated