코딩스쿨

▶ CSS References

CSS Reference

CSS Reference: CSS의 주요 속성 및 사용법

*CSS(Cascading Style Sheets)**는 웹 페이지의 외형을 정의하는 스타일 언어로, HTML 문서의 레이아웃, 색상, 폰트, 여백 등을 설정하는 데 사용됩니다. CSS는 HTML과 함께 사용되며, 웹 디자인에서 매우 중요한 역할을 합니다. 이 가이드는 CSS의 주요 속성과 사용 방법을 설명합니다.

1. CSS 문법

CSS는 선택자(selector)와 선언(declaration)으로 이루어져 있습니다. 선택자는 스타일을 적용할 HTML 요소를 지정하고, 선언은 그 요소의 스타일을 정의합니다.

예시:

p {
    color: blue;
    font-size: 16px;
}

위 코드에서 p는 선택자이며, { color: blue; font-size: 16px; }는 선언 블록입니다. 여기서 color: blue;는 선언으로, color가 속성(property)이고, blue는 값(value)입니다.

2. CSS 선택자

2.1 기본 선택자

요소 선택자: 특정 HTML 요소를 선택합니다.
- 예: p { color: blue; } (모든 <p> 요소에 스타일 적용)
클래스 선택자: 특정 클래스 속성이 있는 요소를 선택합니다. 클래스는 .으로 시작합니다.
- 예: .button { background-color: red; } (클래스가 button인 모든 요소)
ID 선택자: 특정 ID 속성이 있는 요소를 선택합니다. ID는 #으로 시작합니다.
- 예: #header { font-size: 24px; } (ID가 header인 요소)

2.2 결합 선택자

자식 선택자 (>): 바로 아래에 있는 자식을 선택합니다.
- 예: div > p { color: green; } (모든 div의 바로 아래에 있는 p 요소)
후손 선택자 (공백): 모든 후손을 선택합니다.
- 예: div p { color: green; } (모든 div의 후손인 p 요소)
동위 선택자 (+, ~): 형제 요소를 선택합니다.
- 예: h1 + p { color: red; } (바로 다음에 오는 p 요소)
- 예: h1 ~ p { color: red; } (모든 형제 p 요소)

3. CSS 속성

3.1 텍스트와 폰트 관련 속성

color: 텍스트 색상을 지정합니다.
- 예: color: red;
font-size: 폰트 크기를 지정합니다.
- 예: font-size: 20px;
font-family: 폰트 스타일을 지정합니다.
- 예: font-family: Arial, sans-serif;
font-weight: 글자의 두께를 설정합니다.
- 예: font-weight: bold;
text-align: 텍스트 정렬을 지정합니다.
- 예: text-align: center; (중앙 정렬)
text-transform: 텍스트를 대문자, 소문자로 변환합니다.
- 예: text-transform: uppercase;
line-height: 텍스트의 줄 간격을 지정합니다.
- 예: line-height: 1.5;

3.2 배경 관련 속성

background-color: 배경 색상을 지정합니다.
- 예: background-color: yellow;
background-image: 배경 이미지를 설정합니다.
- 예: background-image: url('image.jpg');
background-repeat: 배경 이미지의 반복 방식을 설정합니다.
- 예: background-repeat: no-repeat;
background-size: 배경 이미지의 크기를 지정합니다.
- 예: background-size: cover; (전체 배경을 덮도록 설정)

3.3 박스 모델 (Box Model) 관련 속성

박스 모델은 요소의 크기와 여백을 결정하는 핵심 개념입니다. 각 요소는 패딩(padding), 테두리(border), **마진(margin)**으로 감싸져 있습니다.

width: 요소의 너비를 설정합니다.
- 예: width: 200px;
height: 요소의 높이를 설정합니다.
- 예: height: 150px;
padding: 콘텐츠와 테두리 사이의 여백을 설정합니다.
- 예: padding: 10px;
border: 테두리를 설정합니다.
- 예: border: 1px solid black;
margin: 테두리와 주변 요소 사이의 간격을 설정합니다.
- 예: margin: 20px;

