비기너 트랙 8 - CSS 이론 (1)

내용 요약

CSS(Cascading Style Sheets) : HTML, XML같은 마크업 언어 문서의 스타일을 꾸미기 위한 스타일 시트 언어

CSS 속성 학습 사이트 : w3schools

css 정의하기

1. 인라인 스타일 : <style> 요소 내부에 css 속성을 직접 입력하는 방식

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS 이론학습</title>
    <style>
        body {
            margin : 0;
            padding : 20px;
            font-family: Arial, sans-serif;
        }
        h1 {
            background-color : black;
            color : #fff;
        }
        h1, h2 {
            text-align: center;
        }
        a {
            text-decoration: none;
            color:unset;
        }
    </style>
</head>

2. 외부 css 파일 (권장) : <link> 요소에 href 속성으로 css 파일명을 입력하는 방식

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS 이론학습</title>
    <!-- rel 속성은 현재 문서와 외부 리소스 사이의 연관 관계를 의미 -->
    <!-- href 속성은 링크 -->
    <link rel="stylesheet" href="style.css">
</head>

style.css

@charset "UTF-8";

body {
    margin : 0;
    padding : 20px;
    font-family: Arial, sans-serif;
}
h1 {
    background-color : black;
    color : #fff;
}
h1, h2 {
    text-align: center;
}
a {
    text-decoration: none;
    color:unset;
}

선택자

css는 html 요소를 선택하기 위해 선택자를 사용한다.

body {
    margin : 0; /* 테두리 밖 여백 크기 설정 */
    padding : 20px; /* 테두리 안 여백 크기 설정 */
    font-family : Arial, sans-serif; /* 폰트 종류 설정 */
}
h1 {
    background-color : black; /* h1 태그 영역의 배경 색 설정 */
    color : #fff; /* 글자 색 설정 */
}
h1, h2 {
    text-align : center; /* 텍스트의 정렬 설정 (중앙) */
}
a {
    text-decoration : none; /* 텍스트를 꾸미는 요소(밑줄 등) 설정 */
    color : unset; 
}

스타일을 지정하기 위해서는 다음과 같이 속성과 값의 쌍을 사용한다.

ex) background-color 속성 - black 값

body는 <body> 요소, h1는 <h1>요소, a는 <a>요소, h1, h2의 경우에는 <h1>요소와 <h2>요소 둘 모두 선택할 수 있다.

이 외에도 id, class 선택자로 각각의 스타일을 지정할 수 있다.

1. class 선택자

여러 요소를 그룹화하고, 해당 그룹에 스타일을 적용한다.

하나의 요소가 여러 클래스를 가질 수 있고, 여러 요소가 동일한 클래스를 가질 수 있다.

beginner.html

    <ul class="highlight paragraph">
        <li>a. HTML 예습하기</li>
        <li>b. MDN 사이트 접속하기</li>
        <li>c. w3school 사이트 접속하기</li>
        <li>d. 실습 도전하기</li>
    </ul>
    <h2 class="highlight">글씨 강조하기</h2>
    <p><i>HTML</i> 예습하기</p>
    <p><b>MDN</b> 사이트 접속하기</p>
    <p><u>w3school</u> 사이트 접속하기</p>
    <p><em>실습</em>도전하기</p>

style.css

.highlight {
    background-color: yellow;
}

.paragraph {
    font-size : 12px;
}

2. id 선택자

id 선택자는 유일성을 보장하기 위해 사용한다.

때문에 html 문서 전체에서 동일한 id를 가지는 요소가 두 개 이상 있으면 안된다.

    <div id="header">
        <div class="menu">오늘 할일</div>
        <div class="menu">내일 할일</div>
        <div class="menu">모레 할일</div>
    </div>

#header {
    padding : 0;
    margin : 0;
    background-color: aquamarine;
    display : flex;
    justify-content: space-between;
}

#header .menu {
    padding : 10px 15px;
    list-style-type: none;
}

실습 과제

@charset "UTF-8";

body {
    font-family: Arial, sans-serif;
    background-color: #f4f4f4;
}

a {
    text-decoration: none;
    color: unset;
}

.daily-title {
    color : #3498db;
}

.task {
    font-size : 18px;
    margin-bottom: 10px;
}

#challenge-task {
    font-weight : bold;
}

'오즈코딩스쿨 프론트엔드 10기 > 베이스캠프' 카테고리의 다른 글

비기너 트랙 9 - CSS 이론 (2) (0)	2025.02.21
워밍업 칼럼 3 - 아토믹 해빗 (0)	2025.02.20
비기너 트랙 7 - HTML 이론 (0)	2025.02.15
비기너 트랙 6 - Git과 GitHub (0)	2025.02.14
비기너 트랙 5 - CLI(Command Line Interface) (0)	2025.02.13

hykim

비기너 트랙 8 - CSS 이론 (1)

'오즈코딩스쿨 프론트엔드 10기 > 베이스캠프' 카테고리의 다른 글

티스토리툴바

비기너 트랙 8 - CSS 이론 (1)

'오즈코딩스쿨 프론트엔드 10기 > 베이스캠프' 카테고리의 다른 글

'오즈코딩스쿨 프론트엔드 10기/베이스캠프' Related Articles

티스토리툴바