티스토리 뷰
선택자를 배웠으니 css를 사용하는 방법을 배워보도록 하겠습니다.
css셀렉터를 적고 괄호 안에 속성과 값을 적으면 css가 적용됩니다. 속성과 값은 콜론으로 구분하고, 한 가지 효과가 끝나면 세미콜론으로 마무리합니다. 지금의 그림은 <p>태그 전부에 배경색을 검은색으로 바꾸고, 글자색은 흰색으로 바꾼 것입니다.
정리하자면, css셀렉터 { css속성 : 값 ; } 이라는 형태가 됩니다.
그럼 css효과를 가진 문서는 어떤 형태를 가지게 될까요 ?
p{
color : blue;
}
#first {
color : red;
}
.second {
color : green;
}
div span{
background-color: black;
}
css 문서는 위와 같은 형태가 됩니다. 한 페이지를 꾸민다는 것은 많은 css가 필요하게 되고, 위의 소스코드와 같은 형태가 길게 이어지게 됩니다. 그렇다면 몇가지 효과가 동시에 적용된다면 어느 효과를 적용하게 될까요?
캐스캐이딩을 아는 것이 그래서 중요합니다.
캐스캐이딩이란 효과를 적용받는 우선 순위를 나타냅니다.
아래의 소스코드를 주목해보세요.
<style> p{ color : blue; } #first { color : red; } .second { color : green; } </style> <p id="first" class="second third">merry christmas and happy new year!</p>
<style>태그는 <head>태그 안에 넣고, <p>태그는 <body>태그 안에 넣은 뒤에 문서를 실행해 보세요! 무슨 색이 적용되나요 ? 아마 아이디 셀렉터에 적혀있는 색깔이 적용됩니다. 아주 간단한 캐스캐이딩의 예시입니다.
엘리먼트들은 id > class > tag의 순으로 효과의 우선 순위를 적용받습니다.
id셀렉터에 준 값을 지우면 그 다음엔 class에 주어진 color 값이 적용되겠지요 ?
위의 소스코드에서 <p>태그를 보면 2개의 class 값이 있는 것을 볼 수 있습니다. 그럼 <style>태그 안에 .third {color : purple; }라는 값을 추가하면 <p>태그는 무슨 색깔이 될까요 ?
이런 경우엔 나중에 선언된 css효과가 적용됩니다. .third의 선언이 .second의 위에 있는지 아래에 있는지가 중요해 지는 것이죠.
캐스캐이딩이 같은 등급이라면 나중에 선언된 값으로 적용됩니다.
css에 대한 기본 사용법들은 다 배웠으니 다음시간 부터는 많이 쓰이는 속성들을 하나씩 배워보도록 하겠습니다.
공감을 눌러주시면 제작자에게 큰 힘이 됩니다 ^__^
'Frontend-dev > HTML-CSS-JS' 카테고리의 다른 글
| 마진(margin) - 테두리(border) - 패딩(padding) 이란? (0) | 2017.12.27 |
|---|---|
| 자주 사용하는 css의 속성들 (0) | 2017.12.25 |
| CSS 소개와 CSS 선택자 (6) | 2017.12.18 |
| <div>태그와 <span>태그에 id와 class 속성 주기 (0) | 2017.12.14 |
| <input>태그, <a>태그, <ul>태그를 활용한 예시 (1) | 2017.12.13 |