CSS 선언의 적용 순서
1) 중요도
결정은 중요성으로 결정하며 1단계가 최우선으로 적용됨
1단계 사용자 스타일 시트가 최우선 ( ex. 저시력자, 색약자 개인 고대비 설정)
--> 2단계 제작자가 만든 스타일 중 !important가 붙은 스타일
----> 3단계 제작자가 만든 일반 스타일
-------> 4단계 기본적인 브라우저 스타일 시트
하나의 요소에 여러 스타일이 적용될 경우 어떤 스타일로 만들어지나?
cf. 범위로 볼 때는 id < class < 태그로 태그(p, ...)가 가장 크다.
2) 적용 범위
1위 인라인 스타일 - 특정 위치만 스타일 적용, 태그 안에 스타일 적용
<span style = "속성:속성값"> </span>
2위 id스타일 - #기호
3위 class 스타일 - . 기호
4위 태그 스타일
더보기
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<meta http-equiv='X-UA-Compatible' content='IE=edge'>
<meta name='viewport' content='width=device-width, initial-scale=1'>
<title>외부 스타일로 만들기</title>
<!-- <link rel='stylesheet' type='text/css' media='screen' href='css/style2.css'> -->
<style>
*{
font-family : 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Gradnde', 'Lucida Sans Unicode' , 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
font-weight : bold;
}
.a1{
font-family: Verdana, Geneva, Tahoma, sans-serif;
font-weight: 800;
font-size:25px;
color:crimson;
}
#id{
font-size: 40px;
color:lightseagreen;
}
p{
font-family : Georgia, 'Times New Roman', 'Times', serif;
font-weight: lighter;
font-size: 2em;
}
section{
width: 500px;
padding: 15px;
border: 3px solid gray;
}
</style>
</head>
<body>
<div id= "container">
<section>
<h2 style = "font-size: xx-large;"> Who am I? </h2>
<!--클래스는 태그보다 우선순위 높음. 어디에 작성했는지와 상관없이 태그보다 먼저 뜸-->
<p class ="a1"> 클래스는 다른 <span style="color:gold"> 태그보다 순위 높음</span> <p id = "id"> id가 class보다 순위 높음</p> <p class ="a1">재미있습니다.</p>
<!-- <p class = "a1" style = "color : darksalmon"> 프런트 앤드</p> -->
</section>
</div>
</body>
</html>
3) 스타일 상속
스타일 시트에서는 자식 요소에서 별도로 스타일을 지정하지 않으면 부모 요소에 있는 스타일 속성들이 자식 요소로 전달되는 것
*** 주의
스타일의 모든 속성이 부모 요소에서 자식요소로 상속되는 것은 아니다.
배경색과 이미지는 스타일이 상속되지 않음.
더보기
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<meta http-equiv='X-UA-Compatible' content='IE=edge'>
<meta name='viewport' content='width=device-width, initial-scale=1'>
<title>외부 스타일로 만들기</title>
<script src = "prefixfree.min.js"></script>
<link rel='stylesheet' type='text/css' media='screen' href='main.css'>
<style>
.box {
position: absolute;
left:50px;
top:70px;
width: 100px;
height:60px;
background: #fff;
border:2px solid green;
text-align: center;
line-height: 60px;
}
/* 마우스올리면15도회전*/
.box:hover{ /*prefixfree.min.js 파일 가지고 있다가 쓰면 모든 브라우저에 같은 css 적용 가능. 밑에 적을 필요 없음*/
/* -webkit-transform: rotate(15deg);
-moz-transform: rotate(15deg); 모질라
-o-transform: rotate(15deg); 오페라
-ms-transform: rotate(15deg); 마소 */
transform: rotate(15deg); /*이 태그가 먹히면 이것만 쓰면되는데, 브라우저마다 안되는 게 있으면 위처럼 따로 써줌*/
}
</style>
</head>
<body>
<div class ="box">
Mouse Over
</div>
</body>
</html>
디자인을 일관성있게 적용하려면 CSS 속성에 브라우저 접두사 붙여야하나,
자바스크립 파일을 이용하여 매번 브라우저 접두사를 붙이지 않고도 편리하게 CSS3 속성을 사용할 수 있다.
'FRONT-END > CSS' 카테고리의 다른 글
| 선택자 총정리 (0) | 2021.05.04 |
|---|---|
| Web 구현 중 기능 정리 (0) | 2021.04.24 |
