Viewport란, 웹 페이지를 볼 때 사용자가 보는 영역을 말합니다. 보통 모니터, 태블릿, 스마트폰과 같은 기기에서 브라우저를 실행하면 웹 페이지가 보여지는데, 이때 브라우저는 화면 전체를 사용하는 것이 아니라, 뷰포트 크기에 맞게 웹 페이지를 조정하여 보여줍니다. 윈도우에서 브라우저 창의 크기를 조절하면 뷰포트의 크기도 함께 변경됩니다. Viewport는 브라우저 창에서 실제로 컨텐츠를 표시하는 영역을 말합니다. 브라우저 창의 크기가 변경되면 뷰포트도 그에 맞게 자동으로 조절됩니다. 예를 들어, 브라우저 창의 크기를 줄이면 뷰포트도 작아지고, 브라우저 창의 크기를 늘리면 뷰포트도 커집니다. 이렇게 뷰포트의 크기가 변경되면, 웹 페이지에서 사용되는 미디어 쿼리(Media Queries)를 사용하여 반..

CSS margin 속성은 요소의 외부 여백을 지정하는 속성입니다. margin: auto;를 사용하면, 요소가 수평 가운데 정렬됩니다. margin: auto;를 사용할 때는, 요소가 가로폭을 가져야 한다는 것이 중요합니다. 예를 들어, div 요소가 가로폭을 가지도록 width 속성을 지정하고, margin: auto;를 추가하여 요소를 수평 가운데로 정렬할 수 있습니다. div { margin: auto; width: 25%; } 이 코드는 div 요소의 가로폭이 부모 요소의 50%이고, 요소가 수평 가운데로 정렬됩니다. margin auto로 img를 중앙에 배치하기 기본적으로, img 요소는 인라인 요소이기 때문에 margin: auto;를 사용할 수 없습니다. 따라서, display: bloc..

float 속성을 사용하면, 요소를 왼쪽이나 오른쪽으로 이동시킬 수 있습니다. float 속성은 다음과 같은 값들을 가질 수 있습니다. left: 요소를 왼쪽으로 이동시킵니다. right: 요소를 오른쪽으로 이동시킵니다. none: 요소를 이동시키지 않습니다. 이 값은 float 속성의 기본값입니다. float 속성을 사용하면, 요소가 다른 요소들과 겹치지 않고, 텍스트가 흐르는 효과를 만들 수 있습니다. 예를 들어, 다음과 같은 CSS 코드는 img 요소를 왼쪽으로 이동시키고, 그 주변의 텍스트를 감싸게 됩니다. img { float: left; }

CSS overflow 속성은 요소의 내용이 너무 커서 요소의 크기를 초과할 때, 어떻게 처리할지를 정의하는 속성입니다. overflow 속성은 다음과 같은 값들을 가질 수 있습니다. visible: 기본값입니다. 내용이 요소의 경계를 초과하더라도, 숨기지 않고 보여줍니다. hidden: 요소의 내용이 요소의 경계를 넘어가면, 숨겨집니다. scroll: 요소 내부에 스크롤바를 추가합니다. 내용이 요소의 경계를 초과하면, 스크롤바를 사용해서 볼 수 있습니다. auto: 요소 내부에 스크롤바를 추가합니다. 내용이 요소의 경계를 초과하면, 스크롤바를 사용해서 볼 수 있습니다. 필요한 경우에만 스크롤바가 나타나며, 내용이 요소의 경계를 초과하지 않으면, 스크롤바가 나타나지 않습니다. 예를 들어, 다음과 같은 C..

CSS의 position 속성은 요소의 위치를 지정하는 방법을 결정합니다. position 속성에는 static, relative, absolute, fixed, sticky 다섯 가지 값이 있습니다. static: 기본 값입니다. 요소를 일반적인 문서 흐름에 따라 배치합니다. top, bottom, left, right 속성을 적용해도 효과가 없습니다. relative: 요소를 일반적인 문서 흐름에 따라 배치하되, top, bottom, left, right 속성을 사용하여 위치를 조정할 수 있습니다. 자신을 기준으로 이동하므로 다른 요소들과의 위치를 비교하면서 이동할 수 있습니다. absolute: 가장 가까운 위치 지정이 있는 부모 요소를 기준으로 상대적으로 위치를 조정합니다. 부모 요소에 posi..

CSS의 display 프로퍼티는 요소가 어떤 방식으로 보여지는지를 정의합니다. block display 프로퍼티의 값 중 가장 일반적인 것은 블록(block)입니다. 블록은 가로폭 전체를 차지하며 새로운 줄에서 시작되는 형태를 가지고 있습니다. 예를 들어, 와 태그는 기본적으로 블록 요소입니다. inline 인라인(inline)은 줄 내에서만 존재하며 필요한 만큼의 너비만 차지합니다. 과 태그는 기본적으로 인라인 요소입니다. inline-block 인라인-블록(inline-block)은 인라인과 블록의 특성을 모두 가지고 있습니다. 인라인-블록 요소는 새로운 줄에서 시작하지 않으면서도 가로폭 전체를 차지할 수 있습니다. none display none은 웹 페이지에서 특정 요소를 보이지 않게 하는 방법..