-
[CSS] position: sticky - 화면 고정인 네비게이션바front-end/css 2021. 10. 15. 14:06
sticky vs fixed는 무엇인가? 스크롤할 때 웹 내부 요소를 유지하도록 도와주는 CSS 속성이다. position: sticky position: fixed 그렇다면 이 두 개의 차이는 무엇일까? position: fixed position: fixed는 viewport에 고정된 고정 위치에 위치하게 된다. 쉽게 말해 개발자가 지정한 위치에 있다. 개발자는 위쪽, 아래쪽, 왼쪽, 오른쪽을 지정할 수 있다. .test { position:fixed; top : 0; } position: stickey position: stickey는 오프셋 (top:10px)을 정의하기 전까지, 저 고정된 위치가 아닌 부모의 위치에 고정되어 동작한다. 부모의 위치가 스크롤에서 떠나가 되면 부모 안에서 유지하게 된..
-
[CSS] display 속성이해하기 (block, inline, none)front-end/css 2019. 10. 28. 16:47
목표 display 속성중 하나인 inline 속성에 대해 이해한다. inline속성과 block 속성의 차이를 이해한다. display 속성이란? display는 화면에 보여주다는 의미한다. display 속성은 어떻게 화면에 보여줄지를 결정한다. display 속성중 none은 화면에 보여주지 않는다. display inline 속성이란? display의 속성은 inline, block, none, inline-block 등 여러가지 존재 inline 속성은 display의 default 값 ( display을 지정하지 않으면 inline 값을 가진다. ) inline 속성을 가진 tag로는 , , inline 속성은 줄 속에 넣는 요소. 즉 줄바꿈되지 않는다. 한줄에 여러개가 배치 가능하다. inl..