CSS3 [CSS] Position 속성 활용시, 주의하여야 할 점 1. Static & Relative - Position 속성이 정해지지 않으면, 기본적으로 지정되는 값이다. Static이란 말은 '정적인'이란 뜻으로 움직이지 않는 것을 의미한다. Relative와 비슷한 속성을 갖으며, 별다른 특성을 가지지 않는다. 2. Absolute - Absolute는 자신에게 적용된 정렬에 영향을 받지 않는다. 위치지정 역시, left/right/top/bottom 등을 활용하여 지정해주어야 한다. 또한, Absolute 포지션을 활용할 때에는 항상 상위 박스의 Position을 점검하는 습관을 갖아야한다. 왜냐하면 Position은 Static이 아닌, 부모 박스를 찾아 해당 박스 안에 속하여 위치가 지정되기 때문이다. See the Pen WNwgaLW by joonho.. Web/CSS 2020. 9. 18. [CSS] display : inline, block, inline-block 에 대해서 알아보자 웹 페이지 클론 작업을 하다보니, CSS 레이아웃에 대한 이해가 낮다는 걸 스스로 알 수 있었다. 밀접하게 관련이 있는 display에 대해 명확하게 설명하지 못하고, 그저 활용할 줄만 알고 있었기 때문이다. 각설하고, 세 요소들 간의 관계에 대해서 자세히 알아보자. 1. display란? [HTML] 인라인 요소(inline element)와 블록 요소(block element)에 대한 친절한 설명 먼저 display에 대해서 알기 전에, 인라인 요소와 블록 요소가 각각 무엇이며, 어떤 관계인지 알지 못한다면 필자가 쓴 다음 글을 참고하자. Display 속성과 각각의 요소들은 밀접한 관계를 갖고 있기 때문이다. display 속성을 통해 레이아웃에 HTML의 요소가 블록과 인라인 요소 중 어느 쪽으로.. Web/CSS 2020. 9. 11. [CSS] Position : fixed를 활용하여, 메뉴바를 화면 상단에 고정시키는 방법 서론 윅스의 고객센터 홈페이지 웹페이지들을 살펴보다 보면, 다음과 같이 페이지의 상단에 메뉴 바가 고정된 형태의 웹페이지들이 종종 있다. 이는 홈페이지를 보는 사용자에게도 분명 큰 이점을 주는 듯 하다. 스크롤을 내려도, 메뉴바가 보이기 때문에, 자신이 원하는 영역으로 빠르게 이동할 수 있기 때문이다. 어떻게 하면, 메뉴바를 고정할 수 있을까? CSS의 Position : fixed를 활용하면 됩니다. 참고로 position:fixed는 부모 요소와 관계없이 브라우저의 viewport를 기준으로 좌표 프로퍼티(top, bottom, left, right)을 사용하여 위치를 이동시킵니다. 그래서 스크롤이 되더라도 화면에서 사라지지 않고 항상 같은 곳에 위치가 고정(fixed)됩니다. 본론 fixed 속성은.. Web/CSS 2020. 9. 10. 이전 1 다음 반응형
