🎨CSS 개요, CSS 선택자 1
CSS (Cascading Style Sheets) : 마크업 언어(HTML)이 실제로 화면에 표시되는 방법(모양, 색상, 크기, 스타일 ...)을 기술하는 언어
(== HTML 코드가 화면에 어떤 스타일로 보여질지 지정하는 것)
cf) cascading ➡️ 위에서 아래로 흐르는
상속이나 종속을 의미
CSS Selector (선택자)
Selector란?
- 현재 HTML 문서 내에서 특정한 요소를 선택하는 문자 또는 문자열
- 스타일을 적용하고자 하는 요소를 선택하는 방법
태그 선택자
- 현재 HTML 문서 내에서 같은 태그를 선택하는 선택자
⭐작성법⭐
태그명 { css코드 ; }
🔎예시
<head>
<style>
div {
border : 3px solid red;
/* 3px 두께의 빨간 실선*/
}
strong {
background-color: yellow;
}
span {
background-color: pink;
}
</style>
</head><body>
<div>
<strong> strong 태그에 작성된 내용입니다. </strong>
<br>
<span>span 태그에 작성된 내용입니다.</span>
<ul>
<li>
<strong>strong 태그에 작성된 내용입니다</strong>
</li>
<li>
<span>span 태그에 작성된 내용입니다</span>
</li>
</ul>
</div>
</body>
id 선택자
- HTML 문서 내에서 id 속성값이 일치하는 요소를 선택하는 선택자
⭐작성법⭐
#id속성값 { css코드 ; }
💡 #== id
🔎예시
목표 : "li-1"에 background 주기
<head>
<style>
#li-1 { background-color: red; }
#li-2 { background-color: orange; }
#li-3 { background-color: yellow; }
#li-4 { background-color: green; }
#li-5 { background-color: blue; }
</style>
</head><body>
<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>
</body>
⭐주의) id 속성은 식별자 역할이기 때문에 하나의 HTML에 하나의 고유 id만 사용해야 함
➡️ class처럼 사용금지
class 선택자
- HTML 문서 내에서 같은 class 속성값을 가지는 태그를 모두 선택하는 선택자
- 하나의 그룹을 만든다고 생각하면 됨
- 똑같은 클래스를 갖고 있으면 모두 적용
⭐작성법⭐
.class속성값 {css 코드 ; }
💡. == class
🔎예시)
<head>
<style>
.test-1 {
background-color: black;
color: white;
}
.test-2 {
color: red;
}
.aaa {
font-weight: bold;
}
</style>
</head> <body>
<ul>
<li class="test-1 aaa">클래스 선택자 테스트</li>
<li class="test-2">클래스 선택자 테스트</li>
<li class="test-1">클래스 선택자 테스트</li>
<li class="test-2 aaa">클래스 선택자 테스트</li>
<li class="test-1">클래스 선택자 테스트</li>
</ul>
</body> 
💡 이미 지정되어 있는 다른 class가 있을 경우 띄어쓰기하고 나열
모든 요소 선택자 (*)
- 모든 요소를 선택하는 선택자
⭐작성법⭐
*{css 코드 ;}
🔎예시)
목표 : 전체 폰트 변경
<head>
<style>
@font-face {
font-family: 'KNUTRUTHTTF';
src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2312-1@1.1/KNUTRUTHTTF.woff2') format('woff2');
font-weight: normal;
font-style: normal;
}
/* 폰트 룰을 만든 것 */
* {
/* font-family : 글꼴 모양 지정 */
font-family: 'KNUTRUTHTTF';
/* font-size : 글꼴 크기 */
font-size: 20px;
}
</style>
</head>
