Front-End-Web/html+css
제13강_CSS 기본다지기-선택자(Selector)
jsBae
2022. 10. 8. 00:22
1.CSS란 무엇인가?
•CSS는 Cascading Style Sheets의 약자입니다.
•CSS는 HTML 요소가 화면, 종이 또는 기타 미디어에 표시되는 방식을 설명합니다.
•CSS는 많은 작업을 절약합니다. 한 번에 여러 웹 페이지의 레이아웃을 제어할 수 있습니다.
외부 스타일시트는 CSS 파일에 저장됩니다.
2. CSS 구문
•CSS3 규칙은 선택자와 선언 블록으로 구성된다.
•선택자는 스타일을 입힐 특정 HTML Tag를 지정한다.
•선언은 CSS 속성명과 속성값으로 구성됩니다, 이들은 콜론으로 구분한다.
•선언은 세미콜론으로 마무리하며 중괄호로 감싸준다.
3. CSS 선택자
3. CSS 선택자 - HTML 요소 선택자.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>13강 CSS 기본구조</title>
<style type="text/css">
p {color: red;}
</style>
</head>
<body>
<h1 style="color:#00ff00;font-size:20px;">스타일 종류</h1>
<p>1 문단입니다</p>
<p>2 문단입니다</p>
</body>
</html>3. CSS 선택자 - CSS ID 선택기.
§id 선택기는 HTML 요소의 id 속성을 사용하여 특정 요소를 선택합니다.
§요소의 id는 페이지 내에서 고유하므로 id 선택기를 사용하여 하나의 고유한 요소를 선택합니다!
§특정 ID를 가진 요소를 선택하려면 해시(#) 문자와 요소 ID를 차례로 작성합니다.
<!DOCTYPE html>
<html>
<head>
<style>
h2 {text-align:center;color:red;}
#para1 {
font-weight: bold;
color: blue;
}
</style>
</head>
<body>
<h2>css선택자 - id</h2>
<p id="para1">안녕하세요.</p>
<p>문단 2</p>
</body>
</html>3. CSS 선택자 - class 선택자
§class 속성을 갖는 모든 Tag에 스타일 적용한다.
§특정 클래스가 있는 요소를 선택하려면 마침표(.) 문자와 클래스 이름을 차례로 작성합니다.
<!DOCTYPE html>
<html>
<head>
<style>
.center {
text-align: center;
color: red;
}
</style>
</head>
<body>
<h2 class="center">class 선택자</h2>
<p class="center">특정 클래스가 있는 요소를 선택하려면 마침표(.) 문자와 클래스 이름을 차례로 작성합니다.
</p>
</body>
</html>
728x90
반응형