안녕하세요.
웹아이입니다 :D
스타일의 기본형태
선택자 {속성:값}
p {color:blue;}
여기서 보면
p가 선택자(selector) / color가 속성(attribute) / blue가 속성값(value)
이 되는것입니다.
쉽게 말해 p를 선택해서 color속성에 blue값을 줘라!! 가 되는거에요
한가지 선택자에 여러가지 속성을 적용할 경우,
h2 { font-size:20px; color:purple; }
위와 같이
세미콜론(;)으로 구분하여 나열하면 되요~
그러면 스타일정보를 어디에 기록해두나요?
스타일은 내부스타일시트와 외부스타일시트로 사용할 수 있습니다.
(물론 지난 시간에 말씀드렸듯이 태그 안에 직접 사용도 가능하지만 권장하지 않습니다. )
내부스타일시트
문서안에서 head안에 써 넣는 것입니다.
(꼭 head안에 넣지 않아도 작동은 합니다;; 권장사항입니다.)
<head>
<meta charset="utf-8">
<title>제목</title>
<style>
p {color:blue;}
h2 {
font-size:20px;
color:purple;
}
</style>
</head>
외부스타일시트
외부스타일시트는 문서안에 있는 스타일정보를
별도의 파일로 저장하는 것인데,
내부스타일시트에서 <style>,</style>태그를 제외하고 그 사이의 내용만 복사해서
확장자를 .css로 저장합니다.
그리고 웹문서에서는 <link>태그를 사용해 스타일 시트를 연결합니다.
<link href="외부 스타일시트 파일 경로" rel="stylesheet" type="text/css">
이것을 <head>태그안에
<head>
<meta charset="utf-8">
<title>제목</title>
<link href="style.css" rel="stylesheet" type="text/css"></link>
</head>
이해가 되셨나요??
잘 안되신다구요??
그렇다면 댓글로 남겨주세요. 함께 해결해 보아요!!
'Web > CSS' 카테고리의 다른 글
| CSS의 선택자_세번째 | 속성선택자_가상클래스 (4) | 2018.07.21 |
|---|---|
| CSS의 선택자_두번째 | 속성선택자 (215) | 2018.07.16 |
| CSS의 선택자_첫번째 | 태그를 선택해서 CSS 입히기 (323) | 2018.07.14 |
| CSS의 기초_세번째(CSS 적용 우선순위) (973) | 2018.07.11 |
| CSS의 기초_첫번째 (4) | 2018.07.04 |