본문 바로가기

CSS2

CSS | 쌓임맥락과 블록서식맥락 영어를 그대로 번역한 단어라 조금 어색한 표현이다. 쌓임맥락과 블록서식맥락. HTML요소와 CSS렌더링은 순서대로 쌓임 맥락이 생성되는데 이러한 쌓임 맥락은 어디에서나, 다음 조건을 만족하는 요소가 생성한다. 문서의 루트 요소. () position이 absolute 또는 relative이고, z-index가 auto가 아닌 요소. position이 fixed 또는 sticky인 요소. (sticky는 모든 모바일 브라우저에서는 해당하지만 구형 데스크톱 브라우저에서는 해당하지 않음) 플렉스(flexbox) 컨테이너의 자식 중 z-index가 auto가 아닌 요소. 그리드(grid) 컨테이너의 자식 중 z-index가 auto가 아닌 요소. opacity가 1보다 작은 요소. (불투명도 명세 참고) mix.. 2020. 2. 11.
CSS | position 절대위치, 상대위치 position은 요소의 위치를 잡아줄 때 사용하는 속성이다. position 속성은 상속되지 않는다. position 속성은 다음의 설정값을 갖는다. static relative fixed absolute sticky inherit initial static은 아무것도 지정하지 않으면 사용되는 기본값이다. 그냥 기본값이라고 생각하면 된다. relative는 이름에서 알 수 있듯이 상대값이다. 기본값인 위치를 기준으로 세로축과 가로축 거리를 지정한다. absolute는 절대 위치를 지정한다. 이 속성은 요소컨테이닝 블록(위치의 기준점이 되는 조상 요소) 모서리로부터의 거리를 지정한다. 요소가 바깥 여백을 가진다면 거리에 더합니다. 절대 위치 지정 요소는 새로운 블록 서식 맥락을 생성한다. absolute.. 2020. 2. 11.