우선, 시작하기 전에 오늘 사용할 예제 코드를 소개한다.
설명을 쉽게 하기 위해 CSS는 쓰지 않고 html style 방식으로 대체한다.
위의 코드에 디자인을 넣기 위해서는, 원하는 tag를 지정하여 그 tag에만 style을 부여하여야 할 것이다.
이러한 경우 지정을 하기 위해서는 각 tag에 이름값을 지정해야 원하는 설정을 넣을 수 있을 것이다.
이러한 이름값들을 tag, class, id 로 지정할 수 있다.
위의 예시 코드에서 보면, style 태그 안에 3개 종류의 선언 방식이 있다.
아래에서 하나씩 설명한다.
TAG
style 요소의 맨 위를 보면 div라는 목표에 해당 속성들을 지정한 것을 볼 수 있을 것이다.
(속성들은 나중에 설명할 것이니, 지금은 중요하게 보지 않아도 된다.)
html을 공부하고 왔다면, html 태그 중 <div>라는 것이 있는 것을 알 것이다.
위의 코드는, 해당 html 파일 안의 모든 <div> 태그에 해당 속성을 부여하는 것이다.
해당 방식을 쓸 때 주의해야 할 점은, 모든 <div> 태그에 속성을 부여함으로
자칫하면 디자인이 전체적으로 망가질 우려가 있다.
이를 방지하기 위해, 아래의 방법을 쓴다.
Class
두번째 Style 요소를 보면, .class_1 이라는 목표에 해당 속성을 지정하였다.
html의 두번째 <div>를 보면 class="class_1"이라는 속성이 포함된 것을 볼 수 있을 것이다.
class는 보통 여러 태그에 동일한 효과를 넣기 위해 사용는 것이며,
style 요소에서 선언할 때는 앞에 . (dot)을 붙이고 그 뒤에 클래스명을 입력하는 것으로 선언한다.
ID
마지막으로, 첫번째 <div> 속성을 보면 id가 지정된 것을 볼 수 있을 것이다.
class와 비슷한 속성으로 이해하면 된다. 단지, id는 html 파일 내에서 특정 태그를 찾기 위한 것임으로,
한 번 밖에 쓰지 않을 것임으로 여러 효과를 한번에 지정하고 싶다면 class 속성을 이용하는 것이 좋다.
style 요소에 선언할 때는 앞에 #을 넣고 그 뒤에 아이디명을 입력하는 것으로 선언한다.
우선순위
위의 설명을 듣고 나면, 한 가지 의문점이 생길 것이다.
tag 선언을 통해 <div>의 style을 선언했는데, 나머지 id / class 선언문도 <div>에 선언됬다.
그럼 이때 무엇이 제일 우선시되냐가 문제일 것이다.
답은, 선언자에 따라 우선순위가 다르다는 것이다.
우선 순위는 아래와 같다.
!important > ID > CLASS > TAG
위와 같이 ID에 속성이 지정되었을 경우, 같은 속성을 선언한 CLASS, TAG는 무효화되고 ID에 선언된 값만 표시된다.
그런데, 뜬금없이 !important라는 것이 튀어나왔다.
!important
!important는, 선언자 우선 순위와는 관계 없이, 0순위 우선권을 부여하여 표시할 수 있게 하는 속성이다.
위의 코드를 해석하자면, .class_1의 속성이나 #id_1의 속성으로 인해 div 속성이 묻혀야 되는 것이 정상이지만,
!important 선언으로 순위를 깨버리고 최상위권으로 올라가 id / class 속성을 무효화 시킨 것이다.
이상으로 선언자들을 알아보았다.
다음 포스팅부터는 직접적인 style 속성들에 대해 알아볼 것이다.
'Develop > Web' 카테고리의 다른 글
| [HTML / CSS] CSS calc() - 수치 연산 (0) | 2018.12.15 |
|---|---|
| [HTML / CSS] CSS기초 3. CSS 연결 (link / import) (2) | 2018.11.22 |
| [HTML / CSS] CSS 기초 1. Style과 CSS (0) | 2018.11.22 |
| [WEB / JQuery] Click 이벤트가 작동하지 않을 때 대처 (0) | 2018.11.10 |
| [WEB / Javascript] IE9 이하 브라우저 html5 지원 (0) | 2018.11.08 |