Shong Studio의 정보 창고

CSS에서 display 속성은 요소가 웹 페이지 내에서 어떻게 배치되고 표시될지 결정하는 데 사용됩니다. 여러 종류의 display 값들이 있으며, 가장 많이 사용되는 값들의 특징과 활용 예시는 다음과 같습니다.1. block특징: 요소가 "블록"처럼 작동하여, 가로 전체를 차지합니다.다음 요소는 새로운 줄에서 시작됩니다.대표적인 블록 요소: , , 등.예시:Block 요소새로운 줄에 표시되는 블록 요소2. inline특징:요소가 "인라인"으로 작동하여, 내용물만큼의 가로 너비를 차지합니다.다른 요소들과 한 줄에 배치됩니다.대표적인 인라인 요소: , , 등.예시:Inline 요소옆에 붙어있는 또 다른 인라인 요소3. inline-block특징: inline과 block의 특성을 모두 가지고 있습니다..

CSS에서 overflow는 요소의 내용이 해당 요소의 크기보다 클 때, 그 내용을 어떻게 처리할지를 결정하는 속성입니다. 이 속성에는 hidden, visible, scroll, auto 네 가지 값이 있으며 각각의 기능은 다음과 같습니다:visible: 기본값으로 설정되어 있습니다.요소의 크기보다 내용이 더 커지면 요소 밖으로 내용이 넘치게 됩니다. 그래서 "넘쳐 보이는" 상태가 됩니다.추가적인 스크롤바나 숨겨짐이 없습니다.hidden:요소의 크기보다 내용이 넘칠 경우, 넘치는 부분은 보이지 않게 됩니다.요소 내부의 내용이 잘리지만 스크롤바는 표시되지 않습니다.잘려도 괜찮거나 요소 크기에 딱 맞게 내용을 표시하고 싶을 때 사용됩니다.scroll:내용이 요소의 크기를 넘어가면 스크롤바가 항상 표시됩니다..

CSS 박스 모델CSS 박스 모델은 웹 페이지의 요소를 배치하고 공간을 조절하는 데 중요한 역할을 합니다. 이 모델은 요소의 width, height, padding, border, margin을 모두 포함하여 요소의 전체 크기와 위치를 결정합니다.1. Width와 Heightwidth, height는 요소의 너비와 높이를 설정하는 속성입니다.기본값: auto로 설정되어 있으며, 브라우저가 너비와 높이를 자동으로 계산합니다.width: auto; → 부모 요소의 너비에 맞춰 자동으로 늘어납니다.height: auto; → 포함된 콘텐츠 크기에 따라 자동으로 줄어듭니다.단위: px (픽셀), em, vw (뷰포트 너비의 백분율) 등 다양한 단위로 지정할 수 있습니다.2. Max-Width/Height와 M..

자주 사용되는 속성width: 요소의 너비를 지정합니다.height: 요소의 높이를 지정합니다.background-color: 요소의 배경 색상을 지정합니다.transition: 전환 효과를 적용할 때 사용합니다. (예: transition: 1s;)display: 요소의 디스플레이 유형을 지정합니다. (예: display: block;은 inline 요소를 block 요소로 전환)position: 요소의 위치를 지정합니다. (예: position: fixed;는 화면의 viewport를 기준으로 배치)가상 클래스 선택자선택자 뒤에 :을 사용하여 가상 클래스 선택자를 지정합니다.hover: 선택자 요소에 마우스 커서가 올라가 있는 동안 선택.active: 선택자 요소를 클릭하고 있는 동안 선택.focus..