본문 바로가기
Frontend/CSS

[CSS] CSS 기본

by cogito21_js 2024. 6. 8.
반응형

CSS (Cascading Style Sheets)는 HTML 문서의 스타일을 정의하고 웹 페이지의 시각적 표현을 제어하는 데 사용됩니다. CSS를 단계별로 학습하면 점진적으로 개념을 이해하고 실습할 수 있습니다.

1단계: CSS 기본 이해하기

1. CSS 개념

  • CSS: 웹 페이지의 스타일을 정의하는 언어입니다.
  • 선택자: 스타일을 적용할 HTML 요소를 선택합니다.
  • 속성(Property)과 값(Value): 스타일 속성과 그에 대한 값을 정의합니다.

2. CSS 기본 구조

CSS 코드의 기본 구조는 다음과 같습니다:

선택자 {
    속성: 값;
}

3. CSS 작성 방법

  • 인라인(In-line) 스타일: HTML 요소에 직접 스타일을 정의합니다.
  • 내부(Internal) 스타일 시트: HTML 문서의 <head> 섹션에 <style> 태그를 사용합니다.
  • 외부(External) 스타일 시트: 별도의 CSS 파일을 작성하고 HTML 문서에 링크합니다.
예시:

  • 인라인 스타일:

    <p style="color: red;">This is a red paragraph.</p>

  • 내부 스타일 시트:

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Internal CSS Example</title>
    <style>
        p {
            color: blue;
        }
    </style>
</head>
<body>
    <p>This is a blue paragraph.</p>
</body>
</html>

  • 외부 스타일 시트:

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>External CSS Example</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <p>This is a paragraph styled by an external CSS file.</p>
</body>
</html>

    styles.css:

    p {
    color: green;
}

2단계: CSS 선택자와 특성 이해하기

1. 기본 선택자

  • 태그 선택자(Tag Selector): HTML 태그를 선택합니다.

    p {
    color: blue;
}

  • 클래스 선택자(Class Selector): 특정 클래스를 가진 요소를 선택합니다. 클래스 이름 앞에 .를 붙입니다.

    .highlight {
    background-color: yellow;
}

  • 아이디 선택자(ID Selector): 특정 아이디를 가진 요소를 선택합니다. 아이디 이름 앞에 #를 붙입니다.

    #main-header {
    font-size: 24px;
}

2. 복합 선택자와 조합자

  • 그룹 선택자(Group Selector): 여러 선택자에 동일한 스타일을 적용합니다.

    h1, h2, h3 {
    color: navy;
}

  • 자손 선택자(Descendant Selector): 특정 요소의 모든 자손 요소를 선택합니다.

    .container p {
    color: gray;
}

  • 자식 선택자(Child Selector): 특정 요소의 직계 자식을 선택합니다.

    .container > p {
    color: gray;
}

  • 형제 선택자(Sibling Selector): 특정 요소와 형제 관계에 있는 요소를 선택합니다.

    h1 + p {
    margin-top: 0;
}

3. 속성 선택자

  • 특정 속성 값을 가진 요소 선택:
    input[type="text"] {
    border: 1px solid #ccc;
}

3단계: 텍스트와 글꼴 스타일링

1. 텍스트 색상과 정렬

  • 텍스트 색상: color 속성을 사용합니다.

    p {
    color: #333;
}

  • 텍스트 정렬: text-align 속성을 사용합니다.

    p {
    text-align: center;
}

2. 글꼴 설정

  • 글꼴 패밀리: font-family 속성을 사용합니다.

    body {
    font-family: Arial, sans-serif;
}

  • 글꼴 크기: font-size 속성을 사용합니다.

    h1 {
    font-size: 2em;
}

  • 글꼴 두께: font-weight 속성을 사용합니다.

    p {
    font-weight: bold;
}

3. 텍스트 장식과 변환

  • 텍스트 장식: text-decoration 속성을 사용합니다.

    a {
    text-decoration: none;
}

  • 텍스트 변환: text-transform 속성을 사용합니다.

    h2 {
    text-transform: uppercase;
}

4단계: 박스 모델 이해하기

1. 박스 모델 기본

  • HTML 요소는 콘텐츠, 패딩, 테두리, 마진으로 구성된 박스 모델을 따릅니다.
  • 콘텐츠(Content): 요소의 실제 내용입니다.
  • 패딩(Padding): 콘텐츠와 테두리 사이의 내부 여백입니다.
  • 테두리(Border): 요소의 경계입니다.
  • 마진(Margin): 요소와 다른 요소 사이의 외부 여백입니다.

2. 박스 모델 속성

  • 패딩: padding 속성을 사용하여 설정합니다.

    .box {
    padding: 20px;
}

  • 테두리: border 속성을 사용하여 설정합니다.

    .box {
    border: 1px solid #000;
}

  • 마진: margin 속성을 사용하여 설정합니다.

    .box {
    margin: 10px;
}

  • 박스 크기 조정: box-sizing 속성을 사용하여 박스 모델의 크기 조정 방식을 설정합니다.

    .box {
    box-sizing: border-box;
}

5단계: 레이아웃 구성

1. 디스플레이 속성

  • 블록(Block) 요소와 인라인(Inline) 요소의 차이를 이해합니다.
  • 블록 요소: 항상 새로운 줄에서 시작하며, 가로 전체를 차지합니다.
  • 인라인 요소: 콘텐츠의 폭만큼 차지하며, 줄 바꿈을 하지 않습니다.
.block-element {
    display: block;
}

.inline-element {
    display: inline;
}

2. 플렉스박스(Flexbox) 레이아웃

  • 플렉스박스를 사용하면 보다 효율적인 레이아웃 구성이 가능합니다.

  • 컨테이너 속성:

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

  • 아이템 속성:

    .flex-item {
    flex: 1;
}

6단계: 반응형 웹 디자인

1. 미디어 쿼리(Media Queries)

  • 미디어 쿼리를 사용하여 다양한 화면 크기에 대응하는 스타일을 적용합니다.
@media (max-width: 600px) {
    .container {
        flex-direction: column;
    }
}

2. 유연한 레이아웃

  • 퍼센트(%)와 뷰포트 단위(vw, vh)를 사용하여 유연한 레이아웃을 만듭니다.
.container {
    width: 100%;
    height: 100vh;
}

7단계: 애니메이션과 전환

1. 전환(Transition)

  • transition 속성을 사용하여 요소의 상태 변화에 애니메이션 효과를 적용합니다.
.button {
    background-color: blue;
    transition: background-color 0.3s ease;
}

.button:hover {
    background-color: green;
}

2. 애니메이션(Animation)

  • @keyframes 규칙을 사용하여 복잡한 애니메이션을 정의합니다.
@keyframes slide-in {
    from {
        transform: translateX(-100%);
    }
    to {
        transform: translateX(0);
    }
}

.element {
    animation: slide-in 0.5s ease-in-out;
}

8단계: 실습과 프로젝트

1. 간단한 웹 페이지 스타일링

  • 기본 HTML 페이지에 스타일을 적용하여 완성된 웹 페이지를 만듭니다.

2. 프로젝트 예제

  • 포트폴리오 사이트, 블로그 레이아웃 등 실제 프로젝트를 만들어 봅니다.
반응형
저작자표시

'Frontend > CSS' 카테고리의 다른 글

[CSS] CSS 규칙  (0) 2024.06.08
[CSS] CSS 예제(심화)  (0) 2024.06.08
[CSS] CSS 심화2  (0) 2024.06.08
[CSS] CSS 심화1  (0) 2024.06.08
[CSS] CSS 예제  (0) 2024.06.08

관련글

티스토리툴바