▶ background-color - 요소의 배경 색상을 지정. - 개별 속성. [속성 값] - 색상: 값을 입력해 요소의 배경으로 해당 색상 지정. - transparent: 투명하다는 의미. 기본 값.

▶ background - 요소의 배경을 설정. - background-color, background-image, background-repeat, background-position, background-attachment의 개별 속성들의 집합인 단축 속성. [background의 개별 속성] - background-color: 배경 색상 지정. 기본 값: transparent. - background-image: 하나 이상의 배경 이미지. 기본 값: none. - background-repeat: 배경 이미지의 반복. 기본 값: repeat. - background-position: 배경 이미지 위치. 기본값 0 0. - background-attachment: 배경 이미지의 스크롤 여부(특성). ..

▶ position의 display 수정 - position: absolute, position: fixed이 적용된 요소는 display 속성의 값이 대부분 block으로 수정됨. - cf. float 속성과 유사. float의 display 수정: developing-move.tistory.com/124 [CSS] float의 display 수정 ▶ CSS float 참조: developing-move.tistory.com/123 - float 속성이 추가된 요소는 display 속성의 값이 대부분의 경우 block으로 수정됨. - 의 전형적인 inline 속성. - 에 display: block; 적용 시 결과 화.. developing-move.tistory.com - position: stati..

▶ position과 요소의 쌓임 순서 - stack order? 요소가 쌓여 있는 순서를 통해 어떤 요소가 사용자와 더 가깝게 있는지(더 위에 쌓이는지)를 결정. z축. - z축: 우리의 시선과 동일한 축을 가짐. 눈에 보이지는 않지만 무언가가 더 앞에 있거나 뒤에 있는 개념. [요소의 쌓임 순서] 1. static을 제외한 position 속성의 값이 있을 경우 위에 쌓임. 값은 무관. - relative, absolute, fixed, sticky 중 값에 상관 없이 특정 값이 있으면 일단 위에 쌓이는 것. 2. position이 모두 존재한다면 z-index 속성의 숫자 값이 높을수록 위에 쌓임. 3. position 속성의 값이 있고 z-index 속성의 숫자 값이 같다면 HTML의 마지막 코드..

▶ position: sticky - 스크롤 영역을 기준으로 배치 - top/left/right/bottom 중 특정한 값이 하나 이상 존재해야 하고 그렇게 부여된 값이 스크롤 영역에 맞닿았을 경우에만 동작함. - Internet Explorer 지원 불가. [사용 예시] - position: sticky가 적용된 타이틀 부분이 스크롤을 내릴 때 화면 상단에 고정된 채 같이 내려오다 section이 끝나면 멈추고, 이후 section 영역이 달라지면 해당 section의 타이틀이 스크롤을 따라 내려옴. - 이전에는 javascript를 통해 상당히 어렵게 구현되던 기능이었으나 sticky 사용 시 이와 같이 구현 가능. - 스크롤되는 영역을 기준으로 배치하기 때문에 viewport 전체에 고정하는 개념처..

▶ position: fixed; - 브라우저(viewport)를 기준으로 배치됨. - viewport에 기반한 위치 배치는 position: absolute를 통해서도 할 수 있음. - 이전 글 position: absolute 참조 - developing-move.tistory.com/128 [CSS] position: absolute ▶ position: absolute; - 부모 요소를 기준으로 배치. - 여기서의 부모요소는 기본적인 HTML의 구조적인 부모가 아닌 위치상의 부모 요소를 의미. - position: absolute; 지정 시 3번 박스는 사라짐. - 이.. developing-move.tistory.com - position: absolute는 결과적으로 부모 요소를 기준으로 함...