브라우저마다 적용되는 스타일이 다르므로 브라우저별로 지원하는 스타일을
맞게 설정해주어야 한다. 스타일의 속성 앞에 브라우저 구분 이름을 입력해주면
해당 브라우저 속성만이 실행한다.
| 접두사 | 설명 |
| -webkit- | 웹킷 방식 브라우저(사파리,크롬) |
| -moz- | 게코 방식 브라우저(모질라, 파이어폭스) |
| -o- | 오페라 브라우저 |
| -ms- | 마이크로소프트 인터넷익스플로러 |
구조적 선택 기능
가상 클래스에 not을 입력하면 선택한 태그 이외의 태그들을 선택할 수 있고 nth-child(n)를
입력하여 여러 개의 항목 중 특정 항목에만 스타일을 지정할 수 있다. n에 even을 입력하면
짝수 번째, odd를 입력하면 홀수 번째 항목에 스타일을 적용할 수 있다.
| *:not(태그) | 태그를 제외한 모든 내용을 선택 |
| nth-child(n) | 항목 중 n번째 항목을 선택 |
| nth-last-child(n) | 항목 중 끝에서부터 항목을 선택 |
| nth-of-type(n) | 유형이 같은 항목을 선택 |
| nth-last-of-type(n) | 항목 중 끝에서부터 유형이 같은 항목을 선택 |
ex)
<style>
/*
* 링크가 설정된 요소를 제외한 모든 태그에 스타일이 적용된다.
*/
*:not(a){
font-weight:bold;
color:red;
}
/*
* 리스트 중 홀수 번째 목록은 글자색이 빨간색으로 표시되고
* 두 번째 목록은 파란색으로 표시된다.
*/
li:nth-child(odd){
color:red;
}
li:nth-child(2){
color:blue;
}
</style>
</head>
<body>
<li>ddddd</li>
<li>ddddd</li>
<li>ddddd</li>
<li>ddddd</li>
<li>ddddd</li>
<li><a href="ddddd">ddddd</a></li>
<li><a href="ddddd">ddddd</a></li>
<li><a href="ddddd">ddddd</a></li>
</body>
배경에 그라데이션 만들기
배경에 선형 또는 원형의 그라데이션을 설정할 수 있다. 브라우저마다 사용하는 코드방식이 다르므로 브라우저별로 설정해주어야 한다.
background-webkit-gradient( 유형, 시작위치, from(색상), to(색상) );
* 유형 : 선형(linear) 또는 원형(radial)을 지정한다.
* 시작 위치, 끝 위치 : x와 y 좌표를 백분율로 입력하거나 left, bottom 처럼
영문으로 그라데이션의 시작과 끝 위치를 설정한다.
* from(색상) : 그라데이션 시작 색상을 설정한다.
* to(색상) : 그라데이션 끝 색상을 설정한다.
ex)
<style>
/*
* 높이 150 픽셀 크기에 왼쪽에서 오른쪽으로 검정색에서 흰색으로 그라데이션이 채워진다.
*/
div{
height:150px;
border:1px solid #000000;
background: -webkit-gradient(linear, left center, right center, from(#000000), to(#ffffff));
}
</style>
</head>
<body>
<div >test </div>
</body>
상자의 모서리를 부드럽게 처리하기
도형의 테두리를 둥글게 처리해주는 border-radius 속성이 추가되었다.
ex) <style>
/*
* 도형의 테두리를 둥글게 처리해주는 border-radious 속성이 추가되었다.
*/
div{
background-color:red;
color:yellow;
line-height:20px;
width:300px;
height:50px;
padding:10px;
border-radius:10px;
}
</style>
</head>
<body>
<div >test </div>
</body>
다단표시
column 속성을 사용하면 다단을 손쉽게 나눌 수 있다.
ex)<style>
/*
* 2개의 단으로 나누고 단 간격은 10픽셀, 구분선은 검정색 실전으로 표시된다.
*/
div{
border:1px solid #000000;
-webkit-column-count:2;
-webkit-column-gap:10px;
-webkit-column-rule:1px solid #000000;
}
</style>
</head>
<body>
<div >다단테스트입니다.다단테스트입니다.다단테스트입니다.
다단테스트입니다.다단테스트입니다.다단테스트입니다.다단테스트입니다.
다단테스트입니다.다단테스트입니다.다단테스트입니다.다단테스트입니다.
다단테스트입니다.다단테스트입니다.다단테스트입니다.다단테스트입니다.
다단테스트입니다.다단테스트입니다.다단테스트입니다.다단테스트입니다.
다단테스트입니다.다단테스트입니다.다단테스트입니다.다단테스트입니다.
다단테스트입니다.다단테스트입니다.</div>
</body>
(0) 
(0)Posted by 홍반장
