3가지 CSS 적용 방법
-
inline이 최우선 순위를 가지고, internal과 external은 나중 것이 적용된다.
-
구체적으로 표현하는 것이 우선순위를 가진다.
body > span {
color: red;
}
span {
color: blue;
}이 경우 blue가 나중에 선언되었지만 red가 더 구체적이기 때문에 red가 적용된다.
- 클래스와 id가 동시에 적용될 때는 id가 우선순위를 가진다
/* id selector */
#a {
color: red;
}
/* class selector */
.b {
color: blue;
}<div id="a" class="b">hello world</div>이 경우 id값에 해당하는 value가 적용된다.
inline
html태그 안에 스타일 값을 준다. 최우선 순위이다.
<span style="color:red;">Hello world</span>internal
head안에 스타일 값을 넣어주는 방법.
<head>
<style>
span {
color : red;
}
</style>
</head>external
따로 css파일을 만들어 링크를 걸어주는 방법. 가장 선호하는 방법
// 외부 css파일(external.css)
span {
color : red;
}<head>
<link rel="stylesheet" type="text/css" href="external.css" />
</head>자주 사용하는 CSS property
border, padding과 같이 배치와 관련된 속성들은 상속받아지지 않는다.
color와 같은 그 외 속성들은 상속 받아진다.
body > div {
color: red; /* div 하위 항목에도 모두 적용된다. */
font-size: 15px; /* div 하위 항목에도 모두 적용된다. */
border: 1px solid black; /* body아래 div에만 적용된다. div 하위 항목에는 적용x */
padding: 10px; /* body아래 div에만 적용된다. div 하위 항목에는 적용x */
}- color: 색상을 바꿔줌
color : red;
*#121314: 16진수로 표현- font-size: 글자 크기
font-size: 15px;
*em: 부모 노드의 배수- border: 테두리 선. 상속 받아지지 않는다.
border: 1px solid black;- padding: border 내부. 상속 받아지지 않는다.
padding: 10px;- margin: border 외부. 상속 받아지지 않는다.
margin: 10px;
/*
- 인접한 두 개의 block element가 다른 margin을 가진 경우 큰 값을 가진 margin값이 공유됨
- 인접한 두 개의 inline element가 다른 margin을 가진 경우 각 margin의 합으로 표현됨
*/- background-color: 배경색
background-color: red;Selector
- id selector
#apple {
}- class selector
.apple {
}- 그룹
div, span, #apple {
}- 모든 하위 요소
#container span {
}<div id="container">
<div>
<span>자손</span> /* 적용된다 */
</div>
<span>직계 자손</span> /* 적용된다 */
</div>- 직계 자손 요소만
#container > span {
}<div id="container">
<div>
<span>자손</span> /* 적용x */
</div>
<span>직계 자손</span> /* 적용된다. */
</div>- 섞어 쓰기
div.apple {
}