HTML
2016.02.16 18:34

class 에 대해 알아보자.

조회 수 6605 추천 수 0 댓글 1
?

단축키

Prev이전 문서

Next다음 문서

크게 작게 위로 아래로 댓글로 가기 인쇄 첨부
?

단축키

Prev이전 문서

Next다음 문서

크게 작게 위로 아래로 댓글로 가기 인쇄 첨부

우리가 일반적으로 사용하는 class의 사용방법은 아래와 같다.

 

<style>
.intro {
    color: red;
    text-align: center;
}
.important {
    background-color: yellow;
}
</style>
 
<p>A - paragraph.</p>
<p class="intro">B - paragraph.</p>
<p class="important">C - paragraph.</p>

 

위의 실행 결과는 아래와 같다.

 

class-01.png

 

첫 p는 보통 문단으로 B는 중앙정렬에 붉은색 문자로, C문단은 바탕이 노란색으로 정확히 표기되었다.

 

B와 C는 class를 이용하여 각각에 CSS효과를 추가하였는데 정상적으로 반영되었다.

 

위의 코드를 엄밀히 다시 작성하면 아래와 같다.

 

<style>
p.intro {
    color: red;
    text-align: center;
}
p.important {
    background-color: yellow;
}
</style>
 
<p>A - paragraph.</p>
<p class="intro">B - paragraph.</p>
<p class="important">C - paragraph.</p>


실행 결과는 위의 예제와 완전히 같다.

 

p.intro와 .intro 그리고 p.important와 .important가 같은 방법으로 작동되는 것을 알 수 있다.

 

그러면 p.intro와 .intro는 정말 같은 것인가? 위의 코드를 아래와 같이 수정해 보자.

 

<style>
p.intro {
    color: red;
    text-align: center;
}
p.important {
    background-color: yellow;
}
</style>
 
<ul>
     <li class="intro">A - paragraph.</li>
</ul>
<p class="intro">B - paragraph.</p>
<p class="important">C - paragraph.</p>


 

기존이 코드에서 11, 12, 13라인이 변경되었다. 처리 결과는 아래와 같다.

 

class-02.png

위의 결과를 보면 p.intro와 .intro가 같지 않음을 알 수 있다. 당연한 결과이다. 우리는 p.intro를 사용하여 CSS를 반영하였으므로 .intro는 당연히 css가 반영되지 않는다. 그러면 p.intro를 .intro로 바꾸어보자.

 

<style>
.intro {
    color: red;
    text-align: center;
}
p.important {
    background-color: yellow;
}
</style>
 
<ul>
<li class="intro">A - paragraph.</li>
</ul>
<p class="intro">B - paragraph.</p>
<p class="important">C - paragraph.</p>


위의 처리결과는 아래와 같다.

 

class-03.png

 

.intro로 설정한 모든 class가 변경됨을 알 수 있다.

 

그러면 class="intro"를 이름은 같지만 마치 다른 크래스인양 사용할 수 있다는 것인가? 아래의 코드를 보면 가능함을 알 수 있다.

 

<style>
.intro {
    color: red;
    text-align: center;
}
p.intro {
    color: blue;
    text-align: center;
}
p.important {
    background-color: yellow;
}
</style>
 
<ul>
<li class="intro">A - paragraph.</li>
</ul>
<p class="intro">B - paragraph.</p>
<p class="important">C - paragraph.</p>

 

처리 결과는 아래와 같다.

 

class-04.png

 

크래스 이름이 같아도 우리는 해당 크래스에 다른 효과를 줄 수 있다는 것을 확인 할 수 있다.

 

많은 사람들이 크래스이름이 같은면 당연히 같은 효과를 가질 것이라고 생각을 한다. 그러나 그것은 사실이 아니다. 같은 클래스일지라도 클래스를 부르는 방법에 따라 전혀 다른 클래스처럼 사용이 가능함을 우리는 확인하였다.

 

코드를 볼때 또는 작성을 할때 클래스 이름이 같으니 같은 효과 일 것이라고 생각하지 말자.

 

한가지 더 생각해보자 다중 클래스를 사용할 때이다. 아래의 예를 보자.

 

<style>
.intro {
    color: red;
    text-align: center;
}
p.intro {
    color: blue;
    text-align: center;
}
p.important {
    background-color: yellow;
}
</style>
 
