본문 바로가기
Study

04. CSS 선택자와 기본 스타일링 학습 | 웹 개발 기초

by 구구 구구 2024. 7. 4.
반응형

CSS는 또 뭘까요, dall-e

 

 

CSS 선택자와 기본 스타일링 학습: 웹 개발 기초

 

01. 서론

1) CSS란 무엇인가?

CSS(캐스케이딩 스타일 시트)는 HTML 요소의 스타일을 정의하는 언어입니다. CSS는 HTML 문서의 외관을 제어하여 웹 페이지를 더욱 아름답고 사용자 친화적으로 만듭니다. 이를 통해 개발자는 HTML 문서의 구조와 스타일을 분리하여 유지보수를 용이하게 할 수 있습니다.

예시 코드

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>CSS 예제</title>
    <style>
        body {
            font-family: Arial, sans-serif;
        }
        h1 {
            color: blue;
        }
    </style>
</head>
<body>
    <h1>CSS로 스타일링된 제목</h1>
    <p>이 문장은 기본 스타일링입니다.</p>
</body>
</html>

 

2) CSS 선택자와 기본 스타일링의 중요성

CSS 선택자는 특정 HTML 요소를 선택하여 스타일을 적용하는 데 사용됩니다. 이를 통해 웹 페이지의 디자인과 레이아웃을 세밀하게 제어할 수 있습니다. 기본 스타일링은 텍스트 색상, 배경색, 여백, 테두리 등 웹 페이지의 시각적 요소를 설정하는 데 중요합니다.

예를 들어, CSS 선택자를 사용하면 특정 요소만 스타일을 변경할 수 있어 효율적인 스타일링이 가능합니다. 기본 스타일링을 통해 웹 페이지의 일관성을 유지하고, 사용자 경험을 향상시킬 수 있습니다.

예시 코드

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>CSS 선택자와 기본 스타일링</title>
    <style>
        p {
            color: green;
        }
        .highlight {
            background-color: yellow;
        }
    </style>
</head>
<body>
    <h1>CSS 선택자와 기본 스타일링 예제</h1>
    <p>이 문장은 기본 텍스트 스타일을 사용합니다.</p>
    <p class="highlight">이 문장은 노란색 배경으로 강조되었습니다.</p>
</body>
</html>

위의 예제에서 볼 수 있듯이, CSS 선택자와 기본 스타일링을 사용하면 HTML 요소의 스타일을 효율적으로 제어할 수 있습니다. 이러한 기초 개념을 이해하는 것은 더 복잡한 스타일링 작업을 수행하는 데 필수적입니다.

 

02. CSS 선택자 이해

1) 태그 선택자

태그 선택자는 특정 HTML 태그를 선택하여 스타일을 적용합니다. 예를 들어, 모든 `

` 태그에 스타일을 적용할 수 있습니다.

p {
    color: blue;
}

위 코드의 결과는 모든 `

` 태그의 텍스트가 파란색으로 표시됩니다.

 

2) 클래스 선택자

클래스 선택자는 클래스 속성이 지정된 요소를 선택하여 스타일을 적용합니다. 클래스 이름 앞에 마침표(.)를 사용합니다.

.highlight {
    background-color: yellow;
}

위 코드의 결과는 클래스가 "highlight"인 모든 요소의 배경색이 노란색으로 설정됩니다.

 

3) ID 선택자

ID 선택자는 특정 ID 속성이 지정된 요소를 선택하여 스타일을 적용합니다. ID 이름 앞에 샵(#) 기호를 사용합니다.

#myId {
    font-size: 24px;
    font-weight: bold;
}

위 코드의 결과는 ID가 "myId"인 요소의 폰트 크기가 24px로 설정되고, 폰트가 굵게 표시됩니다.

 

4) 속성 선택자

속성 선택자는 특정 속성을 가진 요소를 선택하여 스타일을 적용합니다. 대괄호([])를 사용하여 속성을 지정합니다.

a[target="_blank"] {
    color: red;
}

위 코드의 결과는 target 속성이 "_blank"인 모든 링크의 텍스트 색상이 빨간색으로 설정됩니다.

 

5) 그룹 선택자

그룹 선택자는 여러 요소를 한 번에 선택하여 동일한 스타일을 적용합니다. 선택자 사이를 쉼표(,)로 구분합니다.

h1, h2, h3 {
    font-family: Arial, sans-serif;
}

위 코드의 결과는 모든 태그의 폰트가 Arial로 설정됩니다.

 

