코딩자율학습단 19기 | 5일차 학습일지 - CSS 첫날: 문법과 적용 방법 3가지

오늘 학습 정보

날짜/Day: 26/1/16 (Day5)
교재 범위: ~4.2 CSS 적용하기 (종이책 p.130~139)

카톡 학습 범위 안내 7 — [5일차] ~4.2 CSS 적용하기 (종이책 p.130~139) 범위 안내

출처: 코딩 자율학습단 카카오톡 채널 메시지 캡처

오늘의 핵심 키워드 3개

핵심 키워드 1: CSS 기본 문법(선택자/선언부, 속성:값)
핵심 키워드 2: CSS 주석(/* 주석 내용 */)
핵심 키워드 3: CSS 적용 방법 3가지(내부/외부/인라인)

내용 정리

2-1. CSS 기본 문법

CSS는 기본적으로 선택자(selector) 와 선언부(declaration block) 로 구성돼요. 선언부 안에는 속성(property): 값(value); 형태를 쓰고, 여러 줄 작성할 땐 보통 세미콜론(;) 으로 구분합니다.

기본 형식: 선택자 { 속성: 값;}

예시 (h1에 스타일 적용)

h1 {
   font-size: 24px;
   color: red;
}
* 줄바꿈과 들여쓰기를 꼭 할 필요는 없지만 가독성 향상을 위해 적절히 사용

2-2. CSS 주석

CSS에서도 코드 설명을 남길 수 있고, 주석은 브라우저에 표시되지 않습니다.

형식: /* 주석 내용 */

* HTML과 마찬가지로 소스 보기를 하면 주석 내용이 노출되므로 중요한 정보는 적으면 안됨

2-3. CSS를 HTML 문서에 적용하는 방법 3가지

(1) 내부 스타일 시트 (internal style sheet)

HTML 문서 내부에서 <style> 태그로 CSS를 작성하는 방식입니다. 보통 <head> 안에 작성합니다.

형식: <style> /* CSS 코드 */</style>

예시:

<head>
   <style>
   h1 {
      color: blue;
   }
   </style>
</head>

정리 포인트
- 장점: 한 파일에서 빠르게 확인/테스트하기 좋음
- 단점: 페이지마다 CSS가 반복될 수 있고, 문서를 열 때마다 CSS를 함께 읽어야 해서 성능상 좋지 못함

(2) 외부 스타일 시트 (external style sheet)

CSS를 별도 파일(.css)로 분리하고, HTML에서 <link> 태그로 연결하는 방식입니다.

사용 태그: <link>

자주 같이 쓰는 속성:

rel: 연결 관계 지정(스타일시트면 “stylesheet”)
href: CSS 파일 경로

형식:

<link rel="stylesheet" href="CSS 파일 경로">

정리 포인트
- 장점: HTML과 디자인(스타일)을 분리해서 유지보수에 유리하고, 실무에서 가장 많이 쓰는 방식
- 폴더/경로를 정확히 잡는 게 중요함(HTML 파일 위치 기준으로 연결)

(3) 인라인 스타일 (inline style)

HTML 태그에 style 속성으로 CSS를 직접 작성하는 방식입니다. 선택자 없이 “해당 요소 1개”에만 바로 적용됩니다.

사용 속성: style

형식: <태그 style="CSS 코드">내용</태그>

예시: <h1 style="color:red; font-size:24px">인라인 스타일</h1>

정리 포인트
- 장점: 특정 요소만 급하게 바꿔야 할 때 즉시 적용 가능
- 단점: HTML에 스타일이 섞여서 관리가 어려워지고, 반복되면 유지보수가 힘들어짐(특별한 경우 제외 하고는 지양하는 편)

이슈 로그

CSS 첫날이라 문법 자체는 단순했는데, 중괄호({ }) / 세미콜론(;) / 속성:값 위치를 헷갈리면 바로 적용이 안 돼서 작은 오타가 치명적이라는 걸 느꼈습니다. 또, 실무에서는 왜 외부 스타일 시트를 기본으로 쓰는지도 감이 왔어요. HTML은 구조, CSS는 디자인으로 분리하는 게 확실히 관리가 편할 것 같습니다.

학습단 도서

「코딩 자율학습 HTML+CSS+자바스크립트」

「코딩 자율학습 HTML + CSS + 자바스크립트」(김기수 지음, 길벗)

코딩자율학습단 19기 | 5일차 학습일지 – CSS 첫날: 문법과 적용 방법 3가지