웹 개발 (Frontend Developer)/CSS3 여백 상쇄 (Margin Collapse) 여러 블록의 위쪽 및 아래쪽 바깥 여백 (margin)은 경우에 따라 제일 큰 여백의 크기를 가진 단일 여백으로 병합됩니다. 이러한 현상은 좌우 여백에서는 발생하지 않으며, 오직 위쪽과 아래쪽 (top & bottom) 여백에서만 발생합니다. ** 플로팅 요소와 절대 위치를 지정한 요소의 여백은 절대 상쇄되지 않습니다. 인접 형제 요소간의 바깥 여백은 서로 상쇄됩니다. div.element2 요소의 마진이 더 크기 때문에 둘 사이의 간격은 40px가 되고 겹치게 됩니다. 부모 블록에 테두리 또는 패딩이 설정되지 않은 경우 자손을 분리할 여백이 존재하지 않는 경우 부모와 자손의 여백이 상쇄됩니다. 상쇄된 여백은 부모 블록 바깥에 위치하게 되고, 이 문제 해결하기 위해선 부모에 inline 콘텐츠, bo.. 2024. 9. 20. CSS : 박스 모델 (Box Model) CSS의 박스 모델은 여백, 테두리, 패딩, 및 콘텐츠등 자체를 포함한 다양한 속성을 담고 있는 컨테이너입니다. 이러한 속성들은 함께 요소의 크기와 간격을 결정하여 페이지에서 볼 수 있는 박스를 생성하게 됩니다. - 콘텐츠 (Content) : 콘텐츠가 표시되는 영역으로 그 크기를 width (넓이) & height (높이)와 같은 속성을 사용해서 정할 수 있습니다. - 패딩 (Padding) : 콘텐츠 주변을 마치 공백처럼 공간을 만들어줍니다. 패딩의 크기는 padding과 관련 속성을 사용해 제어할 수 있습니다. - 테두리 (Border) : 콘텐츠와 패딩까지 둘러싸고, 테두리의 크기, 색상, 테두리 넓이, 스타일등은 border와 관련 속성을 사용하여 제어할 수 있습니다. - 여백 (Margin.. 2024. 9. 20. CSS이란 무엇인가? CSS는 영어로 Cascading Style Sheet 약자로 HTML과 함께 사용되는 기본 웹 디자인 요소입니다. 개발자는 이를 통해 스타일, 레이아웃, 색상과 크기 등을 원하는 대로 지정하여 웹 페이지의 디자인을 조정할 수 있습니다 . 텍스트 색상이나 배경화면 색상 같은 기본 CSS 속성은 언제나 쉽게 변경이 가능하며 다양한 기기 (pc, 스마트폰, 노트북 등)에 맞게 콘텐츠가 변경하게 할 수 있습니다. CSS 기본 개요특정 요소 또는 요소 그룹을 지정하는 것을 선택자라고 합니다. 선택자를 속성과 값으로 스타일링하는 것을 CSS 선언이라고 합니다. CSS 선언은 중괄호 '{}' 안에 작성되며, 세미콜론 ' ; '으로 구분됩니다. CSS 적용하기1. 외부 스타일 (External style) :.. 2024. 8. 10. 이전 1 다음