종합 예제

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>CSS 선택자 예제</title>
    <style>
        p {
            color: blue;
        }
        .highlight {
            background-color: yellow;
        }
        #myId {
            font-size: 24px;
            font-weight: bold;
        }
        a[target="_blank"] {
            color: red;
        }
        h1, h2, h3 {
            font-family: Arial, sans-serif;
        }
    </style>
</head>
<body>
    <h1>CSS 선택자 예제</h1>
    <p>이 문장은 파란색으로 표시됩니다.</p>
    <p class="highlight">이 문장은 노란색 배경으로 강조되었습니다.</p>
    <p id="myId">이 문장은 24px 크기와 굵은 글씨로 표시됩니다.</p>
    <a href="https://www.example.com" target="_blank">이 링크는 빨간색으로 표시됩니다.</a>
    <h2>그룹 선택자 예제</h2>
    <h3>이 제목들은 Arial 폰트로 표시됩니다.</h3>
</body>
</html>

이 예제는 다양한 CSS 선택자를 사용하여 HTML 요소에 스타일을 적용하는 방법을 보여줍니다. 각 선택자가 어떻게 동작하는지 확인하고, 실습해보세요.

 

03. 기본 스타일링 속성

1) 텍스트 스타일링

CSS를 사용하면 텍스트의 색상, 크기, 폰트 등을 쉽게 조절할 수 있습니다.

p {
    color: blue;
    font-size: 16px;
    font-family: Arial, sans-serif;
}

위 코드의 결과는 모든 태그의 텍스트 색상이 파란색으로 설정되고, 폰트 크기가 16px로, 폰트가 Arial로 설정됩니다.

 

2) 배경색 설정

CSS를 사용하면 요소의 배경색을 설정할 수 있습니다.

div {
    background-color: yellow;
}

위 코드의 결과는 모든 태그의 배경색이 노란색으로 설정됩니다.

 

3) 여백 (padding, margin)

CSS를 사용하면 요소의 내부 여백(padding)과 외부 여백(margin)을 설정할 수 있습니다.

.box {
    padding: 10px;
    margin: 20px;
}

위 코드의 결과는 클래스가 "box"인 요소에 10px의 패딩과 20px의 마진이 적용됩니다.

 

4) 테두리 (border)

CSS를 사용하면 요소의 테두리를 설정할 수 있습니다.

.bordered {
    border: 2px solid black;
}

위 코드의 결과는 클래스가 "bordered"인 요소에 두께 2px의 검정색 실선 테두리가 적용됩니다.

 

종합 예제

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>CSS 기본 스타일링 예제</title>
    <style>
        p {
            color: blue;
            font-size: 16px;
            font-family: Arial, sans-serif;
        }
        div {
            background-color: yellow;
        }
        .box {
            padding: 10px;
            margin: 20px;
        }
        .bordered {
            border: 2px solid black;
        }
    </style>
</head>
<body>
    <h1>CSS 기본 스타일링 예제</h1>
    <p>이 문장은 파란색으로 표시됩니다.</p>
    <p>이 문장은 16px 크기로 표시됩니다.</p>
    <div>이 박스는 노란색 배경을 가집니다.</div>
    <div class="box bordered">이 박스는 패딩과 마진, 그리고 검정색 테두리를 가집니다.</div>
</body>
</html>

이 예제는 다양한 CSS 기본 스타일링 속성을 사용하여 HTML 요소에 스타일을 적용하는 방법을 보여줍니다. 각 스타일 속성이 어떻게 적용되는지 확인하고, 실습해보세요.

 

04. 실습: 선택자와 기본 스타일링 적용

1) 간단한 HTML 페이지 작성

우리는 이제 CSS 선택자와 기본 스타일링을 사용하여 간단한 HTML 페이지를 작성할 것입니다. 이 페이지는 다양한 CSS 선택자와 기본 스타일링 속성을 포함할 것입니다.

HTML 코드

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS 선택자와 기본 스타일링 실습</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            line-height: 1.6;
        }
        p {
            color: blue;
        }
        .highlight {
            background-color: yellow;
        }
        #intro {
            font-size: 24px;
            font-weight: bold;
        }
        a[target="_blank"] {
            color: red;
        }
        h1, h2, h3 {
            font-family: Arial, sans-serif;
        }
        .box {
            margin: 20px;
            padding: 15px;
            border: 2px solid black;
        }
    </style>
