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 SASS Sass 변수 2019.09.19 2141
40 SASS Sass Selector Functions 2019.09.19 2241
39 SASS Sass @extend 2019.09.19 2290
38 SASS Sass @import 2019.09.19 2341
37 SASS Sass 중첩 규칙과 속성 2019.09.19 2360
36 SASS Sass Numeric Functions 2019.09.19 2367
35 SASS Sass Map Functions 2019.09.19 2377
34 SASS Sass Introspection Functions 2019.09.19 2421
33 SASS Sass @each 2019.09.20 2444
32 SASS Sass Operators 2019.09.20 2607
31 SASS Sass List Functions 2019.09.19 2613
30 SASS Sass @for 2019.09.20 2747
29 SASS SASS 샘플 2019.08.16 2872
28 SASS Sass @mixin과 @include 2019.09.19 2998
27 HTML ::after ::before 툴팁 사용 예제 2019.06.28 3029
26 HTML ::after ::before 토글 사용 예제 2019.06.28 3141
25 SASS Sass @if and @else 2019.09.20 3222
24 SASS Sass @while 2019.09.20 3238
23 SASS Sass Color Functions 2019.09.19 3608
22 SASS Sass String Functions 2019.09.19 3713
Board Pagination Prev 1 2 3 Next
/ 3