CSS 문법 | Notion

CSS 기본 문법

CSS가 추가되며 HTML 파일과 CSS 파일의 혼동이 생길 것이다. 따라서 코드 부분 왼쪽 위에 있는 언어 종류가 CSS인지 HTML인지 잘 확인하기를 바란다.

문법 형식

CSS 문법은 선택자와 선언부로 구분된다.

선택자 : CSS 스타일을 적용할 HTML 태그를 선택하는 영역
선언부 : 선택자에서 선택한 태그에 적용할 스타일을 작성하는 영역으로 중괄호 안에 들어간다. 이 때 여러 스타일을 넣기 위해 세미콜론으로 구분한다.

주석

주석은 다음과 같다.

/* 주석(c언어와 동일) */

CSS 적용

내부 스타일 시트 사용하기

내부 스타일 시트는 HTML 파일 내부에 CSS 코드를 작성하는 방법이다.

<!DOCTYPE html>
<html lang="ko">
 <head>
  <title>hi~~~</title>
  <style>
   h1{
    color:blue;
   }
  </style>
 </head>
 <body>
  <h1>hihihi</h1>
  <h2>bybybye</h2>
 </body>
</html>

Untitled

외부 스타일 시트 사용하기

외부 스타일 시트란 CSS를 작성하는 파일일 별도로 만들어 연결하는 방법이다. 외부 시트의 확장자는 css이다. HTM에 연결하기 위해서는 link 태그를 사용한다.

<!DOCTYPE html>
<html lang="ko">
 <head>
  <title>hi~~~</title>
  <link rel="stylesheet" href="style.css">
 </head>
 <body>
  <h1>hihihi</h1>
  <h2>bybybye</h2>
 </body>
</html>

h1{
 color:red;
}

Untitled