728x90
반응형
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* style 태그 : css 코드만 작성할 수 있는 영역을 제공하는 태그 */
/* 태그 선택자(태그명) */
div{
border : 3px solid red; /* 3px 두께에 빨간 실선 */
}
strong{
background-color: blanchedalmond;
}
span{
background-color: aqua;
}
/* 아이디선택자(#) */
#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;
}
/* 콤마(,)를 이용한 여러 선택자 동시 작성 */
#li-1, #li-2, #li-3, #li-4, #li-5{
color : white;
}
/* 클래스 선택자(.) */
.test-1{color:red;}
.test-2{
background-color: aqua;
color:white
}
.aaa{font-weight : bold;} /*글자 굵기 조절 */
@font-face {
font-family: 'SUITE-Regular';
src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2304-2@1.0/SUITE-Regular.woff2') format('woff2');
font-weight: 400;
font-style: normal;
}
/*모든 요소 선택자(*) */
*{
/* 글꼴 크기 */
font-size : 20px;
/* 글꼴 모양 */
font-family : 'SUITE-Regular';
}
</style>
</head>
<body>
<h1>CSS(Cascading Style Sheets)</h1>
<pre>
마크업 언어(HTML)가 실제로 화면에
표시되는 방법(모양,색상, 크기, 스타일..)을 기술하는 언어
(HTML 코드가 화면에 어떤 스타일로 보여질지 지정하는 언어)
W3C(웹 표준 지정 기관)에서 CSS를 표정으로 지정함.
</pre>
<hr>
<h1>CSS Selector(선택자)</h1>
<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 코드;}
</pre>
<!--
DB : 대문자, 띄어쓰기를 _로 표시(MEMbER_NO)
Java : 카멜 표기법(helloWorld)
HTML : 하이픈 표기법(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 코드; }
</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-1">클래스 선택자 테스트7</li>
<li class="test-2 aaa">클래스 선택자 테스트8</li>
<!-- 여러 클래스 작성 시 class 속성 값 순서는 의미 없음
-> 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>
728x90
반응형