|
스타일 시트 CSS 태그 하위에 클래스, 아이디를 적용하는 방법 |
|
환경: Eclipse Mars |
태그에 스타일 시트를 지정하면 페이지에 있는 모든 태그에 동일한 디자인이 적용됩니다. 만약 특정 태그에만 디자인을 적용하고 싶다면 태그와 클래스, 아이디를 조합해서 선택자를 만들어야 합니다. 이런 선택자는 태그끼리 조합해서 만들 수도 있습니다. 오늘은 태그와 아이디, 클래스를 조합해서 CSS 를 적용하는 방법에 대해 알아 보겠습니다.
▼ 하위 태그에 디자인을 적용하는 방법은 여러가지 입니다. 태그끼리의 조합, 태그와 클래스, 아이디 조합 등 아주 다양한 형태가 가능합니다. 주의할 것은 태그와 태그를 조합할 때 사이에 공백을 둬야 합니다. 태그와 클래스 혹은 아이디 사이에는 “#” 과 “.” 같은 특수문자가 있기 때문에 띄우지 않습니다. 조합 방식은 다음과 같습니다.
|
태그 태그 { 속성1: 값1; 속성2: 값2; } 태그#클래스 { 속성1: 값1; 속성2: 값2; } 태그.클래스 { 속성1: 값1; 속성2: 값2; } 태그 태그#클래스 { 속성1: 값1; 속성2: 값2; } 태그#클래스 태그 { 속성1: 값1; 속성2: 값2; } |
▼ 위의 형태를 참고해서 5가지 CSS 조합을 만들어 보았습니다. 아래에는 5가지 조합의 스타일이 적용될 수 있도록 HTML 을 작성하였습니다. 각 조합이 정확하게 일치하는 태그에만 스타일이 적용되겠죠. 일치하는 선택자가 없다면 자신을 포함하고 있는 컨테이너에 적용된 스타일을 따릅니다.
<!DOCTYPE HTML>
<html>
<head>
<meta charset="euc-kr">
<title>정렬</title>
<style type="text/css">
body {
background-color: #e78e52;
}
div p{ background-color:yellow; }
div.box1{ background-color:limegreen; }
div#box2{ background-color:lightslategray; }
div p#box3{ background-color:blue; }
div#box4 p{ background-color:red; }
</style>
</head>
<body>
<div>
<p>div p 조합에 적용된 스타일</p>
</div>
<div class="box1">
div.box1 조합에 적용된 스타일
</div>
<div id="box2">
div#box2 조합에 적용된 스타일
</div>
<div>
<p id="box3">div p#box3 조합에 적용된 스타일</p>
</div>
<div id="box4">
<p>div#box p 조합에 적용된 스타일</p>
</div>
</body>
</html>
▼ 샘플에 있는 2개의 div 태그에는 어떤 선택자가 적용될까요? 모두 div p 가 적용됩니다. 태그에 대한 선택자를 먼저 찾고 일치하는 것이 없다면 외부의 div 와 class, id 조합을 찾습니다. 이것도 없다면 div 에만 적용된 css 를 찾겠죠.
▼ div p 를 주석 처리 하게 되면 그림처럼 다른 결과를 얻게 됩니다. 첫 번째 div 는 전혀 일치하는 것이 없기 때문에 div { background-color:red; } 을 적용하고, 두 번째는 div 와 class 조합이 일치하는 것이 있기 때문에 div.box1 을 적용합니다.
'웹 프로그래밍 > 스타일시트 CSS' 카테고리의 다른 글
| 스타일 시트 CSS clear 속성, float 기능을 제거하는 방법 (0) | 2018.05.21 |
|---|---|
| 스타일 시트 CSS float 속성, 이미지와 텍스트를 배치 시키는 속성 (1) | 2018.05.11 |
| 스타일 시트 CSS px(pixel) -> em 단위 변환 표 (0) | 2018.04.30 |
| 스타일 시트 CSS 테두리를 지정하는 border 속성 알아보기 (0) | 2018.04.12 |
| 스타일 시트 CSS 글꼴을 적용할 수 있는 font-family 속성 이용하는 방법 (0) | 2018.03.23 |
| 스타일 시트 CSS 태그 요소를 보이게 하거나 숨기는 visibility 속성 알아보기 (0) | 2018.03.03 |
| 스타일 시트 CSS 텍스트, 글자 크기를 조절하는 font-size 사용하는 방법 (1) | 2018.01.31 |
| 스타일 시트 CSS 글자 색을 지정하는 color 속성 사용하기 (0) | 2018.01.23 |
