| 일 | 월 | 화 | 수 | 목 | 금 | 토 |
|---|---|---|---|---|---|---|
| 1 | 2 | 3 | ||||
| 4 | 5 | 6 | 7 | 8 | 9 | 10 |
| 11 | 12 | 13 | 14 | 15 | 16 | 17 |
| 18 | 19 | 20 | 21 | 22 | 23 | 24 |
| 25 | 26 | 27 | 28 | 29 | 30 | 31 |
- 채팅방구현
- Serial
- provider
- 그룹채팅구현
- android pdf viewer
- BLUETOOTH
- Android
- DevExpress
- androidstudio
- Flutter
- 계층형 테이블
- PDFViewer
- erdcloud
- node.js
- node js
- EC2
- MotionLayout
- cloudmessage
- firebase
- AWS
- android studio
- 서버배포
- ERDTool
- 개발일지
- ERD툴
- socket.io
- 암호화
- FCM
- 상태관리
- socket통신
- Today
- Total
nueog
css 정리3 - 상속 본문
1. css 속성 상속
- html
<div class="div1">
<h1> test <h1>
<p> tesst </p>
</div>
-css
.div1{
color: blue;
}
=> div 안의 h1, p 태그는 div 태그의 상속을 받아서 폰트 컬러가 blue로 변함
=> 하지만 속성과 태그에 따라 상속 여부가 달라짐
상속 OK 속성
1) color
2) font-family
3) font-size
4) font-weight
5) line-height
6) list-style
7) text-align
8) visibility
2. 상속 되지않는 속성
<a> 태그!
=> 상속 되게 하려면 해당 속성 값에 inherit 값을 쓰기
ex) in css
.div1 a {
color : inherit;
}
3. CSS 우선 순위
1) 단순 중복
- css
h1{
color: blue;
text-align: center;
}
h1{
color: green;
}
=> 같은 스타일을 입력하게 되면 이전에 나온 스타일을 덮어쓰게 됨.
=> 결과: color: green; text-align: center;
2) 명시도: 같은 요소를 가리키지만 선택자가 다르면, 명시도에 따라 우선순위 결정
- 명시도 계산방법
(1) 인라인 스타일이 가장 우선 순위가 높음.
(2) 선택자에 id가 많을 수록 우선 순위가 높음.
(3) 선택자에 class, attribute, pseudo-class가 많을 수록 우선 순위 높음.
(4) 그 다음은 그냥 요소 또는 가상 요소가 많은 순으로 높음.
ex1) (1*) ul li:first-child a VS (2*) ul li"first-child #link
(1*) 0 (lnline Styles) 0 (IDs) 1 (Classes, attributes, pseudo-classes) 3 (Elements, pseudo-elements)
(2*) 0 (lnline Styles) 1 (IDs) 1 (Classes, attributes, pseudo-classes) 2 (Elements, pseudo-elements)
=> 따라서 ul li:first-child #link 가 스타일로 선택되게됨.
4. CSS의 다양한 단위들
1) px: 절대적인 값 ( 다른 요소의 값에 영향을 받지 않음 )
2) rem: 상대적인 값 -> <html> 태그의 font-size 에만 영향을 받음.
- html{
font-size: 20px;
}
.container{
padding-top: 2rem; /* html의 font-size *2 */
}
3) em: 상대적인 값 -> 자기 자신의 font-size를 기준으로 함./ 자기 자신의 font-size를 따로 정하지 않은 경우, 상위 요소에서 상속받은 값을 기준으로 함.
- html{
font-size: 20px;
}
.container{
padding-top: 2em; /*자기 자신의 font-size를 설정하지 않았으므로 자동으로 html의 폰트사이즈를 상속받음.*/
}
.div1{
font-size: 40px;
padding-top: 2em; /* 자기 자신의 폰트 사이즈 = 40 * 2 = 80px*/
}
4) % : 상대적인 값, 어느 항목에서 쓰이느냐에 따라 다른 기준이 적용됨.
-html
<div class="container"> Codeit <p class="text">Codeit</p> </div>
.container{
font-size: 20px;
}
.text{
font-size: 180%; /* 상위 요소인 container의 font-size * 1.8 = 36px */
}
'Web' 카테고리의 다른 글
| css정리5 - 포지셔닝 / float (0) | 2021.11.19 |
|---|---|
| css 정리 4 - display (0) | 2021.11.17 |
| [web] 코드잇 강좌 리뷰 (0) | 2021.10.22 |
| [Node.js] Node.js와 socket.io로 채팅방 구현 (0) | 2021.08.26 |
| [ASP.NET][Dev Express] 0713 개발 일지 (0) | 2021.07.13 |