본문 바로가기
TechNical/Front End

CSS관련 잡다

by 강멍멍이 2017. 11. 15.
반응형

ㅇ!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 -> 넘어갈 경우 ... 처리 하거나 잘라 내기

반응형

댓글