목록2023/12/17 (2)
Minwoo Dev.
position : absolute absolute는 '절대적인' 이라는 뜻을 가지고 있다. absolute 속성값은 position : static이 아닌 조상을 찾아 그 조상을 기준으로 움직인다. 조상(부모들) 값들 중에 position 속성값이 기본이 아닌 조상이 없다면 제일 상위 태그인 를 기준으로 위치가 정해진다. 예시를 보자. box1 box2 mini box3 위 코드에서는 position 속성값을 변경한 부모가 없다. 따라서 mini는 가장 상위태그인 태그를 기준으로 정해진 위치만큼 이동할 것이다. 결과 position : absolute를 사용하면 부모자식관계에서 벗어난다. 따라서 적용된 요소는 독립적으로 바뀌게 된다. 결론적으로 부모 요소에서의 공간이 사라지고, 콘텐트의 크기에 맞는 만..
CSS에서 콘텐츠의 위치를 지정해주는 요소에는 position이 있다. 그 중에서 relative, static에 대하여 설명하겠다 position : static 따로 지정해주지 않은 콘텐츠라면 기본적으로 position : static으로 설정된다. 기본값으로 설정되어 있기 때문에 따로 적어주지 않아도 된다. static(정적)인 상태를 의미한다. position : relative 보통 콘텐츠의 위치를 이동시키기 위해 많이 사용한다. 원래 위치에 대해 상대적으로 움직한다는 뜻이다. box1 box2 mini box3 위 코드에서 mini 콘텐츠를 position:relative 를 사용하여 위치를 이동시켰다. left:100px의 의미는 포지셔닝을 relative로 바꾸었으니 왼쪽을 기준으로 100..