HTML
2016.02.16 18:34

class 에 대해 알아보자.

조회 수 6740 추천 수 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 1. Inline 요소와 Block 요소에 대한 이해 file 2015.12.22 10127
40 HTML 10. position: absolute; 에 대해 알아보자 1 file 2015.12.30 19672
39 HTML 11. viewport를 활용한 반응형 예제 file 2015.12.31 9208
38 HTML 2. DIV요소의 수평정렬과 수직정렬 file 2015.12.23 15482
37 HTML 3. DIV내의 문자컨텐츠 수평정렬과 수직정렬 1 file 2015.12.23 24264
36 HTML 4. DIV안에 DIV 넣어 정렬하기 5 file 2015.12.23 134703
35 HTML 5. DIV를 통한 헤더 만들기 1 file 2015.12.24 83946
34 HTML 6. DIV를 통한 전체 화면 사용하기 & 응용 2 file 2015.12.24 53803
33 HTML 7. position: static; 에 대해 알아보자. file 2015.12.28 7259
32 HTML 8. PHP를 통한 index파일의 구성 1 file 2015.12.28 19804
31 HTML 9. position: relative; 에 대해 알아보자 file 2015.12.29 8553
30 HTML ::after ::before 토글 사용 예제 2019.06.28 3141
29 HTML ::after ::before 툴팁 사용 예제 2019.06.28 3029
28 HTML ::before & ::after Pseudo Element 예제 1 2019.06.27 4031
» HTML class 에 대해 알아보자. 1 file 2016.02.16 6740
26 HTML DIV 제거와 CSS 코드 줄이기 file 2016.02.17 10580
25 HTML Form 요소 설명 4 2016.06.01 12831
24 HTML JavaScript의 반복문을 알아보자. 2 file 2016.02.24 16534
23 HTML li 에 대해 알아보자. 2 file 2016.02.15 10342
22 SASS Sass @each 2019.09.20 2444
Board Pagination Prev 1 2 3 Next
/ 3