CSS - 기본1 (css 구조, 우선순위, 상속)
CSS - 기본1
1. CSS 구조
span {
color : red;
}- span : selector(선택자)
- color : property
- red : value
2. CSS 사용 방법
첫번째 방법 - inline 방식
<p style="border:1px solid gray;color:red;font-size:2em;">
<p style> 을 통해 꾸며줄 수 있다.
두번째 방법 - internal 방식
<head>
<style>
p {
font-size : 2em;
border:1px solid gray;
color: red;
}
</style>
</head>
<body>
<div>...</div>
</body>
head에서 <style> 을 선언하여 스타일을 꾸며줄수 있다.
세번째 방법 - external 방식
<link rel="stylesheet" href="파일명.css"/>
따로 css파일을 만들어 참조하는 방식
3. css 우선순위
inline > internal > external
만약 internal과 중복됬다면 external은 적용이 안된다.
4. css 색깔 입히기
-test.html
<div id="a" class="b">
text....
</div>
-test.css
#a{
color : red;
}
.b{
color : blue;
}
div{
color : green;
}
1. html에서 원하는 곳에 class이름을 만든다.
2. css에서 선택자를 적고 색깔을 입힌다.
5. 상속관계
<div>
<ul>
<li>a</li>
<li>b</li>
<li>c</li>
</ul>
</div>
-서로간 관계
div 부모 ul부모
ul 자식 li자식
-첫번째 관계
div(부모) - color 변경
- font-size 변경
||
∇
ul(자식), li(자식) - 부모와 같이 변경됨
-두번째 관계
div(부모) - border(테두리) 변경
- padding(magin) 변경
||
∇
ul(자식), li(자식) - 부모와 같이 변경 안됨
결론
사이즈,색깔 변경은 자식까지 변경됨
border, padding 등은 부모만 변경됨
6. css 적용 되는 순서
첫번째
-만약 이름이 같다면 나중에 것이 실행 된다.
두번째
-만약 구체적 명칭을 썼다면 그 해당하는 이름이 실행 된다.
세번째
-id 값은 #id명
-class 값은 .class명
-element 값은 명칭(ex - div{})
-만약 동일한 곳을 가리킨다면, #id가 먼저이다
(id > class > element)
7. css 하위 요소 선택 방법
첫번째 방법 - 공백선택
위 그림처럼 #jisu span div div li
이런 식으로 선택할수 있다.
두번째 방법 - ">" 선택
위 그림처럼 #jisu > span > div > div > li
이런 식으로 선택 할 수 있다.
세번째 방법 - 자식이 많을 때
위그림처럼 #jisu > p:nth-child(2)
이런식으로 선택 할 수 있다.
=>"두번째 단락입니다"가 변경된다.(자식 숫자는 1부터시작)