CSS (Cascading Style Sheets)
(cascading 상속이나 종속을 의미)
마크업 언어(HTML)가 실제로 화면에 표시되는 방법(모양, 색상, 크기, 스타일 ...)을 기술하는 언어
(== HTML 코드가 화면에 어떤 스타일로 보여질지 지정하는 것)
CSS Selector (선택자)
Selector란?
현재 HTML 문서 내에서 특정한 요소를 선택하는 문자 또는 문자열
스타일을 적용하고자 하는 요소를 선택하는 방법
태그 선택자
현재 HTML 문서 내에 같은 태그를 선택하는 선택자
작성법 : 태그명 { css 코드; }
html 코드
<div>
<strong>strong 태그에 작성된 내용입니다.</strong>
<br>
<span>span 태그에 작성된 내용입니다.</span>
<ul>
<li>
<strong>strong 태그에 작성된 내용입니다.</strong>
</li>
<li>
<span>span 태그에 작성된 내용입니다.</span>
</li>
</ul>
</div>css 코드
head 태그 안 style 태그에 작성
(css 코드만 작성할 수 있는 영역을 제공하는 태그)
<head>
<style>
div {
border: 3px solid red; /* 3픽셀 두께의 빨간 실선 */
}
strong {
background-color: yellow;
}
span {
background-color: pink;
}
</style>
</head>
id 선택자
HTML 문서 내에서 id 속성값이 일치하는 요소를 선택하는 선택자 (id는 식별자 역할, HTML 내에서 중복 안됨)
(# == id)
작성법 : #id속성값 { css 코드; }
html 코드
<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>css 코드
#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; }
class 선택자
HTML 문서내에서 같은 class 속성값을 가지는 태그를 모두 선택하는 선택자
(. == class)
작성법 : .class속성값 { css 코드; }
클래스 속성 안에서 띄어쓰기로 2개의 클래스 작성 가능
html 코드
<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>css코드
.test-1 { background-color: black; color: white;}
.test-2 { color: red; }
.aaa { font-weight: bold; }
모든 요소 선택자 (*)
작성법 : * { css 코드; }
폰트 정의
@font-face {
font-family: 'WarhavenB';
src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2312-1@1.1/WarhavenB.woff2') format('woff2');
font-weight: 700;
font-style: normal;
}모든 글에 폰트 적용
* {
font-family: 'WarhavenB';
font-size: 20px;
}font-family : 글꼴 모양
적용된 폰트
언어에 따른 띄어쓰기 표기법
Java : helloWorld 카멜 표기법 (낙타봉 표기법)
DB : 대문자, 띄어쓰기 _로 표시 SELECT*FROM DUAL; MEMBER_NAME
HTML : 하이픈 표기법 (li-1, class-1) / 언더바표기법 (li_1, class_1)
