CSS강좌 / 태그에 클래스 속성을 지정하여 선택자 사용
위의 소스와 똑같은데 hello korea만 빨강으로 표현되게 해봅시다.
즉, 같은 태그라도 그 중에 특정 태그만 스타일을 적용시키는 방식인데요 그렇게 할려면 그 특정태그에 별도의 이름을 부여 해야 합니다.
class="이름" 이라고 적용할 태그 안에 작성합니다. 앞으로 이것은 굉장히 많이 사용 합니다. 그리고 어렵지도 않습니다.
<p class="red">hello korea</p>
위처럼 시작하는 p태그 안에 클래스를 지정하고 이름을 지정 해주면 끝입니다. 위처럼 클래스명을 red로 지정 하였습니다.
그럼 클래스 선언을 했을경우 스타일 시트에는 다음과 같이 선언 하면 됩니다.
.클래스명{css값}
.red{color:red}
즉 점을 찍고 클래스명 그후 {스타일 시트 요소}
아래의 소스를 작성하여 테스트 해보도록 합시다. 클래스의 특징은 하나의 이름을 여러번 사용가능 하다는 점입니다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>클래스를 선택자로 사용</title>
<style>
.red{color:red}
</style>
</head>
<body>
<p>hello world</p>
<p>hello usa</p>
<p class="red">hello korea</p>
<p>hello japan</p>
<p>hello germany</p>
<p>hello france</p>
<h1>hello france</h1>
</body>
</html>
결과는 아래와 같이 hello korea만 색상값이 빨강으로 표현되었습니다.
text red2
클래스를 여러번 사용할 수 있다는 것은 다른 p태그에도 class="red"를 적용해도 무관하다는 것을 의미합니다.
이번엔 hello japan도 빨간색으로 만들어 보도록 하겠습니다. 클래스명 앞에 .붙이는게 약속입니다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>클래스를 선택자로 사용</title>
<style>
.red{color:red}
</style>
</head>
<body>
<p>hello world</p>
<p>hello usa</p>
<p class="red">hello korea</p>
<p class="red">hello japan</p>
<p>hello germany</p>
<p>hello france</p>
<h1>hello france</h1>
</body>
</html>
html 태그는 한정되어 있지만 그 태그를 써야 하는 일은 문서량에 따라 엄청나게 달라집니다.
하지만 같은 태그에 똑같은 스타일을 적용한다면 자유도가 많이 떨어지므로
같은 태그라도 클래스명을 따로 선언해 주어 각자 위치와 기능에 맞게 해주어야 합니다.
즉 css에서 클래스를 사용하는 경우는 굉장히 많습니다.
'홈페이지제작 > CSS' 카테고리의 다른 글
| CSS에 텍스트(글씨)를 꾸미는 방법에 (0) | 2017.11.15 |
|---|---|
| [CSS강좌] 태그만 선언되게 하는 방법 /아이디를 선택자 사용 (0) | 2017.11.14 |
| [CCS강좌] CSS 셀렉터(선택자) 사용하는 법 (0) | 2017.11.14 |
| CSS3 / div 태그 속성값과 그 활용예제 (0) | 2017.09.25 |
| [CSS3] 기초 메뉴만들기 floaat를 기반으로 (0) | 2017.09.07 |
itworldkorea
IT korea가 세상(world)을 변화시킨다.