케스캐이딩
3가지규칙 -저작자
-명시도(1.id 2.클래스 3.p태그안의 a태그 4.a태그, !important(아주 강함)
-우선순(같은조건에 마지막이 우선)
overflow_float
위드 오토는 부모만큼
헤이트 오토는 컨텐츠만큼
overflow: hidden(넘어가면 안보여줌 주어진영역만큼만 보여줌)
visible(넘어가도 보여줌)
position
-static: 기본
-relative: 상대적(현재위치로부터.)(한번에 두값만 사용, 레프트탑. )
left:50%는 브라우저 창의 50%이동,
margin:0 auto;, left:50px;은 0 auto중간에서 50px이동
-absolute: 절대적(네가지 값사용 가능)
right:0; bottom:0;은 맨왼쪽 맨아래
right:50px; 맨 왼쪽에서 50px 이동(float은 밀지만 absolute는 밀지않고 그냥 이동)
-fixed: 고정적
position을 사용해야만 쓸수 있는 속성: top, right, bottom, left, z-index
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
[class^="box"]{border:1px #f00 solid; position:absolute;}
.box1{background: #F00; left:0; right:50%; top:0; bottom:50%;}
.box2{background: #0F0; left:50%; right:0; top:0; bottom:50%;}
.box3{background: #00F; left:0; right:50%; top:50%; bottom:0;}
.box4{background: #000; left:50%; right:0; top:50%; bottom:0;}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
<div class="box4"></div>
</body>
z-index 높낮이 결정.
z-index:1; z-index:2; 릴렉티브 앱솔루트 픽스드 다 가능
<cite></cite>
상품 제목같은경우에 쓰임. h1,h2쓰기에 맞지않을때
선택상자로 영역잡은후 포토샵 알트s t-> 개별로 조정가능
엔터치고 컨트롤 쉬프트 c-> 컨트롤 엔-> 컨트롤 v
'publishing > css' 카테고리의 다른 글
| css, float . 스프라이드기법, multiple background, vendor prefix css0120 (0) | 2017.02.24 |
|---|---|
| css, class, id, boxmodel, margin, padding, background, gradation (0) | 2017.02.24 |
