CSS 속성 명령: 웹 페이지 디자인의 핵심

 

CSS 속성 명령: 웹 페이지 디자인의 핵심

CSS(Cascading Style Sheets)는 웹 페이지의 디자인과 레이아웃을 제어하는 데 사용되는 언어입니다. CSS 속성은 HTML 요소에 적용하여 글꼴, 색상, 크기, 위치 등 다양한 스타일을 설정하는 데 사용됩니다.

CSS 속성의 기본 구조

CSS

selector {
  property: value;
}

코드를 사용할 때는 주의가 필요합니다.

 

• selector: 스타일을 적용할 HTML 요소를 선택합니다. (예: h1, p, div 등)
• property: 변경할 스타일의 특성을 나타냅니다. (예: color, font-size, background-color 등)
• value: property에 해당하는 값을 지정합니다. (예: red, 16px, #ffffff 등)

주요 CSS 속성 종류

CSS 속성은 매우 다양하며, 크게 다음과 같은 카테고리로 나눌 수 있습니다.

1. 텍스트 스타일

• font-family: 글꼴 종류
• font-size: 글자 크기
• font-weight: 글자 굵기
• color: 글자 색상
• text-align: 텍스트 정렬
• text-decoration: 밑줄, 취소선 등

2. 배경

• background-color: 배경 색상
• background-image: 배경 이미지
• background-repeat: 배경 이미지 반복
• background-position: 배경 이미지 위치

3. 박스 모델

• width: 요소의 너비
• height: 요소의 높이
• margin: 요소 주변 여백
• padding: 요소 내용과 테두리 사이 여백
• border: 테두리

4. 레이아웃

• display: 요소의 표시 형식 (block, inline, inline-block 등)
• position: 요소의 위치 (static, relative, absolute, fixed 등)
• float: 요소를 좌우로 띄우기
• flex: 유연한 레이아웃

5. 기타

• opacity: 투명도
• visibility: 요소의 보이기/숨기기
• z-index: 요소 겹쳐지는 순서

예시

CSS

h1 {
  color: blue;
  font-size: 36px;
  text-align: center;
}

p {
  background-color: lightgray;
  padding: 20px;
}

.box {
  width: 300px;
  height: 200px;
  border: 1px solid black;
  margin: 20px;
}

 

 

팁

• CSS 선택기: 특정 요소에 스타일을 적용하기 위해 다양한 선택기를 사용할 수 있습니다. (id 선택기, class 선택기, 태그 선택기 등)
• CSS 단위: 길이 단위(px, em, rem 등), 색상 단위(hex, rgb, hsl 등) 등 다양한 단위를 사용할 수 있습니다.
• CSS 속성 상속: 부모 요소의 스타일이 자식 요소에 상속될 수 있습니다.
• CSS 중요도: !important 키워드를 사용하여 스타일의 중요도를 높일 수 있습니다.