CSS 복습
CSS 우선적용순위
xxxxxxxxxx<html><head><style> #my-box .text{ color: black } .black{ color: red } .important-black{ color: red !important }</style></head><body> <div id="my-box"> <div class="text">My text 1</div> <div class="text black">My text 2</div> <div class="text important-black">My text 3</div> </div></body></html>
- 속성 값 뒤에
!important가 붙여진 속성 - HTML에서 직접
style를 지정한 속성 #id로 지정한 속성.클래스.추상클래스로 지정한 속성태그이름으로 지정한 속성- 상위 객체에 의하여 지정된 속성
float 사용시 태그 중간에 입력될 경우
clear를 써주어 태그 중간에 나타는 문제나, 상위 태그의 높이가 사라지는 경우를 방지한다.
xxxxxxxxxx<div class="box-container"> <div class="box" style="float: left">박스1</div> <div class="box" style="float: right">박스2</div> <div style="clear: both"></div></div><div>박스 아래에 나타나야 하는 내용</div>
'Front-end' 카테고리의 다른 글
| React - 동적인 시계 컴포넌트 구현 (0) | 2018.10.08 |
|---|---|
| React - HTML상에서 클라이언트 렌더링이 안될때 (0) | 2018.10.08 |
| React 시작 (0) | 2018.10.03 |
| Node js - 이벤트기반 비동기 I/O 처리 (2) | 2018.09.07 |
| Electron - File Handling (0) | 2018.09.07 |
댓글