CSS ( Cascading Style Sheets )

마크업 언어가 실제로 화면에 표시되는 방법 ( 모양, 색상, 크기, 스타일... ) 을 기술하는 언어
( HTML 코드가 화면에 어떤 스타일로 보여질지 지정하는 것 )

CSS Selector ( 선택자 )

Selector란?
현재 HTML 문서 내에서 특정한 요소를 선택하는 문자 또는 문자열.
스타일을 적용하고자 하는 요소를 선택하는 방법

태그 선택자

[ 작성법 ]
태그명 { CSS 코드 }

<style>
	strong {
            background-color: yellow;
        }
</style>

<div>
	<strong>strong 태그에 작성된 내용입니다.</strong>
</div>  

id 선택자 ( #id 속성값 )

HTML문서 내에서 id 속성값이 일치하는 요소를 선택하는 선택자.

[ 작성법 ]
#id 속성값 { CSS 코드 ; }
<!-- # == id -->

/* 아이디 선택자 (#) */
#li-1{ background-color: red; }
#li-2{ background-color: rgb(255, 153, 0); }
#li-3{ background-color: rgb(251, 255, 0); }
#li-4{ background-color: rgb(0, 255, 21); }
#li-5{ background-color: rgb(0, 204, 255); }

<!--
	Java : 카멜 표기법
    DB : 대문자, 띄어쓰기 _ 로 표시
	HTML : 하이픈 표기법 (li-1, class-1) / 언더바 표기법 (li_1, class_1)
-->
<ol>
	<li id="li-1">id 선택자 테스트1</li>
	<li id="li-2">id 선택자 테스트2</li>
	<li id="li-3">id 선택자 테스트3</li>
	<li id="li-4">id 선택자 테스트4</li>
	<li id="li-5">id 선택자 테스트5</li>
</ol>

class 선택자 ( .class속성값 )

HTML 문서내에서 같은 class 속성 값을 가지는 태그를 모두 선택하는 선택자.

[ 작성법 ]
.class속성값 { CSS 코드 ; }
<!-- . == class -->

/* 클래스 선택자(.) */
.test-1{color: red;}
.test-2{color: white; background-color: black;}

.aaa {
	font-weight: bold;
}

<ul>
	<li class="test-1 aaa">클래스 선택자 테스트1</li>
	<li class="test-2">클래스 선택자 테스트2</li>
	<li class="test-1">클래스 선택자 테스트1</li>
	<li class="test-2 aaa">클래스 선택자 테스트2</li>
	<li class="test-1">클래스 선택자 테스트1</li>
	<li class="test-2">클래스 선택자 테스트2</li>
</ul>

모든 요소 선택자 ( * )

모든 요소를 선택하는 선택자

/* 모든 요소 선택자(*) */
	@font-face { /* 웹폰트 추가 */
font-family: 'ARCHISCULPTURE_v200';
src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2303@1.0/ARCHISCULPTURE_v200.woff2') format('woff2');
font-weight: normal;
font-style: normal;
}