Coding Diary.

(CSS코딩일기) CSS 기본 개념 정리 본문

Coding/HTML&CSS

(CSS코딩일기) CSS 기본 개념 정리

life-of-nomad 2023. 2. 27. 13:21
728x90
반응형
CSS의 기본개념을 정리해보겠습니다.

1. CSS 규칙

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

2. CSS 선택자

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

1) 태그 이름 

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

h3 {
    font-size: 24px;
}

2) 아이디(id)

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

<h3>우도</h3>
<h3 id="hallasan">한라산 국립공원</h3>
<h3>성산 일출봉</h3>
<h3>군산 오름</h3>
#hallasan {
     color: #f56513;
}

3) 클래스(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;
}

3. 색상 단위

1) 색상 이름

red, green, yellow 같은 영어로 된 색상 이름입니다. 세세한 색 표현이 어려워서 자주 쓰지는 않습니다.

2) 색상 코드

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

#FFFF00

3) RGB

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

rgb(255, 255, 0)

4) RGBA

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

rgba(255, 255, 0, 0.5)

4. 절대적인 크기 단위

1) 픽셀(px)

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

5. 상대적인 크기 단위

1) 퍼센트(%)

부모 태그의 크기에 상대적으로 지정할 때 씁니다. 예를 들어서 부모 태그의 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%;
}

2) em

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

<div id="parent">
  저는 16px 입니다.
   <div id="child">
      저는 64px 이에요!
   </div>
<div>
#parent {
    font-size: 16px;
}

#child {
    font-size: 4em;
}

3) 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;
}
728x90
반응형
저작자표시

'Coding > HTML&CSS' 카테고리의 다른 글

(CSS코딩일기) 배경이미지 넣기, 그라디언트 넣기  (0) 2023.03.02
(CSS코딩일기) 텍스트 스타일링  (0) 2023.02.27
(CSS코딩일기) 글자색 한번에 바꾸기, 클래스로 글자크기 조절하기, 파일 따로 저장하기  (0) 2023.02.24
(CSS코딩일기) 이미지와 본문 크기, 여백 조절하기  (0) 2023.02.20
(CSS코딩일기) 글 정렬하기  (0) 2023.02.20
'Coding/HTML&CSS' Related Articles more