선택자
앞에서 스타일 속성을 적용하는 요소를 '선택자'라고 부른다고 했습니다.
이 선택자는 태그 하나가 될 수 있지만 여러 개의 요소를 묶어 별도의 선택자로 지정할 수도 있습니다.이렇게 하면 일일이 스타일을 지정하지 않고도 스타일을 쉽게 저장할 수 있습니다.
전체 선택자
말그대로 스타일을 모든 요소에 적용할 때 사용합니다.
- 주로 모든 하위 요소에 한꺼번에 스타일을 적용할 때 사용합니다.
- 전체 선택자로는
*를 사용합니다. - 또한 전체 선택자는 문서의 여백이나 글꼴 크기 등 기본 스타일을 초기화할 때 사용합니다.
(예를 들어 웹 문서를 브라우저에 표시할 때 브라우저 창에 바짝 붙지 않도록 문서 내용 바깥 쪽에는
'마진'을 두고 문서 내용 안쪽에는 '패팅'이라는 여백을 두는데 이런 여백 때문에 디자인이 깔끔하지 않을 경우, 전체 선택자를 통해 웹 문서 전체에 마진과 패딩 여백을 0으로 지정할 수 있습니다.)
*{
margin: 0;
padding: 0;
}-마진과 패딩을 0으로 지정
태그 선택자-특정 태그를 사용한 요소에 스타일 적용하기
전체 선택자 다음으로 많은 요소에 스타일을 적용하는 태그 선택자는 특정태그가 쓰인 모든 요소에 스타일을 적용합니다.
- 예를 들어 p선택자를 정의하면 웹 문서의 모든 p요소들 즉 모든 문단에 스타일이 적용됩니다.
웹 문서의 모든 텍스트 단락의 글자크기(font-size)를 12픽셀(px)로 하고 글꼴(font-size)를 '돋음'으로 하겠다면 p태그 선택자를 다음과 같이 정의하면 됩니다.
p{
font-size: 12px; //글자 크기
font-family: 돋음; //글꼴t
}<!DOCTYPE html>
<html lang="ko">
<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>블루베리(Blueberry)</title>
<style>
h2{
color:blue;
}
p{
font-size: 12px;
font-family: 돋움;
margin-left: 20px;
}
</style>
</head>
<body>
<h1>블루베리에 관한 연구</h1>
<h2>블루베리와 향산화 효능</h2>
<p>블루베리는 ...합니다.</p>
<h2>블루베리의 노화</h2>
<p>USDA...발견하였습니다.</p>
</body>
</html>
클래스 선택자 - 특정 부분에 스타일 적용하기
앞에서 살펴본 것처럼 태그 선택자를 지정하면 그 태그가 사용된 모든 요소에 적용됩니다.
그런데 같은 태그라도 어떤 곳에서는 다른 스타일을 사용하고 싶다면 어떻게 해야할까
- 예를 들어 일부 텍스트 단락에만 p태그 선택자가 아닌 다른 스타일을 적용하고 싶을 때 특정부분에만 사용하는것이 클래스 선택자입니다.
- 클래스 선택자는 태그 대신 클래스 이름을 사용하는데 클래스 이름은 나중에 기억하기 쉬운 이름을 임의로 지정하면 됩니다.
- 클래스 이름 앞쪽에는 반드시 마침표(.)를 찍어야 합니다.
(예를 들어 글자 색을 파란색으로 지정하는.bluetext라는 클래스 스타일입니다.클래스 선택자는 class="bluetext"처럼 적용해 어느 태그에서나 사용할 수 있습니다.)
.bluetext{
color:blue; //글자색
}<!DOCTYPE html>
<html lang="ko">
<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>클래스 스타일 적용하기</title>
<style>
.bluetext{
color:blue;
}
</style>
</head>
<body>
<h2 class="bluetext">이지퍼블리싱의 미션</h2>
<p>사람에게 구체적으로 <span class="bluetext">도움</span>을 주는책<br>
우리는 열심히 사는 사람들에게 도움이 되고 싶습니다<br>
</p>
<p class="bluetext">정보의 지름길로 만들어 빠르게 원하는 곳으로....</p>
</body>
</html>
만약 특정 태그에만 클래스 선택자를 적용하고 싶다면 클래스 선택자 앞에 태그 이름을 함께 써서 클래스 스타일을 적용할 수 있습니다.
- 예를 들어 짙은 배경색에 흰 글자로 표시하는 accent라는 클래스 스타일을 만들 때
<h2>태그에만 사용하려면 h2.accent 처럼 태그이름과 클래스 스타일 이름을 하나의 선택자로 사용합니다.
<!DOCTYPE html>
<html lang="ko">
<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>선택자 적용 범위 제한하기</title>
<style>
* {
margin: 20px auto;
}
h2.accent{
background-color:#222;
color:#fff;
padding:5px;
}
.bowntext{
color:brown;
}
.bluetext{
color:blue;
}
</style>
</head>
<body>
<h2 class="accent">"사람을 구체적으로 도와주는 일</h2>
<p>이지스퍼블리싱(주)의 책에는<span class="bowntext">'사람들에게 구체적으로 도움이 되는 책'을 만든다는 출판 가치가 담겨 있스빈다.</span>
</p>
<h2 class="bluetext">이지퍼블리싱의 미션</h2>
<p>사람에게 구체적으로<span class="bluetext">도움</span>을 주는 책<br>
</p>
</body>
</html>
id선택자-특정 부분에 스타일 적용하기
id선택자도 클래스 선택자와 마찬가지로 웹 문서안에 특정 부분에 스타일을 지정할 떄 사용됩니다.
- 마침표(.)대신 # 기호를 사용합니다.
- 클래스 선택자와 사용법이 같다.
- 클래스와 id선택자와의 차이는 클래스 선택자가 문서 안에서 여러 번 적용할 수 있는 스타일인 반면, id 선택자는 문서 안에서 한 번만 적용할 수 있다는 것입니다.
- id 선택자는 중복해서 사용할 수 없기 때문에 주로 문서의 레이아웃과 관련된 스타일을 지정하거나 자바스크립트 프로그램에서 웹 요소들을 구별하기 위해 자주 사용합니다.
문서의 내용 부분을 화면 중앙에 배치하기 위해 내용 부분을
<div id="container">요소로 묶어 놓고, 스타일 시트에서 #container라는 id선택자를 사용해 문서 중앙에 배치하고 점선 테두리를 그리도록 스타일을 정의해보자
<!DOCTYPE html>
<html lang="ko">
<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>id 스타일 적용하기</title>
<style>
#container{
width:600px; //너비
padding:15px; //테두리와 내용 사이의 여백
border:1px dotted gray; //테두리 스타일
}
</style>
</head>
<body>
<div id="container">
<h1>회사 소개</h1>
</div>
</body>
</html> 
그룹 선택자 - 둘 이상 요소에 스타일 적용하기
선택자를 이용해 스타일을 정의하다 보면 여러 선택자에 같은 스타일이 사용하는 경우가 있습니다.
이럴 떄는 쉽표(,)로 구분해 여러 선택자를 나열한 후 스타일은 한번만 정의하면 소스는 간단해 집니다.
예를 들어
<h1>태그를 사용한 제목과<h2>태그를 사용한 제목을 화면 중앙에 정렬하고 싶다면 다음과 같이 스타일을 정의할 수 있습니다.
h1{
text-align:center;
}
h2{
text-align:center;
}은
h1,h2{
text-align:center;
}이렇게 쓸 수도 있습니다.
블로그 이전합니다! https://jyyoun1022.tistory.com/