지금까지는 HTML로 웹 페이지의 구성을 만들었다면 이제는 드디어 밋밋하던 웹 페이지를 꾸밀 수 있게 되었다. 지금부터는 만들어 둔 웹 페이지를 CSS(Cascading Style Sheets)를 통해 텍스트의 색, 크기, 이미지의 크기 등을 바꿔가며 보기좋게 디자인 해 볼 것이다!!!
선택자{ 스타일 속성 : 속성값; }
선택자 -> 어떤 부분의
스타일 속성 -> 무엇을
속성값 -> 어떻게
=> 즉 어떤 부분의 무엇을 어떻게 바꿀 것인지
예를 들어 밑에 나오는 단락의 글씨를 이텔릭체로, 글자 색은 주황색, 그리고 크기는 25px로 하고 싶은 경우
<style>
#mark{
font-weight: bold;
font-size: 25px;
color: orange;
}
</style>
이렇게 바뀌게 된다!
이런 스타일 시트를 사용하는 방법은 3가지가 존재한다.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title> 내부 스타일 시트 </title>
<style>
p{
text-align: center;
font-size: 32px;
color: blue;
}
</style>
</head>
<body>
<h1> 내부에 스타일 시트를 사용하는 방법 </h1>
<p> 웹 문서 html의 head안에 style태그를 통해 정의한다</p>
</body>
</html>
<link href="외부 스타일 파일 경로" rel="stylesheet" type="text/css">
<h1 style="color:blue"> 여기에 스타일을 적용하고 싶을 떄! </h1>
선택자에는 크게 3가지 종류가 있다고 보면 된다.
태그 선택자
태그 선택자는 특정 태그를 사용한 요소에 스타일을 적용하고 싶은 경우 사용한다.
클래스 선택자
클래스 선택자는 특정 클래스에 대해 즉 특정 부분에 대해 스타일을 적용하고 싶은 경우 사용한다. 이때 클래스 앞에 .을 붙여 적용하는 부분이 클래스임을 알려준다. 클래스는 문서 안에서 여러 번 적용이 가능하다.
아이디 선택자
아이디 선택자는 특정 아이디에 대해 즉 특정 부분에 대해 스타일을 적용하고 싶은 경우 사용한다. 이때 아이디 앞에 #을 붙여 적용하는 부분이 아이디임을 알려준다. 아이디는 문서 안에서 한 요소에만 한 번만 적용이 가능하다.