<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>01_CSS 개요, 기본 선택자 1</title>
<style>
/* style 태그 : CSS 코드만 작성할 수 있는 영역을 제공하는 태그*/
/* CSS 주석 */
/* 태그 선택자(태그명) */
div{
border: 3px solid red; /* 3px 두께의 빨간 실선 */
}
strong{
background-color: yellow; /* 배경색 노란색 */
}
span{
background-color: pink;
}
/* 아이디 선택자(#) */
#li-1{background-color: red;}
#li-2{background-color: orange;}
#li-3{background-color: lemonchiffon;}
#li-4{background-color: yellow;}
#li-5{background-color: green;}
/* 콤마(,)를 이용한 여러 선택자 동시 작성 */
#li-1,#li-2,#li-3,#li-4,#li-5{
color: white;
}
/* 클래스 선택자(.) */
.test-1{ color: red; }
.test-2{ color:white; background-color: black;}
.aaa{font-weight: bold;}
/* 모든 요소 선택자(*) */
@font-face { /* 웹 폰트 추가 */
font-family: 'CookieRun-Regular';
src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/CookieRun-Regular.woff') format('woff');
font-weight: normal;
font-style: normal;
}
*{
/* 글꼴 크기 */
font: size 20px;
/* 글꼴 모양 */
font-family: 'CookieRun-Regular';
}
*{
margin:0;
padding:0;
}
</style>
</head>
<body>
<h1>CSS(Cascading Style Sheets)</h1>
<pre>
마크업 언어(HTML)가 실제로 화면에 표시되는
방법(모양, 색상, 크기, 스타일...)을 기술하는 언어.
-> HTML 코드가 화면에 어떤 스타일로 보여질지 지정하는 언어
W3C(웹 표준 지정 기관)에서 CSS를 표준으로 지정함.
</pre>
<hr>
<h1>CSS Selector</h1>
<pre>
Selector란?
현재 HTML 문서 내에서 특정한 요소를 선택하는 문자 또는 문자열
스타일을 적용하고자 하는 요소를 선택하는 방법.
</pre>
<hr>
<h3>태그 선택자</h3>
<pre>
현재 HTML 문서 내에 같은 태그를 선택하는 선택자
<strong>[작성법]</strong>
태그명{
CSS 코드;
}
</pre>
<div>
<strong>strong 태그에 작성된 내용입니다.</strong>
<br>
<span>span 태그에 작성된 내용입니다.</span>
<ul>
<li>
<strong>strong 태그에 작성된 내용입니다.</strong>
</li>
<li>
<span>span 태그에 작성된 내용입니다.</span>
</li>
</ul>
</div>
<hr>
<h3>id 선택자(#id속성값)</h3>
<pre>
HTML 문서 내에서 id 속성값이 일치하는 요소를 선택하는 선택자.
(중요!) id 속성값은 페이지 내에서 유일해야한다!
-> 중복되는 id 속성값이 있으면 안된다.
[작성법]
#id속성값{
CSS 코드;
}
# == id
</pre>
<!--
Java : 카멜 표기법 (helloWorld)
DB : 대문자, 띄어쓰기 _ 로 표시 (MEMBER_NO)
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>
<hr>
<h3>class 선택자(.class속성값)</h3>
<pre>
HTML 문서 내에서 같은 class 속성 값을 가지는 태그를 모두 선택하는 선택자
[작성법]
.class속성값{
css코드;
}
. == class
</pre>
<ul>
<li class="test-1">클래스 선택자 테스트1</li>
<li class="test-2">클래스 선택자 테스트2</li>
<li class="test-1">클래스 선택자 테스트3</li>
<li class="test-2">클래스 선택자 테스트4</li>
<li class="test-1">클래스 선택자 테스트5</li>
<li class="aaa">클래스 선택자 테스트 6</li>
<!-- 여러 클래스 적용 -->
<li class="aaa test-2">클래스 선택자 테스트7</li>
<!-- 여러 클래스 작성 시, 클래스 속성값 순서는 의미 없음
다만 style 태그 css코드 작성 순서에 따라 다름 -->
<li class="test-1 test-2 aaa">클래스 선택자 테스트 9</li>
<li class="test-2 test-1 aaa">클래스 선택자 테스트 10</li>
</ul>
<hr>
<h3>모든 요소 선택자(*)</h3>
<pre>
(단독 또는 다른 선택자와 함께 사용 가능한 선택자로)
모든 요소를 선택하는 선택자
</pre>
</body>
</html>
ha lee :)