⭐️ CSS ⭐️
🔥 CSS (Cascading Style Sheets)
사용자에게 문서를 표시하는 방법을 지정하는 언어
CSS Selector
띄어쓰기 허용 X
👉🏻 모든 요소 선택
html... <div> innerText...1 </div> <span> innerText...2 </span>css... * { color: green; }HTML의 모든 요소에 color: green 적용
👉🏻 id 값 선택
html... <div id='hello'> innerText... </div>css... #hello { color: red; }HTML 태그 중 id='hello'인 모든 요소에 color: red 적용
👉🏻 class 값 선택
html... <div class='lee-photer'> innerText... </div>css... .lee-photer { background-color: blue; }HTML 태그 중 class = 'lee-photer' 인 모든 요소에 background-color: blue 적용
html... <div class='first'> innerText...1 </div> <div class='first second'> innerText...2 </div>css... .first.second { style... }HTML 태그 중 class = 'first second'를 모두 포함하고 있는 요소에 스타일 적용
(두 번째 div 요소 선택)
html... <div class='first'> innerText...1 <div class='one'> innerText...2 </div> <div class='two'> innerText...3 </div> </div>css... .first .one { style... }HTML 태그 중 class = 'first'인 요소의 하위 (자식) 요소 중에
class = 'one'인 모든 요소에 style...적용
(두 번째 div 요소 선택)
👉🏻 요소 직접 선택
html... <h1 class='first'> innerText...1 </h1>h1 { style... }HTML 태그 중 모든 <h1> 태그의 스타일 적용
👉🏻 요소 선택
html... <div class='first'> innerText...1 </div> <div class='second'> innerText...2 </div>css... div.first { style... }<div> 태그 중 class = 'first' 인 모든 태그의 스타일 적용
html... <div class='first'> innerText...1 </div> <span class='first'> innerText...2 </span>css... div, span { style... }모든 <div> <span> 태그에 스타일 적용
html... <div class='first'> innerText...1 <span> innerText...2 </span> <span> innerText...3 </span> </div>css... div span { style... }<div> 태그 하위 요소 중 모든 <span> 태그에 스타일 적용
html... <div class='first'> innerText...1 </div> <span> innerText...2 </span> <span> innerText...3 </span>css... .first + span { style... }class='first' 인 태그의 바로 다음 요소 중 <span> 태그에만 스타일 적용
html... <div> innerText...1 </div> <span> innerText...2 </span> <div> <span> innerText...3 <\span> </div>css... div ~ span { style... }<div> 태그 이후에 <div> 태그와 같은 Depth (레벨) 에 있는 모든 <span> 태그에 스타일 적용
👉🏻 속성 선택
html... <div name='one'> innerText...1 </div> <div name='two'> innerText...2 </div>css... [name] { style... }(name) 속성이 있는 모든 태그에 스타일 적용
html... <div name='one'> innerText...1 </div> <div name='two'> innerText...2 </div>css... [name='one'] { style... }(name='one') 속성이 있는 모든 태그에 스타일 적용
html... <div name="one two">innderText...1</div> <div name="one-two">innderText...2</div> <div name="two">innderText...3</div>css... [name~='two'] { style... }(name) 속성이 'two' 이거나, 'two-' 로 시작하는 태그에 스타일 적용
html... <div name="twoone">innerText...1</div> <div name="one">innerText...2</div> <div name="one_two">innerText...3</div> <div name="onetwo">innerText...4</div> <div name="one two">innerText...5</div>css... [name^='one'] { style... }(name) 속성이 'one' 으로 시작하는 태그에 스타일 적용
html... <div name="twoone">innerText...1</div> <div name="one">innerText...2</div> <div name="one_two">innerText...3</div> <div name="onetwo">innerText...4</div> <div name="one two">innerText...5</div>css... [name$='two'] { style... }(name) 속성이 'two' 로 끝나는 태그에 스타일 적용
html... <div name="onetwoone">innerText...1</div> <div name="one">innerText...2</div> <div name="one_two">innerText...3</div> <div name="onetwo">innerText...4</div> <div name="one two">innerText...5</div>css... [name*='two'] { style... }(name) 속성에 'two' 가 포함되어 있는 태그에 스타일 적용
:active 부터 추가
