본문 바로가기

디지털노마드/HTML과 CSS 강좌

CSS Syntax - CSS 쓰는 방법

CSS Syntax 쓰는 방법

 

CSS 규칙 세트는 선택기와 선언 블록으로 구성됩니다.

선택기는 스타일을 지정할 HTML 요소를 가리 킵니다.

선언 블록에는 세미콜론으로 구분 된 하나 이상의 선언이 포함됩니다.

각 선언에는 CSS 속성 이름과 값이 콜론으로 구분되어 포함됩니다.

여러 CSS 선언은 세미콜론으로 구분되며 선언 블록은 중괄호로 묶습니다.

 

<!DOCTYPE html>
<html>
<head>
<style>
p {
  color: red;
  text-align: center;

</style>
</head>
<body>

<p>Hello World!</p>
<p>These paragraphs are styled with CSS.</p>

</body>
</html>

위와 같이 html 의 head태그안에 선언해줍니다.하지만,웹 페이지를 예쁘게 꾸미기 위해서 사용하는 태그의 길이는 상당히 길어지기 때문에 따로 파일을 분리해서 만든 후 html에서 호출해주는 형식으로 사용합니다.

 

아래 그림과 같이

styles.css 파일을 따로 저장한 후 head태그안에

 

<link rel="stylesheet" href="styles/styles.css"> 라고 쓰고  호출해 줍니다. 

 

간단하지요? 각 태그의 이름값만 알고 있으면 간단하게 호출해서 사용할 수 있습니다. 다음 글에서는 각 태그마다 꾸미는 방법을 알아보겠습니다.