김코드의 웹디자인 세상

4. fixed fixed는 뷰포트(브라우저)를 기준으로 배치하는 배치 요소이다, 전에는 부모 요소에 static의 요소를 작성하여 자식 요소가 자신의 부모 요소를 찾다가 마지막인 뷰포트로 설정이 되는 방법이었다면 fixed는 아예 배치기준을 선언하는 배치 요소라고 할 수 있다. 그럼 이번에도 우리의 자식 2 요소를 사용하여 fixed를 설명해보겠다 .view{ background-color: royalblue; width: 500px; height: 300px; position: relative; } .container{ background-color: tomato; width: 300px; height: 250px; position: relative; } .container .item{ backgro..

2. relative relative의 배치 요소는 자기 자신을 기준으로 하는 배치 요소이다. 부모 요소가 지정되어 있지 않는다면 자기 자신을 기준으로 입력된 속성 값으로 이동한다. 여기 그림에 자식 요소 1,2,3이 있다. 만약 자식 2 요소를 (top: 30px; left:30px;)로 이동하려면 어떻게 해야 할까? .container{ background-color: tomato; width: 300px; height: 250px; } .container .item{ background-color: yellow; border: 4px dashed blue; } .container .item:nth-child(1){ width: 100px; height: 100px; } .container .item..

css의 position에는 4가지의 요소가 있다. (sticy 다른 개념으로 이해되기 때문에 제외) 각각의 4가지 요소에는 속성으로 top, bottom, left, right, z-index를 사용할 수 있고 음수를 사용하여 요소의 각 방향별 거리를 지정할 수 있다! 그러면 이제 각각의 속성에 대해서 알아보겠다. 1. static static 은 기준이 없는 상태이다. 그렇기 때문에 작성했을 때 기본으로 지정되는 기본값으로 생각하면 된다. 그러면 이 배치 요소는 사용하지 않는 걸까? 아니다! 자식 요소가 부모 요소가 아닌 부모의 부모(조상 요소)를 기준으로 잡을 때는 사용하게 된다. 위 그림은 자식 요소 1,2,3과 그리고 부모 요소, 조상 요소가 보인다. 만약 자식 2 가 부모의 조상 요소를 기준으..