sharingStorage

이 글은 한 초보 개발자의 간단한 질문에서 부터 시작되었다.  헤더헤더 123123123 위 코드는 header의 fixed를 통해 상단에 고정시키고 main에 컨텐츠를 담기 위해 간단한 작업을 할 때 사용하는 코드인데 위 코드를 실행하면 우리가 의도한 바대로 작동하지 않는다. 위 코드를 실행해본 결과이다 body의 위치를 이해하기 쉽도록 green을 주었다. 분명 main에 margin-top을 주었는데 왜 형제 요소인 fixed 헤더까지 내려올까?? 문제점 1 fixed에 offset값을 넣지 않았다.너무나 당연한 답입니다.fixed는 뷰포트 기준으로 top, left, rigth, bottom에 의해 결정되는데 이를 적용하지 않았을 때 초기위치에 absolute값과 동일하게 적용..

CSS의 position 속성은 문서상에 요소를 배치하는 방법을 지정합니다. static : 모든 태그들은 default값이 static이다. 태그들은 왼쪽에서 오른쪽, 위에서 아래로 쌓인다. relative: static에서 위치를 살짝 변경하고 싶을 때 사용 top, bottom, left, right 속성을 사용해 위치 조절 가능. static일 때를 기준으로 태그들이 움직임. 같은 position이면 나중에 나온 태그가 위에 배치된다. z-index는 겹칠 때 어떤 태그가 위로 올라갈지 정한다. absolute: absolute는 position:static 속성을 가지고 있지 않은 조상을 기준으로 움직임. 만약 조상 중에 포지션이 relative, absolute, fixed인 태그가 없으면 b..