2. CSS 기본 문법 및 사용 방법

CSS 기본 문법

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

• 선택자 : 어떤 요소에 스타일을 적용 할지에 대한 정보
• {중괄호} : 선택한 요소에 적용할 스타일을 정의하는 영역
• 속성명 : 어떤 스타일을 정의하고 싶은지에 대한 정보(색상,크기 등)
• 속성값 : 어떻게 정의하고 싶은지에 대한 정보

Ex)

p{
	color: red;
}

• 선택자 : p태그에 스타일을 적용하겠다.
• {중괄호} : 이 안에 p 태그에 대한 스타일을 정의하겠다.
• 속성명 : color를 정의하겠다. 이건 글자색을 의미.
• 속성값 : red로 정의하겠다. 빨간색 글자.

주석

• 사람에게는 보이지만 컴퓨터에겐 보이지 않는 코드 , 주로 코드에 대한 메모를 남기기 위한 용도로 사용된다.

/* 이 안에 작성하면 주석으로 처리된다 */

HTML에 CSS를 더하려면

• 인라인 스타일 : 태그에 직접 기술하기
• 스타일 태그 : 스타일시트를 위한 태그를 추가하여 기술하기
• 문서 간의 연결 : 스타일시트 문서를 따로 작성하여 HTML 문서와 연결하기

1. 인라인 스타일

<p style="color: blue;">
  글자를 파랗게 만들어줘
</p>

태그에 style 속성을 추가하여 요소에 직접적으로 스타일을 정의하는 방식.
따라서 선택자는 필요없다.
웹 콘텐츠와 스타일시트를 분리하기 위해서는 사용하지 않는 편이 좋다.
역할이 다른 서로의 코드를 따로 관리해야 유지,보수 하기 좋기 때문이다.

2. 스타일 태그

<style>
  /* style 태그 안에는 css 코드를 작성해야 한다 */
  p{ color: red;}
</style>

3. 문서 간의 연결

확장자가 *.css 인 스타일시트 파일을 생성해 그 안에 css 코드를 작성하고, HTML 문서에 이를 연결해줄 수 있다. 이때는 "link"태그를 사용한다.

<link href="./style.css" rel="stylesheet">

• href : 연결하고자 하는 외부 소스의 url을 기술하는 속성
• rel : 현재 문서(HTML)와 외부 소스의 연관 관계를 기술하는 속성

=> "link" 태그는 HTML 문서의 head 내부에서 사용해야 한다!

style.css 문서를 만들어서 html 문서와 연결한 결과이다.