ㅇ!important
CSS는 원래 cascading이 되는데 위치에 따라서 덮어 쓰지만 !important 를 쓰면 최상위 선언한게 재정의 안 되서 안 바뀜
* 테스트 하려면 브라우저 캐쉬 비워가면서 테스트 해야 함
[style.css]
.box {border:3px solid #0f0 !important; margin:3px}
[test.html]
<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>Insert title here</title>
<link rel="stylesheet" href="style.css" type="text/css"/>
<style type="text/css">
.box {border-color:red}
</style>
</head>
<body>
<div id="my1" class="box"> div3 </div>
<div id="my2" class="box"> div4 </div>
<div id="my3" class="box"> div5 </div>
<p class="box">my p</p>
</body>
</html>
ㅇ장치에 따라서 스타일 다르게 하기(스크린, 프린트 할 때 다르게 나옴)
<style type="text/css">
.menu {background-color : #ff0;}
.main {width : 400px ; height : 500px ; border : 10px solid #f00;}
@media print{
.menu {display : none;}
.main {width : 400px ; height : 500px ; border : 10px dashed #00f;}
}
</style>
ㅇ단위
- px는 장치마다 해상도에 따라 크기가 다르게 보일 수 있다.
- %,em 이 상대적인 크기이므로 이 단위를 쓰는게 좋다. 원하는대로 잘 안 나오긴 한다..
ㅇText
- text-overflow : clip | ellipsis -> 넘어갈 경우 ... 처리 하거나 잘라 내기
댓글