1mo.dev

다크 모드

CSS 규칙과 주석 ​

CSS 규칙이 어떻게 생겼는지, 스타일을 어디에 두는지, 그리고 코드에 코멘트(주석)를 다는 방법까지 CSS를 쓰기 위한 가장 기본적인 문법을 모았습니다.

CSS 규칙과 스타일-내용 분리 ​

HTML 태그 안에 style="color: red;"처럼 직접 스타일을 박아 넣을 수도 있지만, 이렇게 하면 태그마다 스타일이 흩어져서 나중에 색 하나 바꾸려 해도 페이지 전체를 뒤져야 합니다. 그래서 CSS는 내용(HTML)과 스타일(CSS)을 분리하는 걸 기본 원칙으로 삼습니다. 코드가 나뉘어 있으면 고치기도 편하고, 따로 저장하고 공유하기도 좋습니다.

CSS 규칙 = 선택자 + 선언 ​

css
h3 {
  color: #ffffff;
}
  • h3 : 선택자(selector) - "어떤 요소에 적용할지"
  • color: #ffffff; : 선언(declaration) - "어떤 스타일을 적용할지"

선언은 항상 속성: 값; 형태로, 콜론과 세미콜론이 짝을 이룹니다.

스타일을 어디에 둘까 ​

처음엔 HTML 문서 안에 <style> 태그를 두고 그 안에 CSS를 쓰는 게 편합니다. 하지만 코드가 많아지면 별도의 파일(예: style.css)로 분리하는 게 일반적입니다. 파일 이름이 꼭 style.css일 필요는 없습니다.

html
<link rel="stylesheet" href="style.css" />

<style> 태그 안에 있던 내용을 이 파일로 옮기고, HTML에서는 <link> 태그로 불러오기만 하면 됩니다. 저장하고 새로고침하면 스타일이 그대로 적용됩니다.

TIP: 개발자 도구로 확인하기 ​

크롬 개발자 도구에서 요소를 선택하면 Styles 탭에 그 요소에 적용된 모든 CSS 규칙이 나옵니다. 선택자 위에 마우스를 올리면 화면에서 어떤 요소가 선택되는지도 바로 확인할 수 있습니다. CSS를 공부할 때 감으로만 짐작하지 말고, 항상 개발자 도구로 실제 적용 상태를 확인하는 습관을 들이면 좋습니다.

CSS 코멘트 달기 ​

코멘트 문법 ​

css
/* 찜하기 버튼 */
.zzim-button {
  font-size: 24px;
  padding: 8px;
}

코멘트는 /*로 시작해서 */로 끝나는 부분입니다. 코드를 읽는 사람(미래의 나 포함)을 위한 메모일 뿐, 실행에는 아무런 영향을 주지 않습니다.

css
/*
  마켓 코드잇 CSS
  v1.5.0
*/

/* 찜하기 버튼 */
.zzim-button {
  font-size: 24px;
  padding: 8px; /* 임시로 정한 값 */
}

여러 줄로 쓸 수도 있고, 이렇게 규칙 안 특정 줄 옆에 짧게 붙일 수도 있습니다.

코멘트는 언제 다는 게 좋을까 ​

코멘트는 실행에 영향이 없으니 얼마든지 써도 되지만, 너무 많으면 오히려 읽기 어려운 코드가 됩니다. 이런 순서로 판단해보는 걸 추천합니다.

  1. 먼저 선택자 이름을 이해하기 쉽게 고쳐본다.
  2. 그래도 이해가 어려울 것 같으면 그때 코멘트를 단다.

예를 들어 위 코드의 .zzim-button은 .wishlist-button으로 이름만 바꿔도 무슨 버튼인지 짐작이 됩니다.

css
.wishlist-button {
  font-size: 24px;
  padding: 8px; /* 임시로 정한 값 */
}

이름을 잘 지어서 코드 자체가 설명이 되면, 굳이 코멘트를 달지 않아도 됩니다. 코멘트는 "이름만으로는 설명이 부족할 때" 쓰는 보조 수단으로 생각하면 됩니다.

정리 ​

개념한 줄 요약
CSS 규칙선택자로 대상을 정하고, 선언으로 스타일을 적는다
스타일-내용 분리HTML과 CSS를 나누면 고치기도, 공유하기도 편하다
코멘트/* */로 감싸며 실행엔 영향 없음, 이름으로 설명 안 될 때만

참고: 개인 Notion 학습 노트