FlowerBombs
CSS와 SELECTOR 본문
CSS(StyleSheet)
html로 구성된 페이지 골격에 디자인을 입히는 언어.
Block Level 요소
address |
blockquote |
center |
dir |
div |
dl |
fieldset |
form |
h1~h6 |
hr |
menu |
p |
noframes |
ul / ol / li |
pre |
table / tbody / thead / tr / th /td |
||
Inline Level 요소
a |
abbr |
br |
button |
font |
i |
iframe |
img |
input |
label |
q |
select |
san |
strike |
strong |
sub |
textarea |
u |
치환요소(Inline Level 요소)
img |
input |
object |
select |
textarea |
HTML문서에 CSS 적용 방법
★(1) HTML문서에 의존한다. 특정 HTML에서만 유효.
<head>태그 안에 <style> 태그를 명시하고 그 안에 서술한다.
1 2 3 4 5 6 | <head> <!-- 스타일시트 --> <style [type="text/css"]> ... css 코드 구문... </style> </head> | cs |
★(2) CSS구문만을 별도로 저장한 외부파일을 참조.
<sylte>~</style> 안에 명시하는 CSS 구문을 별도의 파일에 작성해 두고 HTML에서 해당 파일의 경로를 참조한다.
1 2 3 | <head> <link rel="syltesheet" [style="text/css"] href="외부CSS파일의 경로"/> </head> | cs |
(3) HTML태그의 style속성을 활용
거의 사용 안함
1 | <div style="CSS구문"></div> | cs |
CSS 기본 구문 형식
1 2 3 4 5 | selector{ 속성: 값; 속성: 값; ... } | cs |
selector
CSS가 적용될 대상을 지정하는 방법
1. 태그이름--> ex) h1 { color: red; }
2. class : 앞에 점을 포함한 단어명시 (단어는 직접 네이밍한다.)
HTML태그에 class속성으로 단어를 연결(이때는 점은 제외함)
- 태그 종류에 상관 없이 여러번 재사용 가능
1 2 3 | .hello { color: red; } <div class="hello"> </div> | cs |
3. id : 앞에 #을 포함한 단어를 명시(단어는 직접 네이밍한다.)
HTML태그에 id속성으로 단어를 연결(이때는 #은 제외함)
- 하나의 HTML문서 안에서 다른 요소와 중복될 수 없다.
1 2 3 | #hello {color: red;} <div id = "hello"> </div> | cs |
selector 조합하기
1) 구체적으로 서술하기
1 2 3 4 5 6 | // 태그이름 + class / 태그이름 + id --> 특정요소를 자세하게 명시 div.hello div#hello (띄어쓰기 X) | cs |
2) 쉼표로 구분하기 (and의 의미)
1 | div, p, #hello, .world{...} | cs |
3) 가상클래스
HTML요소가 어떤 상황을 직면했을 "때" 적용되는 selector(~~할 때)
1 2 3 4 5 6 7 | a:link { 글자 모양 } <ㅡ 링크에 대한 기본 글자 모양을 적용 a:visited { 글자 모양 } a:hover { 글자 모양 } a:active { 글자 모양 } | cs |
'HTML&CSS > CSS' 카테고리의 다른 글
| 기본셀렉터(selector) (0) | 2019.03.15 |
|---|
