CSS 정의
HTML 돌아보기
- 태그로 이루어져 있음. <h1> 이런 것.
- 태그에 이름을 붙일 일이 있다면..
- ID를 이용 : id 이름 앞에 #을 씀 (ex : id 이름이 name일 때, #name)
- class를 이용 : class 이름 앞에 .을 씀. (ex : 이름이 name일 때, .name)
- 태그 안에 태그가 들어가면? 상속 관계라 표현.
CSS 정의
selector {
attribute : style;
}
- 선택자 : 태그, ID, class 이름 등을 가짐. 해당 태그들을 일괄적으로 선택한다는 의미.
- 속성 : 선택된 태그에 줄 속성.
- 스타일 : 특정 속성의 값.
직접 예시 보기!
다음 중 h1 태그의 글자 색만 빨간색으로 만들어라.
<h1> Hello World! </h1> <h2> Hello World!! </h2>
h1 { color : red; }
다음 중 <div> 안에 있는 h1의 글자 색만 초록색으로 만들어라
<div> <h1> A La Volonté Du Peuple! </h1> </div> <h1> 영어는 넘나 어렵다. </h1>
div > h1 { color : green; }
특정 태그 안의 것만 정하려면, 태그명 > 선택할 태그를 이용하라.
id가 name인 태그는 빨간색, class가 name인 태그는 파란색 글자로 바꾸어라.
<h1 id="name">Hello ID!</h1> <h1> Hello World! </h1> <h1 class="name"> Hello Class! </h1>
#name { color : red; } .name { color : blue; }
- <h1>, <h2> 모두 핑크색으로 글자를 바꾸어라.
<h1> This is h1 tag. </h1> <h2> This is h2 tag. </h2>
h1, h2 { color : hotpink; }
여러개를 한번에 지정하고 싶으면 쉼표를 이용하라.
CSS 사용하기
- <style> 사용하기.
<head> <style> tag { attr : style; } </style> </head>
- <link> 사용하기.
<head> <link type="text/css" rel="stylesheet" href="locations/file.css"> </head>