본문 바로가기

TiL

[CSS 레이아웃] display 프로퍼티: inline, block, inline-block 웹 페이지의 모든 요소는 사각형 박스 모양을 같습니다. display 프로퍼티를 이용하면 이 박스가 어떻게 보이게 만들지 정할 수 있습니다. 가장 대표적인 세 가지 값과 해당 속성이 적용된 요소의 특징에 대해서 알아보겠습니다. selector { display: inline; display: block; display: inlin-block; } inline element (인라인 요소) 인라인 요소는 컨텐츠의 영역만큼 공간을 차지합니다. , , 와 같은 태그들이 해당합니다. - 컨텐츠의 영역만큼 공간을 차지합니다. - 줄을 바꾸지 않고 다른 요소와 함께 한 행에 위치합니다. - 상하 padding과 margin을 줄 수 없습니다. 단, 좌우 padding과 margin은 설정할 수 있습니다. See t.. 더보기
[CSS 레이아웃] position 프로퍼티: static, relative, absolute, fixed CSS 포지션 프로퍼티는 문서 내에서 요소를 배치하는 유형을 설정합니다. 또한 top, bottom, left, right 프로퍼티와 함께 사용되는 것이 일반적입니다. position 프로퍼티 값으로는 static, relative, absolute, fixed 네 가지가 있으며 각각에 대해서 예제와 함께 알아보겠습니다. static position 프로퍼티의 기본 값입니다. 특별히 다른 값을 지정하지 않았다면 모든 요소는 기본적으로 static 값을 갖습니다. 요소들은 차례대로 왼쪽에서 오른쪽, 위에서 아래쪽으로 쌓이게 됩니다. See the Pen CSS position: static by hogni-seoul (@hogni-seoul) on CodePen. relative 기본 위치인 static .. 더보기

티스토리툴바