CSS(Cascading Style Sheet) 소개

CSS는 웹 문서의 디자인과 레이아웃을 지정하기 위해 사용되는 스타일 시트 언어입니다. 이하에서는 몇 가지 중요한 CSS 속성과 개념에 대해 더 자세히 설명하겠습니다.

1. 박스 모델

• 패딩(Padding): 요소의 내부 여백을 조정합니다.
• 마진(Margin): 요소의 외부 여백을 조정합니다.
• 테두리(Border): 요소의 테두리를 설정합니다.
• 박스 모델에서 여백 상쇄(Collapse)가 발생할 수 있으며, 이를 방지하기 위해 상/하단의 마진 값을 조정할 수 있습니다.

2. CSS 속성과 값

• box-sizing: border-box를 통해 박스의 크기 계산 방식을 변경할 수 있습니다.
• display: none은 요소를 숨기고 해당 공간을 비웁니다.
• visibility: hidden은 요소를 숨기지만 공간은 유지합니다.
• vertical-align: middle은 수직으로 가운데 정렬합니다.
• cursor: pointer는 마우스를 가져다 대었을 때 손가락 모양 커서를 보여줍니다.

3. 의사 클래스 활용

• :hover: 마우스를 가져다 대었을 때 스타일을 적용합니다.
• :active: 요소를 활성화할 때 스타일을 적용합니다.
• :not(): 반대 클래스를 선택할 때 사용됩니다.

4. 기타 유용한 CSS 속성

• !important: 다른 규칙을 무시하고 강제로 스타일을 적용합니다.
• outline: none은 요소에 선택 테두리를 제거합니다.
• float: 요소를 문서 흐름에서 제거하고 정렬을 재정의합니다.
• list-style: none은 목록의 기본 글머리 기호를 제거합니다.
• font: inherit는 부모 요소의 글꼴 속성을 상속받습니다.

CSS를 효과적으로 활용하여 웹 페이지를 디자인하고 레이아웃을 조정할 수 있습니다.