!important란? CSS 코드를 살펴보다보면, 속성값에 !important를 어쩌다 한번쯤은 목격했을 것이라 생각됩니다. !important는 선택자의 우선순위 중에서도 가장 최우선으로 적용하고 싶을 때 사용됩니다. 인라인 스타일, id selector, class selector보다도 최최최최최우선 순위로 CSS를 입히고 싶을 때 사용합니다. 사용 방법은 속성값에 !important만 붙여주면 됩니다. [ CSS 적용 우선순위 ] !important > id > class , 가상클래스 > 요소 [예제] id가 first인 h1 요소들이 있습니다. 어떤 CSS를 적용했든 h1의 첫번째 요소를 파란색으로 입히고자 합니다. begin CSS1 begin CSS2 begin CSS3 begin CSS4..

가상 클래스 선택자란? 가상선택자는 기본선택자 뒤에 :(콜론)을 붙인 가상 클래스를 의미합니다. 선택자중에서 첫번째, 마지막, 짝수, 홀수번째의 요소를 선택하고 싶을때 등 사용한다. [사용방법] 선택자:가상클래스 { property : value } 아래의 h1 태그가 있다고 가정합니다. begin CSS1 begin CSS2 begin CSS3 begin CSS4 begin CSS5 :first-child - 첫번째 요소의 CSS를 변경하고 싶을때 :last-child - 마지막 요소의 CSS를 변경하고 싶을때 /* #0000FF 파란색*/ /* #8A2BE2 보라색*/ /* #FACBBA 살구색*/ /* #FFD700 노란색*/ h1:first-child { color : #0000FF; } h1:l..

지난시간에 "선택자" 에 대해서 공부를 했다면, 본격적으로 자식, 자손, 형제 선택자에 대해서 알아보려고 합니다. [CSS] 선택자 Selector (Type, Class) 1. 선택자 (Selector) 선택자 "Selector"란 말 그대로 선택을 해주는 요소입니다. 1.1 Type선택자 (태그 선택자) [HTML] A선택자1 A선택자2 A선택자3 A선택자4 Type선택자는 태그에 대한 스타일을 지정합니다. a torimaru.tistory.com * 오늘의 예제 /* div = 부모 */ Welcome to Bamtory Blog /* h1 = div의 자식 */ /* ul = div의 자식 */ Sub Content /* h2 = div의 손자, ul의 자식 */ begin CSS1 /* li =..

1. 선택자 (Selector) 선택자 "Selector"란 말 그대로 선택을 해주는 요소입니다. 1.1 Type선택자 (태그 선택자) [HTML] A선택자1 A선택자2 A선택자3 A선택자4 Type선택자는 태그에 대한 스타일을 지정합니다. a태그에 속한 글자들의 폰트 사이즈와 색상을 변경하고싶을 때 아래처럼 선언해주면 됩니다. [CSS] a { font-size: 20px; color: #8492a6; } a 태그를 가진 "선택자"를 선택하여 font-size라는 속성(property)에 20px이라는 속성값(property value)으로 지정합니다. 1.2 Class 선택자 태그안에 class로 지정된 요소들을 선택하는것을 지칭합니다. CSS에서 class의 접근은 .(dot)을 붙이는데, clas..