</head>
<body>
    <h1>CSS 선택자와 기본 스타일링 실습</h1>
    <h2>CSS 선택자와 기본 스타일링</h2>
    <p id="intro">이 문장은 ID 선택자로 스타일링되었습니다.</p>
    <p>이 문장은 파란색으로 표시됩니다.</p>
    <p class="highlight">이 문장은 노란색 배경으로 강조되었습니다.</p>
    <div class="box">
        <h3>기본 스타일링 적용 예제</h3>
        <p>이 박스는 20px 마진, 15px 패딩, 2px 테두리를 가집니다.</p>
        <p>또한, 이 박스 내의 텍스트는 기본 스타일링이 적용되었습니다.</p>
        <a href="https://www.example.com" target="_blank">이 링크는 빨간색으로 표시됩니다.</a>
    </div>
</body>
</html>

 

2) CSS 선택자와 기본 스타일링 적용

위의 HTML 코드에서는 다양한 CSS 선택자와 기본 스타일링 속성을 사용하여 HTML 요소를 스타일링했습니다. 각 선택자가 어떻게 적용되는지, 그리고 기본 스타일링 속성이 요소에 어떻게 영향을 미치는지 확인할 수 있습니다.

 

이 실습을 통해 CSS 선택자와 기본 스타일링의 중요성을 이해하고, 이를 실제 웹 페이지에 적용하는 방법을 익힐 수 있습니다.

 

05. 결론

1) CSS 선택자와 기본 스타일링의 중요성 재강조

CSS 선택자와 기본 스타일링은 웹 페이지 디자인의 핵심 요소입니다. 선택자를 사용하면 HTML 요소를 효율적으로 선택하고 스타일을 적용할 수 있으며, 기본 스타일링 속성을 통해 웹 페이지의 시각적 요소를 제어할 수 있습니다. 이를 통해 일관된 디자인을 유지하고, 사용자 경험을 향상시킬 수 있습니다.

 

CSS 선택자와 기본 스타일링의 이해는 웹 개발에서 필수적입니다. 이 기초 개념을 탄탄히 다져야 복잡한 디자인 작업을 수월하게 처리할 수 있습니다.

2) 추가 학습 자료와 참고 링크

더 깊이 있는 학습을 위해 다음의 자료들을 참고하세요:

이 자료들을 통해 CSS 선택자와 기본 스타일링을 더욱 깊이 있게 학습하고, 실제 웹 페이지에 적용해 보세요. CSS의 기초를 탄탄히 다지면, 더 복잡하고 세련된 디자인 작업도 능숙하게 처리할 수 있습니다.

관련된 다른 글도 읽어보시길 추천합니다

 

2024.06.26 - [Study] - 00. HTML 개요 및 기본 태그 학습: 웹 개발의 기초

 

00. HTML 개요 및 기본 태그 학습: 웹 개발의 기초

01. 서론1) HTML의 중요성 및 개요HTML(HyperText Markup Language)은 웹 페이지의 구조를 정의하는 마크업 언어입니다. 웹의 기초를 이루는 HTML은 텍스트, 이미지, 링크, 멀티미디어 요소 등을 포함하여 웹

guguuu.com

2024.06.27 - [Study] - 01. HTML 요소와 속성 완벽 가이드 | 웹 개발 기초

 

01. HTML 요소와 속성 완벽 가이드 | 웹 개발 기초

01. 서론1) HTML이란?HTML(하이퍼텍스트 마크업 언어, HyperText Markup Language)은 웹 페이지의 구조를 정의하는 마크업 언어입니다. 웹 페이지는 텍스트, 이미지, 링크 등 다양한 요소로 구성되며, 이러한

guguuu.com

2024.06.28 - [Study] - 02. HTML 폼과 입력 요소 가이드 | 웹 개발 기초

 

읽어주셔서 감사합니다

공감은 힘이 됩니다

 

:)

반응형
저작자표시 비영리 변경금지

'Study' 카테고리의 다른 글

06. CSS Flexbox 기초 학습: 유연한 웹 레이아웃 만들기 | 웹 개발 기초  (0) 2024.07.06
05. CSS 박스 모델 학습 | 웹 개발 기초  (0) 2024.07.05
03. HTML 시맨틱 태그 학습 : 웹 페이지 구조와 의미를 명확하게 | 웹 개발 기초  (0) 2024.07.03
02. HTML 폼과 입력 요소 가이드 | 웹 개발 기초  (0) 2024.07.02
01. HTML 요소와 속성 완벽 가이드 | 웹 개발 기초  (0) 2024.07.01

관련글

TOP

Designed by 티스토리

© Kakao Corp.

티스토리툴바