4. 레이아웃과 배치 관련 속성

4.1 `display`

요소의 표시 방식을 설정합니다.

예시:

display: block;   /* 블록 요소로 설정 */
display: inline;  /* 인라인 요소로 설정 */
display: flex;    /* 플렉스 컨테이너로 설정 */

4.2 `position`

요소의 위치를 설정합니다.

예시:

position: static;   /* 기본 배치 */
position: relative; /* 요소를 상대적으로 배치 */
position: absolute; /* 절대 위치 배치 */
position: fixed;    /* 화면에 고정 */

top, bottom, left, right: 요소의 위치를 지정합니다.
```
position: absolute;
top: 20px;
left: 50px;
```

4.3 Flexbox

Flexbox는 요소의 배치를 유연하게 관리할 수 있는 레이아웃 시스템입니다.

display: flex: 컨테이너를 플렉스 박스로 설정합니다.
주요 속성:
- justify-content: 주축을 기준으로 요소를 정렬합니다.
  - 예: justify-content: center; (중앙 정렬)
- align-items: 교차축을 기준으로 요소를 정렬합니다.
  - 예: align-items: center; (중앙 정렬)

예시:

.container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

4.4 Grid

Grid는 2차원 레이아웃을 쉽게 만들 수 있는 시스템입니다.

display: grid: 그리드 컨테이너를 설정합니다.
주요 속성:
- grid-template-columns: 그리드의 열을 설정합니다.
  - 예: grid-template-columns: 1fr 1fr 1fr; (3개의 동일한 너비 열)
- grid-gap: 그리드 항목 간의 간격을 설정합니다.
  - 예: grid-gap: 10px;

예시:

.container {
    display: grid;
    grid-template-columns: 1fr 2fr;
    grid-gap: 10px;
}

5. 애니메이션과 전환 효과

5.1 `transition`

요소의 속성이 변경될 때 전환 효과를 설정합니다.

예시:

.box {
    transition: background-color 0.3s ease;
}

.box:hover {
    background-color: blue;
}

5.2 `animation`

애니메이션을 정의하고 실행합니다.

예시:

@keyframes slide {
    from {
        transform: translateX(0);
    }
    to {
        transform: translateX(100px);
    }
}

.box {
    animation: slide 2s infinite;
}

6. 반응형 웹 디자인 (Responsive Web Design)

6.1 미디어 쿼리 (Media Queries)

미디어 쿼리는 화면 크기에 따라 스타일을 다르게 적용할 수 있게 해주는 도구입니다.

예시:

@media screen and (max-width: 600px) {
    body {
        background-color: lightblue;
    }
}

위 코드는 화면의 너비가 600px 이하일 때 배경색을 lightblue로 변경합니다.

7. 기타 중요한 CSS 속성

7.1 `z-index`

요소의 쌓이는 순서를 설정합니다. 숫자가 클수록 상위

에 배치됩니다.

예시:

.element {
    position: absolute;
    z-index: 10;
}

7.2 `opacity`

요소의 투명도를 설정합니다. 0은 완전 투명, 1은 불투명입니다.

예시:

.transparent-box {
    opacity: 0.5;
}

7.3 `overflow`

컨텐츠가 요소의 크기를 넘을 때 처리 방식을 지정합니다.

예시:

.container {
    overflow: auto;  /* 스크롤이 필요할 때 표시 */
}

요약

CSS는 웹 페이지의 스타일을 정의하는 매우 중요한 도구입니다. 기본 선택자에서부터 배경, 폰트, 레이아웃, 애니메이션, 반응형 디자인에 이르기까지 다양한 속성을 활용하여 웹 디자인을 세밀하게 제어할 수 있습니다. 이 가이드는 CSS의 주요 속성과 사용법을 소개하여, 웹 개발 시 필요한 다양한 스타일링 기법을 이해하는 데 도움을 줍니다.

코딩 스쿨 CSS