-
positin 속성이란 무엇입니까?
태그들의 위치를 결정하는 css 속성을 의미합니다. -
position 속성을 왜 사용합니까?
명확한 위치 정의를 위해서 position 속성을 사용합니다. -
position 속성에는 어떠한 것들이 있습니까?
static,relative,fixed,absolute,sticky이 있습니다. -
static이란 무엇입니까?
아무 위치도 적용되어 있지 않은 상태이며 html 상에 구현된 순서대로 나타납니다. 기본적으로 아무 position도 적용되어 있지 않다면 position:static 상태라고 이야기할 수 있습니다. -
relative란 무엇입니까?
static이었을 때 배치되는 위치를 기준으로 상대적 위치를 지정할 수 있는 상태라고 이야기할 수 있습니다. 다른 요소의 위치에 영향을 주지 않기 때문에 겹칠 가능성이 높아 다른 요소들과의 고려가 필요합니다.
-
fixed란 무엇입니까?
브라우저 화면의 상대 위치를 기준으로 이동하지 않습니다. 쉽게 말해 웹보다 앱에서 많이 구현되어 있다고도 생각할 수 있으며 메뉴바를 예로 들기에 용이합니다. fixed를 이용하면 다른 요소를 무시하면서 고정되기 때문에 body에 padding-top을 줘서 상단 부분을 비워주는 방식을 주로 사용한다고 합니다. -
absolute란 무엇입니까?
absoulte도 위치를 나타내기 위한 것은 맞으나 relative와 함께 쓰여 특정 위치에 종속시킬 수 있습니다. relative와 함께 쓰이지 않는 다면 기본적으로 브라우저를 기준으로 0,0에서 시작되어 종속됩니다. -
sticky란 무엇입니까?
static과 fixed 속성의 특징을 모두 가지고 있는 position 입니다. 기준 위치가 필요하기 때문에 top, bottom, left, right 속성 중 하나는 반드시 필요합니다. IE는 지원하지 않는다고 하며 웬만한 구버전에서는 지원하지 않습니다. -
뷰포트가 무엇입니까?
레이아웃 관련한 공부를 하면 뷰포트를 기준으로 라고 하는 말이 찾아보니깐 많이 발견되었습니다. 뷰포트란 브라우저에서 보이는 부분입니다. 페이지 배율이 조정되어 화면에 보이는 것을 의미한다고 합니다.
inline, inline-block, block 에 대해서?
모든 태그는 인라인 혹은 블록 태그로 나뉩니다. display:inline, display:block처럼 표현됩니다.
-
inline이란 무엇입니까?
새로운 라인에서 시작하지 않고 이어서 보여주는 것을 의미합니다.width와 height 속성 지정 및 margin과 padding 속성의 상하 간격 지정이 불가능합니다. -
block이란 무엇입니까?
화면에서 줄글이 내려가는 것과는 상관없이 하나의 구역을 나타내는 것을 의미합니다. width와 height 속성 지정 및 margin과 padding 속성의 상하 간격 지정이 가능합니다. -
display 속성을 변경할 수 있습니다.
display가 기본적으로 태그마다 고정되어 있지만 display를 다시 지정함으로써 속성을 변경할 수 있습니다. -
inline-block이란 무엇입니까?
기본적으로 inline 엘리먼트처럼 전후 줄바꿈 없이 한 줄에 다른 엘리먼트들과 나란히 배치되지만 width와 height 속성 지정 및 margin과 padding 속성의 상하 간격 지정이 가능합니다.
