CSS 기본 문법 및 사용 방법
CSS 기본 문법
선택자 {
속성명 : 속성값;
}
선택자 : 어떤 요소에 스타일을 적용 할지 에 대한 정보
{중괄호} : 선택한 요소에 적용할 스타일을 정의하는 영역
속성명 : 어떤 스타일을 정의하고 싶은지에 대한 정보 (색상 , 크기 등)
속성값 : 어떻게 정의하고 싶은지에 대한 정보
CSS 기본 문법 사용 예
p {
color: red;
}
선택자 : p 태그에 스타일을 적용하겠다
{중괄호} : 이 안에 p태그에 대한 스타일을 정의하겠다
속성명 : color를 정의하겠다 , 이건 글자색을 의미한다
속성값 : red로 정의하겠다 . 빨간색 글자를 원한다
주석
사람에게는 보이지만 , 컴퓨터(웹브라우저)에게는 보이지 않는 코드
주로 코드에 대한 메모를 남기기 위한 용도로 사용된다
HTML에 CSS를 더하려면
HTML 문서에 CSS 문서 (코드)를 적용하고자 할 떄는 다음과 같은 방식 들을 사용할 수 있다
- 인라인 스타일 : 태그에 직접 기술하기
- 스타일 태그 : 스타일시트를 위한 태그를 추가하여 기술하기
- 문서 간의 연결 : 스타일시트 문서를 따로 작성하여 HTML 문서와 연결하기
인라인 스타일
태그에 style 속성을 추가하여 요소에 직접적으로 스타일을 정의하는 방식
따라서 , 선택자는 필요없다
웹 콘텐츠와 스타일시트를 분리하기 위해서는 사용하지 않는 편이 좋다
서로 역할이 다른 코드를 분리하여 관리해야 유지보수 하기 편하다
<p style="color: blue;">
글자를 파랗게 만들어줘
</p>
스타일 태그
HTML 문서에 <style></style> 태그를 추가하여 그 안에 CSS 코드를 작성할 수 있다
html의 head 태그안에 위치한다
<style>
p {
color: red;
}
</style>
문서 간의 연결
확장자가 *.css인 스타일시트 파일을 생성해 그 안에 CSS 코드를 작성하고 HTML 문서에 이를 연결해 준다
이때 , <link> 태그를 사용한다
<link href="./style.css" rel="stylesheet">
- href : 연결하고자 하는 외부 소스의 url을 기술하는 속성
- rel : 현재 문서(HTML)와 외부 소스의 연관 관계를 기술하는 속성
즉 , 내가 연결하고자 하는 문서와 현재 문서가 어떤 관계에 있는지 지정한다
<link> 태그는 HTML 문서의 <head></head> 내부에서 사용해야 한다
인라인 스타일 실습 코드
<style="속성명 : 속셩값;">
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>HTML 문서</title>
</head>
<body>
<p style="color: blue;">
HTML 문서를 준비하고, 에디터로 여신 다음, 내용을 작성하고 브라우저로 확인해주세요.
</p>
</body>
</html>
style이라는 html 태그를 추가하는 방식 실습 코드
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>HTML 문서</title>
<style>
p {
color: red;
font-size: 32px;
}
</style>
</head>
<body>
<p> <!-- style="속성명: 속성값;"-->
HTML 문서를 준비하고, 에디터로 여신 다음, 내용을 작성하고 브라우저로 확인해주세요.
</p>
</body>
</html>
문서 간의 연결 실습 코드
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>HTML 문서</title>
<style>
p {
color: red;
font-size: 32px;
}
</style>
</head>
<body>
<p> <!-- style="속성명: 속성값;"-->
HTML 문서를 준비하고, 에디터로 여신 다음, 내용을 작성하고 브라우저로 확인해주세요.
</p>
</body>
</html>
내용 정리
- css 코드는 선택자 , 중괄호 영역 , 속성명 , 속성값 등으로 구성된다
- css 코드에도 주석을 사용할 수 있다
- css 코드를 HTML 문서에 적용하기 위해서는 인라인 스타일 , 스타일 태그 , 외부 문서 연결 등의 방식을 사용해야 한다