본문 바로가기
CSS

CSS 기본 개념 정리

by 프로랑 2023. 10. 18.
728x90

CSS 규칙

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

CSS 속성을 하나하나 태그에 넣기보다는 CSS 규칙을 정해 놓고 사용하는 걸 권장합니다.

 

CSS 선택자

규칙에서 요소를 선택하는 데 사용하는 부분입니다.

태그 이름

h1, div 같은 걸 쓰면 그 태그에 해당하는 요소들에 모두 스타일을 적용합니다. 예를 들어서 모든 h3 태그의 글자 크기를 24px로 하려면 아래와 같이 씁니다.

h3 {
  font-size: 24px;
}

아이디 (id)

맨 앞에 샵을 붙여서 #아이디_이름과 같은 문법으로 씁니다. 참고로 아이디는 한 페이지 안에서 중복으로 쓰면 안 됩니다. 예를 들어서 아이디 이름이 hallasan인 태그에 글자색을 넣으려면 아래와 같이 씁니다.

<h3>우도</h3>
<h3 id="hallasan">한라산 국립공원</h3>
<h3>성산 일출봉</h3>
<h3>군산 오름</h3>

#hallasan {
  color: #f56513;
}

클래스 (class)

아이디는 여러 개의 요소에 중복해서 쓸 수 없기 때문에 클래스를 사용합니다. 맨 앞에 마침표를 붙여서 .클래스_이름과 같은 문법으로 씁니다. 예를 들어서 클래스 이름이 place인 모든 태그에 글자 크기와 굵기를 넣으려면 아래와 같이 씁니다.

<h3 class="place">우도</h3>
<h3 class="place" id="hallasan">한라산 국립공원</h3>
<h3 class="place">성산 일출봉</h3>
<h3 class="place">군산 오름</h3>

.place {
  font-size: 16px;
  font-weight: 400;
}

색상 단위

색상 이름

red, green, yellow 같은 영어로 된 색상 이름입니다. 세세한 색 표현이 어려워서 자주 쓰지는 않으니까 이런 게 있구나 정도만 알고 넘어갑시다.

색상 코드

샵(#)으로 시작하는 여섯 글자의 코드인데요. 빨강, 초록, 파랑 값을 0 ~ 255 사이 정수로 표현한 다음, 이걸 16진수로 만들어서 각각 두 글자씩, 총 여섯 글자를 연속으로 써놓은 값입니다. 예를 들어서 노란색은 아래와 같이 씁니다.

#FFFF00

RGB

빨강, 초록, 파랑 값을 우리가 평소에 쓰는 10진수로 써서 색상을 나타냅니다. 빨강, 초록, 파랑은 0 ~ 255 사이 정수 값입니다. 예를 들어서 노란색은 아래와 같이 씁니다.

rgb(255, 255, 0)

RGBA

빨강, 초록, 파랑, 알파 값을 순서대로 써서 색상을 나타냅니다. 빨강, 초록, 파랑은 0 ~ 255 사이 정수 값이고, 알파는 0 ~ 1 사이의 소수 값입니다. 알파 값은 1에 가까울수록 불투명해지고, 0에 가까울수록 투명해집니다. 예를 들어서 반투명한 노란색은 아래와 같이 씁니다.

rgba(255, 255, 0, 0.5)

절대적인 크기 단위

픽셀 px

절대적인 단위입니다. 화면을 표시하는 기준이 되는 크기입니다.

상대적인 크기 단위

퍼센트 %

부모 태그의 크기에 상대적으로 지정할 때 씁니다. 예를 들어서 부모 태그의 height의 절반 값을 쓰고 싶다면, height: 50%처럼 쓸 수 있습니다.

<div id="parent">
  저는 높이가 320px입니다.
  <div id="child">
    저는 높이가 160px이에요!
  </div>
</div>

#parent {
  background-color: #A655ED;
  height: 320px;
}

#child {
  background-color: #6942D6;
  height: 50%;
}

em

em은 전통적으로 인쇄술에서 대문자 M의 크기를 나타내는 단위입니다. CSS에서 em은 부모 태그 font-size의 크기인데요. 예를 들어서 부모 태그 글자 크기의 4배를 하고 싶다면, 4em처럼 쓰면 됩니다. 아래 예시에서 #child는 #parent의 자식인데요, #parent의 글자 크기가 16px이기 때문에 4em이라고 하면 16px * 4 = 64px이 됩니다.

<div id="parent">
  저는 16px입니다.
  <div id="child">
    저는 64px이에요!
  </div>
</div>

#parent {
  font-size: 16px;
}

#child {
  font-size: 4em;
}

rem

rem은 루트(root) em이라는 의미의 단위입니다. CSS에서 rem은 <html> 태그의 font-size 크기입니다. 예를들어서 <html> 태그 글자 크기에서 2배를 하고 싶다면, 2rem이라고 쓰면 됩니다. 아래 예시에서 #other는 글자 크기가 2rem인데요. <body>는 18px이지만 <html>은 16px이기 때문에 16px * 2 = 32px이 됩니다.

<html>
  <body>
        저는 18px 입니다.
        <div id="other">
      저는 32px이에요!
        </div>
  </body>
</html>

html {
  font-size: 16px;
}

body {
  font-size: 18px;
}

#other {
  font-size: 2rem;
}

CSS를 작성하다 보면 코드에 설명을 적고 싶을 때가 있습니다. 예를들어서 .zzim-button 이라는 클래스를 만들었는데, 코드를 처음 보는 사람들은 이게 어디에 쓰이는지 잘 모를 수도 있고, 내가 작성한 코드라도 한참 뒤에 본다면 헷갈릴 수 있으니까요. 이럴 땐 ‘코멘트'라는 걸 사용하면 됩니다.

코멘트 문법

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

코멘트는 /* 로 시작해서 */ 로 끝나는 코드인데요. 코드를 읽는 사람들을 위한 거고, 실행에는 아무런 영향을 주지 않습니다.

/*
  코멘트 확인 CSS
  v1.5.0
*/

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

이런 식으로 코멘트는 여러 줄로 쓸 수도 있고, CSS 규칙 안에도 들어갈 수 있습니다.

 

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

코멘트는 실행에 영향을 주지 않으니까 얼마든지 사용할 수 있는데요. 코멘트를 너무 많이 달아도 읽기 어려운 코드가 됩니다. 그럼 언제 코멘트를 달아야 할까요? 저는 아래처럼 생각해보는 걸 추천드릴게요.

  1. CSS 선택자를 쉽게 이해할 수 있도록 고쳐 본다.
  2. 그래도 이해가 어려울 거 같으면 코멘트를 단다.

사실 앞에서 본 코드에서 .zzim-button은 .wishlist-button이라고 이름을 바꿀 수 있는데요. 이렇게 하면 클래스 이름만 봐도 어떤 것인지 대충 짐작할 수 있기 때문에 굳이 코멘트를 달지 않아도 될 거 같네요.

/*
  코멘트 확인 CSS
  v1.5.0
*/

.wishlist-button {
  font-size: 24px;
  padding: 8px; /* 임시로 정한 값 */
}
728x90
저작자표시

'CSS' 카테고리의 다른 글

CSS 스타일 우선순위 정리 (Cascading)  (0) 2023.10.19
CSS 선택자 정리  (1) 2023.10.19
CSS의 Display 정리  (1) 2023.10.19
CSS 패딩과 마진 내용 정리  (0) 2023.10.18
CSS 배경 관련 속성 정리  (0) 2023.10.18

관련글

티스토리툴바