회원가입   로그인
IMG-LOGO
공지사항 :

CSS (Cascading Style Sheets)

lmkfox - 2025-04-03 06:51:55 3 Views 0 Comment

CSS (Cascading Style Sheets) 완벽 가이드

CSS(Cascading Style Sheets)는 HTML 문서의 디자인과 레이아웃을 담당하는 스타일 언어입니다. 웹 페이지의 색상, 폰트, 크기, 위치 등을 제어하며, 반응형 웹 디자인을 가능하게 합니다.

이 글에서는 CSS의 개념, 기본 문법, 주요 속성, 최신 트렌드 등을 자세히 설명하겠습니다.

1. CSS란?

CSS는 웹 페이지의 스타일을 정의하는 언어로, HTML과 함께 사용됩니다.

CSS의 주요 기능

✔ 웹 페이지의 디자인(색상, 배경, 글꼴 등) 설정

✔ 웹 페이지의 레이아웃(위치, 크기, 정렬) 조정

✔ 다양한 디바이스(PC, 태블릿, 모바일)에서 반응형 디자인 적용

CSS의 주요 특징

• HTML과 분리 가능 → 유지보수 용이

• 한 번 작성하면 여러 요소에 적용 가능 → 코드 재사용성 증가

• 웹 브라우저가 직접 해석 → 빠른 렌더링

2. CSS의 적용 방법

CSS는 HTML 문서에 3가지 방법으로 적용할 수 있습니다.

① 인라인 스타일 (Inline Style)

HTML 요소 내부에 직접 스타일을 적용하는 방식입니다.

<p style="color: red; font-size: 16px;">이것은 빨간색 문장입니다.</p>

 특징: 개별 요소에만 적용되므로 유지보수가 어렵습니다.

② 내부 스타일 (Internal Style)

HTML 문서의 <head> 내부에서 <style> 태그를 사용하여 스타일을 적용합니다.

<head>
    <style>
        p {
            color: blue;
            font-size: 18px;
        }
    </style>
</head>

 특징: 한 페이지 내에서만 적용되므로 여러 페이지에 적용하려면 비효율적입니다.

③ 외부 스타일 (External Style, 추천 방식)

CSS를 별도의 파일(style.css)로 만들어 HTML 문서에서 링크하여 사용합니다.

style.css (외부 CSS 파일)

p {
    color: green;
    font-size: 20px;
}

HTML 파일에서 연결

<head>
    <link rel="stylesheet" href="style.css">
</head>

 특징: 여러 HTML 문서에서 동일한 CSS 파일을 사용할 수 있어 유지보수가 용이합니다.

3. CSS의 기본 문법

① CSS 선택자 (Selectors)

CSS에서 특정 HTML 요소를 선택하여 스타일을 적용할 때 사용합니다.

선택자

설명

예제

*

전체 선택자

* { margin: 0; }

태그명

특정 태그 선택

p { color: red; }

.클래스명

특정 클래스 선택

.title { font-size: 24px; }

#아이디명

특정 아이디 선택

#header { background: gray; }

,

여러 요소 동시 선택

h1, h2 { color: blue; }

>

자식 요소 선택

div > p { color: green; }

:hover

마우스 오버 시

a:hover { color: red; }

② CSS 속성 (Properties)

CSS에는 다양한 속성이 있으며, 대표적인 몇 가지를 정리하면 다음과 같습니다.

텍스트 관련 속성

p {
    color: blue; /* 글자 색상 */
    font-size: 16px; /* 글자 크기 */
    font-weight: bold; /* 글자 두께 */
    text-align: center; /* 글자 정렬 */
    text-decoration: underline; /* 밑줄 */
}

배경 관련 속성

body {
    background-color: lightgray; /* 배경색 */
    background-image: url("image.jpg"); /* 배경 이미지 */
    background-size: cover; /* 배경 이미지 크기 조정 */
}

박스 모델 (Box Model)

모든 HTML 요소는 기본적으로 박스 모델을 따릅니다.

div {
    width: 200px; /* 너비 */
    height: 100px; /* 높이 */
    padding: 20px; /* 안쪽 여백 */
    margin: 10px; /* 바깥 여백 */
    border: 2px solid black; /* 테두리 */
}

레이아웃 관련 속성

.container {
    display: flex; /* Flexbox 레이아웃 */
    justify-content: center; /* 가운데 정렬 */
    align-items: center; /* 수직 정렬 */
}

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

CSS는 다양한 기기에서 최적화된 화면을 제공하기 위해 반응형 디자인을 지원합니다.

① 미디어 쿼리 (Media Query)

화면 크기에 따라 다른 스타일을 적용하는 기능입니다.

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

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

5. CSS 최신 트렌드 (CSS3 기능)

① 그림자 효과 (Box Shadow, Text Shadow)

.box {
    box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.3);
}
h1 {
    text-shadow: 2px 2px 5px gray;
}

② 투명도 및 색상 효과 (Opacity, RGBA)

div {
    background-color: rgba(255, 0, 0, 0.5); /* 반투명한 빨간색 */
}

③ 애니메이션 (Animation)

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

.box {
    animation: fadeIn 2s ease-in-out;
}

6. CSS 프레임워크 소개

CSS를 직접 작성하는 대신, 미리 정의된 스타일을 활용할 수 있는 CSS 프레임워크가 있습니다.

프레임워크

특징

Bootstrap

반응형 디자인, 다양한 컴포넌트 제공

Tailwind CSS

유틸리티 기반, 커스터마이징 용이

Bulma

쉽고 직관적인 문법, 미니멀한 디자인

Foundation

강력한 반응형 웹 기능

 예제: Bootstrap을 이용한 버튼

<button class="btn btn-primary">클릭</button>

7. 결론

CSS는 웹 페이지의 디자인과 레이아웃을 담당하는 핵심 기술입니다.

✅ 기본 문법과 선택자를 익히고

✅ 반응형 웹 디자인을 적용하며

✅ 최신 CSS3 기능을 활용하면

완성도 높은 웹사이트를 만들 수 있습니다.

웹 개발을 배우는 과정에서 HTML과 함께 CSS를 익히는 것이 필수적이므로, 다양한 실습을 통해 경험을 쌓아보세요.


댓글