|
스타일 시트 CSS 여러 태그에 스타일을 동시 적용하거나 특정 태그에 적용하는 방법 |
|
환경: Eclipse Mars |
태그나 ID, CLASS 에 스타일을 동시에 적용할 수 있습니다. 동일한 스타일 속성일 경우 여러 군데 반복적으로 작성할 필요는 없겠죠. 쉼표로 태그나 클래스, 아이디를 나열해서 붙여 주시면 됩니다. 아래 샘플을 통해서 사용법을 알아 보겠습니다.
|
1. 여러 태그에 스타일 동시 적용하는 방법 |
▼ 중복되는 스타일 내용을 태그, ID, CLASS 적용하기 위해서는 쉼표를 이용합니다. 쉼표로 적용하고 싶은 만큼 나열 하시면 됩니다. 그리고 태그 뿐만 아니라 ID 와 클래스를 혼합해서 동시에 적용이 가능합니다.
|
<style type="text/css"> #클래스1, #클래스2 { 속성: 값; } .아이디1, .아이디2 { 속성: 값; } 태그1, 태그2 { 속성: 값; } #클래스, .아이디, 태그 { 속성: 값; } </style> |
▼ 아래 샘플은 2개의 클래스와 <p> 태그에 동일한 스타일을 적용한 것입니다. 이렇게 동일한 스타일 값을 쉼표로 연결해서 사용하지 않고 중복해서 적는 다면 복잡하기만 하고 비효율적입니다.
<!DOCTYPE HTML>
<html>
<head>
<meta charset="euc-kr">
<title>정렬</title>
<style type="text/css">
body {
background-color: #e78e52;
}
.box1, .box2, p{
width: 300px;
height: 100px;
border: 2px solid;
margin: 10px;
background-color:yellow;
}
</style>
</head>
<body>
<div class="box1">
첫 번째 스타일
</div>
<div class="box2">
두 번째 스타일
</div>
<p>
세 번째 태그에 적용한 스타일
</p>
</body>
</html>
|
2. 특정 태그에 적용하는 방법 |
▼ 태그와 클래스, 아이디를 동시에 사용하면 특정 태그에만 스타일을 적용할 수가 있습니다. 이것은 아주 유용하며 자주 사용하게 되는 방법입니다. 문법은 다음과 같습니다.
|
<style type="text/css"> 태그이름, #클래스 { 속성: 값; 속성: 값} 태그이름.아이디 { 속성: 값; 속성: 값} </style> |
▼ 예제처럼 태그와 바로 뒤에 클래스명을 넣게 되면 div 에서 class 명이 box1 인 것만 적용이 됩니다. 다른 p 태그에 동일한 클래스 명을 넣었지만 반영이 되지 않습니다. 이렇게 특정 태그에만 클래스나 아이디를 반영하고 싶다면 아래 샘플처럼 사용하시면 됩니다.
<!DOCTYPE HTML>
<html>
<head>
<meta charset="euc-kr">
<title>정렬</title>
<style type="text/css">
body {
background-color: #e78e52;
}
div.box1{
width: 300px;
height: 100px;
border: 2px solid;
margin: 10px;
background-color:yellow;
}
</style>
</head>
<body>
<div class="box1">
특정 태그에 적용된 스타일
</div>
<p class="box1">
같은 아이디를 적용하더라도 반영이 안됨
</p>
</body>
</html>
'웹 프로그래밍 > 스타일시트 CSS' 카테고리의 다른 글
| HTML img 태그 CSS vertical-align 속성으로 이미지 수직 정렬 (0) | 2024.04.16 |
|---|---|
| 스타일 시트 CSS 브라우저 내 위치를 지정하는 left, right, top, bottom 속성 (0) | 2024.02.18 |
| 스타일 시트 CSS vertical-align 속성, inline 요소끼리 수직 정렬 옵션 (0) | 2023.12.01 |
| 스타일 시트 CSS 가상 선택자 after 사용하는 방법 (0) | 2023.03.18 |
| 스타일 시트 CSS width 와 height 속성 사용법 (0) | 2020.01.17 |
| 스타일시트 CSS 마우스오브(Mouseover) 이미지 테두리 적용 (0) | 2020.01.16 |
| 스타일 시트 CSS 가장 기본적인 내용과 스타일을 삽입하는 여러가지 방법 (1) | 2020.01.12 |
| 스타일 시트 CSS 이벤트 마다 적용할 수 있는 가상 클래스 사용하는 방법 (0) | 2020.01.10 |
