날짜

<aside> <img src="/icons/calendar_gray.svg" alt="/icons/calendar_gray.svg" width="40px" />

2026.01.24

</aside>

활동내용

1. CSS 기본 문법

선택자 {
    속성: 값;
    속성: 값;
}

CSS 적용 방법

<!-- 1. 외부 CSS (권장) -->
<link rel="stylesheet" href="style.css">

<!-- 2. 내부 CSS -->
<style>
    p { color: red; }
</style>

<!-- 3. 인라인 CSS (비권장) -->
<p style="color: red;">텍스트</p>

2. CSS 선택자

/* 태그 선택자 */
p { color: blue; }

/* 클래스 선택자 */
.highlight { background: yellow; }

/* ID 선택자 */
#header { font-size: 24px; }

/* 자손 선택자 */
div p { margin: 10px; }

/* 자식 선택자 */
div > p { padding: 5px; }

/* 그룹 선택자 */
h1, h2, h3 { font-weight: bold; }

/* 가상 클래스 */
a:hover { color: red; }
a:visited { color: purple; }
input:focus { border-color: blue; }

/* 속성 선택자 */
input[type="text"] { width: 200px; }

선택자 우선순위

3. Box Model

모든 HTML 요소는 박스 형태

.box {
    width: 300px;
    height: 200px;
    padding: 20px;      /* 내부 여백 */
    border: 2px solid black;  /* 테두리 */
    margin: 10px;       /* 외부 여백 */
}

/* 박스 크기 계산 방식 */
.box {
    box-sizing: border-box;  /* padding, border 포함 */
}

Box Model 구조

4. 색상과 단위

4-1. 색상 표현

.color-examples {
    /* 색상 이름 */
    color: red;
    
    /* HEX 코드 */
    color: #ff0000;
    color: #f00;  /* 축약형 */
    
    /* RGB */
    color: rgb(255, 0, 0);
    
    /* RGBA (투명도) */
    color: rgba(255, 0, 0, 0.5);
}

4-2. 단위

.units {
    /* 절대 단위 */
    width: 100px;
    
    /* 상대 단위 */
    font-size: 16px;
    padding: 1em;    /* 현재 폰트 크기 기준 */
    margin: 2rem;    /* 루트 폰트 크기 기준 */
    width: 50%;      /* 부모 요소 기준 */
    height: 100vh;   /* 뷰포트 높이 */
    width: 50vw;     /* 뷰포트 너비 */
}

5. 텍스트 스타일