CSS

CSS란?

sue24 2020. 3. 13. 20:58

Cascading Style Sheet의 줄임말으로

HTML 요소를 화면에 어떻게 보여줄 지를 서술합니다.

대개 외부 파일로 작성하여 html의 head에서 import합니다.

<link rel="stylesheet" href="css파일_이름.css">

외부 파일로 작성하지 않고 head에서 style태그로 작성하거나

<head>
  <style>
    h1 {
      color: #ff00d4;
    }
  	#id-example {
    	background-color: rgba(255, 255, 255, 0.8);
   	}
  	.class-example {
  		text-align: center;
  	}
  </style>
 </head>

해당 html 요소에서 인라인으로 스타일을 넣어줄 수도 있습니다.

<h2 style="color: #03381d;">Inline CSS text color</h1>

css 문법

선택자 {요소: 값; 요소: 값;}

선택자는 스타일을 주고 싶은 html 요소를 말합니다.

선택자로는 요소 이름, id, class가 기본적으로 쓰입니다.

선택자에게 주고 싶은 스타일을 {} 안에 넣어주는데

주고 싶은 스타일 요소의 이름: 스타일 값;의 형태여야 합니다.

이 때, 요소: 값;이 하나의 선언이 됩니다.

{} 안에는 여러 개의 선언이 들어갈 수 있는데 각 선언은 ;로 구분됩니다.