[CSS] CSS 개념 정리

midcon 2023. 10. 26. 23:27

CSS 규칙

아래처럼 CSS속성을 하나하나 태그에 넣으려면 반복되는 작업이 너무 많아지므로 CSS 규칙을 정해놓고 사용하는게 편하다.

<div style="color: #272928; background-color: #eeeeee;">
   ...
</div>

CSS 선택자

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

태그 이름

h1, div 같은 태그를 쓰면 그 태그에 해당하는 요소들에 모두 스타일을 적용한다.

예를 들어 모든 h3 태그의 글자 크기를 24px로 하려면 아래와 같이 쓴다.

h3 {
  font-size: 24px;
}

아이디 (id)

#아이디_이름 과 같은 문법으로 쓴다.

아이디는 한 페이지 안에서 중복으로 쓰면 문제가 생길 수 있으므로 유일해야 한다.

예를 들어서 아이디 이름이 hallasan인 태그에 글자색을 넣으려면 아래와 같이 쓴다.

<h3>우도</h3>
<h3 id="hallasan">한라산 국립공원</h3>  // 여기에만 글자색 넣으려고 함
<h3>성산 일출봉</h3>
<h3>군산 오름</h3>

// id 사용법
#hallasan {
  color: #f56513;
}

클래스 (class)

여러 개의 요소에 중복해서 CSS 를 적용할 때 아이디를 쓰면 문제가 생길 수 있기 때문에 클래스를 사용한다.

.클래스_이름 과 같은 문법으로 쓴다.

예를 들어 클래스 이름이 place인 모든 태그에 글자 크기와 굵기를 넣으려면 아래와 같이 쓴다.

// 여러 개의 요소에 중복해서 CSS를 적용하고 싶을 때
<h3 class="place">우도</h3>
<h3 class="place" id="hallasan">한라산 국립공원</h3>
<h3 class="place">성산 일출봉</h3>
<h3 class="place">군산 오름</h3>

// class 사용법
.place {
  font-size: 16px;
  font-weight: 400;
}

절대적인 크기 단위

픽셀 (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%;                     // 퍼센트 사용 -> 160px
}

em

CSS에서 em은 부모 태그 font-size의 크기이다.

예를 들어 부모 태그 글자 크기의 4배를 하고 싶다면, 4em으로 쓴다.

<div id="parent">
  저는 16px입니다.               // 부모 태그
  <div id="child">
    저는 64px로 쓰고싶어요!      // 자식 태그
  </div>
</div>

// em 사용법
#parent {
  font-size: 16px;          // 부모 태그의 크기
}

#child {
  font-size: 4em;           // em 사용 -> 64px;
}

rem

rem은 루트(root) em이라는 의미의 단위이며 CSS에서 rem은 <html> 태그의 font-size 크기이다.

예를 들어 <html> 태그 글자 크기에서 2배를 하고 싶다면, 2rem으로 쓴다.

<html>
  <body>
        저는 18px 입니다.          // body 크기 적용
        <div id="other">
          저는 32px로 쓰고싶어요!  // rem 적용할 영역
        </div>
  </body>
</html>
html {
  font-size: 16px;           // html 크기
}

body {
  font-size: 18px;           // body 크기
}

#other {
  font-size: 2rem;          // rem 적용 -> html 값의 2배 = 2 x 16px = 32px
}