1.css란
html을 꾸미는 것
html이 뼈대라면 css는 피부라고 할 수있다.
head부분에 stlyle을 선언후 그안에 사용
|
<head> <link rel="stylesheet" type ="text/css" herf ="css파일주소"> (내부에서 할 때는 쓸 필요 없다.) <style> ..... </style> </head> |
css소스가 저장된css파일을 가져와서 쓸때
link태그
link rel = "stylesheet"
type = "text/css" : text파일css확장자로 된 것을 쓰겠다.
href : 파일 주소 (여러 파일을 불러왔을때 같은 이름이 있으면 마지막 파일의 마지막 코드로 작동)
link rel ="stylesheet" type="text/css" href = "../CSS/sample.css"
css
선택자 { 스타일 속성들}
ex) p {
border : 1px solid red;
background : black;
color : white;
} ----> 해당 페이지p태그들이 빨간 외곽선, 배경색 검정, 글자색 흰색으로 나타난다.
*: 모든 요소 선택자
*{ 속성; 속성2;} 모든태그의 스타일 지정
*{color : tomato;}
태그명{ } : 해당 태그들만 적용
p{color : turquoise;}
.클래스명 { }: 같은 클래스를 가진 태그끼리 묶어서 변경시킨다.
아이디명은 중복 불가능하지만 클래스명은 중복이 가능하다.
띄어쓰기시 .단어로 각각 묶을 수있다.
class = ~123 !!!! #### = .~123 //.!!!! //.#### --> 띄어쓰기 되서 포함 되있는 것들이 변경된다.
#아이디{} : 아이디를 찾아서 적용, 선택자 부분에 아이디 중첩가능
단 아이디자체는 중복값(같은 이름)이 불가능하다. (페이지에 한번만 사용 가능)
#id2,#id3{
color : black; }
#id4{
background: wheet;
color: blue;
}
태그 [찾을 속성 기호 값]{ } 각각의 기호에 따라 해당하는 것들을 가진 값을 찾아 변경
ex) div[name = name2]{ (name이 name2인것들 찾아서 변경)
background: black;
}
div[class *=dic]{
background :tomato;
}
기호별 의미 (= , ~=, |= , ^= , $=, *=)
= : 속성의 값이 같을 떄
~= : 특정 단어를 속성 값으로 가질 때(띄어쓰기된 이름 기준 구분)
ex) class~=test --> class = "test abcd qwer" --> O
--> class = "test1234" -->X
|= : 속성값이나 속성값- 으로 시작하는 요소를 선택
ex) h1[title |= "abc"]
abc -> o
abc-xyz ->o
abc xyz ->x
^= : 속성 값이 특정 단어로 시작할 때
단어 기준이 아니라 문자열기준, abc xyz 나 abc-xyz둘다 시작된다.
$= : 속성 값이 특정 단어로 끝날 때
단어 기준이 아니라 문자열 기준 xyz abc나 xyz-abc 둘다 선택된다.
*= : 속성 값이 특정 단어를 포함 할때
단어 기준이 아니라 문자열 기준으로 판단. 속성 값이 있으면 다 선택된다.
xyz abc bdf, xyz-abc-bdf
'CSS' 카테고리의 다른 글
| 폰트관련 스타일 (0) | 2019.12.28 |
|---|---|
| css 선택자 조건2 (0) | 2019.12.27 |
| css 선택자 조건1 (0) | 2019.12.27 |
| css의 순위 (0) | 2019.12.25 |