<ul>
<li class="intro">A - paragraph.</li>
</ul>
<p class="intro">B - paragraph.</p>
<p class="intro important">C - paragraph.</p>

 

마지막 줄에 intro클래스를 추가하였다. 처리 결과를 확인해보자.

 

class-05.png

intro의 CSS와 important의 CSS가 같이 반영이 된다. 이때 주의 해야 할것은 각각의 클래스가 겹치는 속성값이 없다는 것이다. 클래스의 속성이 겹쳤을때는 생각처럼 css가 반영되지 않는다.

 

아래의 예를 보자. 이때 주의해서 봐야 할 것은 10라인의 p.important를 .important로 바꾸었다.

 

<style>
.intro {
    color: red;
    text-align: center;
}
p.intro {
    color: blue;
    text-align: center;
}
.important {
    background-color: yellow;
    text-align: left;
}
</style>
 
<ul>
<li class="intro">A - paragraph.</li>
</ul>
<p class="intro">B - paragraph.</p>
<p class="intro important">C - paragraph.</p>

 

출력결과는 아래와 같다.

 

class-06.png

 

위의 결과를 보면 12번라인의 text-align: left;가 반영되지 않음을 알 수 있다. 동일 속성을 변경하면 정상적으로 반영되지 않는다. 그러면 명시적인 선언을 사용하여 즉, p.important라고 했을때에도 같은 결과가 나타날까?

 

아래의 예를 살펴보자.

 

<style>
.intro {
    color: red;
    text-align: center;
}
p.intro {
    color: blue;
    text-align: center;
}
p.important {
    background-color: yellow;
    text-align: left;
}
</style>
 
<ul>
<li class="intro">A - paragraph.</li>
</ul>
<p class="intro">B - paragraph.</p>
<p class="intro important">C - paragraph.</p>


실행 결과는 아래와 같다.

 

class-07.png

 

p.important를 사용하였더니 마지막줄의 처리결과가 왼쪽으로 정렬되었음을 알 수 있다.

 

같은 클래스이름을 사용하더라도 호출하는 방식에따라 전혀 다른 결과가 나타남을 주의하여야 할 것이다.

 

 

 

그리고 더 중요한 것은

 

 

 

knife.gif

 

칼을 사용때는 항상 조심하자. 살떨린다.

 

?

List of Articles
번호 분류 제목 날짜 조회 수
41 HTML 4. DIV안에 DIV 넣어 정렬하기 5 file 2015.12.23 128222
40 HTML 5. DIV를 통한 헤더 만들기 1 file 2015.12.24 71078
39 HTML 6. DIV를 통한 전체 화면 사용하기 & 응용 2 file 2015.12.24 53274
38 HTML 3. DIV내의 문자컨텐츠 수평정렬과 수직정렬 1 file 2015.12.23 23752
37 HTML 10. position: absolute; 에 대해 알아보자 1 file 2015.12.30 19387
36 HTML 8. PHP를 통한 index파일의 구성 1 file 2015.12.28 19014
35 HTML JavaScript의 반복문을 알아보자. 2 file 2016.02.24 16318
34 HTML 2. DIV요소의 수평정렬과 수직정렬 file 2015.12.23 15230
33 HTML Transition에 대해 알아보자. 8 2016.06.22 13531
32 HTML Form 요소 설명 4 2016.06.01 11643
31 HTML DIV 제거와 CSS 코드 줄이기 file 2016.02.17 10311
30 HTML li 에 대해 알아보자. 2 file 2016.02.15 10200
29 HTML 요소의 수직정렬을 알아보자. 1 file 2016.03.01 10172
28 HTML 1. Inline 요소와 Block 요소에 대한 이해 file 2015.12.22 9945
27 SASS Sass 소개 2019.09.19 9643
26 HTML 9. position: relative; 에 대해 알아보자 file 2015.12.29 8405
25 HTML 11. viewport를 활용한 반응형 예제 file 2015.12.31 8197
24 HTML 7. position: static; 에 대해 알아보자. file 2015.12.28 7086
» HTML class 에 대해 알아보자. 1 file 2016.02.16 6605
22 HTML 하나의 class = 하나의 디자인 ????? file 2016.02.23 6016
Board Pagination Prev 1 2 3 Next
/ 3