스타일 규칙은 태그뿐만 아니라 웹 문서의어떤 요소에도 적용할 수 있다.
선택자는 웹 문서에서 어느 부분에 스타일을 적용할 지 알려주는 것.
주로 사용하는 선택자를 알아보자
전체 선택자
말 그대로 문서의 모든 요소에 적용할 때 사용.
* { 속성: 값; ... }또한 웹 브라우저의 기본 스타일을 초기화할 때 자주 사용
마진과 패딩 여백을 0으로 지정하는 식의 방식으로 자주 사용.
타입 선택자
특정 태그를 사용한 모든 요소에 스타일을 적용하는게 타입 선택자. 이전 글의 스타일 예시에서 본게 타입 선택자이다
태그명 {스타일 규칙}
클래스 선택자
태그가 같아도 일부는 다른 스타일을 사용하고 싶다면 타입 선택자 만으로는 부족할것이다. 이럴때 사용하는 것이 클래스 선택자이다.
클래스 선택자는 클래스 이름을 사용해서 다른 선택자와 구별한다.
이때 클래스 이름 앞에 마침표를 반드시 붙여야 한다.
.클래스명 {스타일 규칙}클래스 선택자를 사용해 만든 스타일을 클래스 스타일이라고 하는데, 이미 만들어 둔 클래스 스타일을 적용할 때는 태그 안에 class="클래스명"처럼 클래스 속성을 사용해서 지정한다.
요소 하나에 클래스 스타일을 2개 이상 적용하는 것도 가능하다.이때는 공백으로 구분해서 스타일 이름을 적으면 된다.
단락 중간에 일부만 스타일을 적용하려면 <span>태그를 사용하면 된다.
검은 테두리를 그리는 클래스와 배경색을 검게 설정하는 클래스, 글자 색을 하얗게 지정하는 클래스를 활용하는 예제를 살펴보자.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>Html-basic</title>
<link rel="stylesheet" href="testcss.css">
</head>
<body>
<h1 class="border_thin">서울대학교 가는 법</h1>
<p class="bg_black fg_white">서울대 입구역에서 서울대생 전용 셔틀버스 승차, 학생회관에서 하차.</p>
<h1 class="border_thin">고려대학교 가는 법</h1>
<p class="bg_black fg_white">안암역에서 하차, 도보 15분.</p>
</body>
</html>.border_thin{
border: 1px solid #000;
padding: 5px;
}
.bg_black{
background-color: rgb(0, 0, 0);
}
.fg_white{
color: white;
}
id 선택자
클래스 선택자와 마찬가지로 웹 문서의 특정 부분을 선택하여 스타일을 지정할 때 사용한다.
차이점은 마침표 대신 # 기호를 사용하며,
문서에서 한 번만 적용할 수 있다는 점이다.
주로 문서의 레이아웃과 관련된 스타일을 지정하거나, 웹 요소에 자바스크립트 프로그램을 사용하면서 요소를 구별할때 사용한다.
문서 내용이 화면 중앙에 배치되도록 <div id="container"> 요소로 내용을 묶고, 스타일 시트에서 #container를 사용해 스타일을 정의한다. 이 id 선택자로 문서를 중앙에 배치하고 테두리를 그린다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>Html-basic</title>
<link rel="stylesheet" href="testcss.css">
</head>
<body>
<div id="container">
<h1>서울대학교 가는 법</h1>
<p>서울대 입구역에서 서울대생 전용 셔틀버스 승차, 학생회관에서 하차.</p>
<h1>고려대학교 가는 법</h1>
<p>안암역에서 하차, 도보 15분.</p>
</div>
</body>
</html>#container{
width: 500px;
margin: 10px auto;
padding : 10px;
border: 1px solid #000;
}
그룹 선택자
선택자를 이용해 스타일을 정의하다 보면 여러 선택자에서 같은 스타일 규칙을 사용하는 경우가 있다.
이럴 때는 쉼표로 구분해 여러 선택자를 나열한 후 스타일 규칙을 한 번만 정의하면 된다,
선택자1, 선택자2 { 스타일 규칙 }'📁Web Developing > CSS 기초' 카테고리의 다른 글
| II. 텍스트 - 3. 텍스트 관련 스타일 (0) | 2022.06.02 |
|---|---|
| II. 텍스트 - 2. 웹 폰트 사용하기 (0) | 2022.06.01 |
| II. 텍스트 - 1. 글꼴 관련 스타일 (0) | 2022.06.01 |
| I. CCS의 기본 - 3. 캐스케이딩 스타일 시트 (0) | 2022.06.01 |
| I. CCS의 기본 - 1. 스타일과 스타일 시트 (0) | 2022.05.31 |
댓글