조회 수 6204 추천 수 0 댓글 0
?

단축키

Prev이전 문서

Next다음 문서

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

단축키

Prev이전 문서

Next다음 문서

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

우리는 class를 사용해 html내의 디자인을 적용할 수 있다. 일반적인 적용방법은 아래와 같다.

 

<style>
.code {
width: 200px;
height: 100px;
background-color: yellow;
color: blue;
text-align: center;
border: 1px solid yellow;
border-radius: 20px;
box-shadow: 5px 5px 5px 2px red;
</style>
 
<h1 class="code">Code is Poetry</h1>

 

위의 html코드를 살펴보면 클래스 code를 사용한 1개의 css만이 존재한다. 물론 h1태그 자체를 지정하여 디자인을 지정할 수 있지만 태그명을 직접 사용하여 css디자인을 적용하는 것은 좋은 코드의 모습이 아니다. id를 사용하여 디자인을 적용시키는 방법도 결코 좋은 방법은 될 수 없다. 디자인의 적용은 오로지 class에 위임하여야 한다. 나는 이런 방법을 오래전부터 주장하해 왔다. 나만의 코딩방법으로는 class에 디자인을 전담시키고 id는 자바스크립트를 위해 양보하고태그자체에 디자인을 기술하는 것을 거부하여왔다. 이러한 방법은 객체지향적인 css작성의 시발점이기도 하다. 이 방법은 다음기회에 설명하기로 하고, 이 글에서는 교육의 목적으로 사용하고 아래의 설명을 보도록하자.

 

일반적으로 1개 class가 있다면 css디자인도 1개가 있다고 생각될 수 있다.

 

위의 코드 결과를 보자.

 

oocss-01.png

 

 

클래스 하나에 1개의css가 적용됨을 알 수 있다. 

 

그렇다면 class 1개에 1개의 디자인만 적용되는가? 아래의 코드를 살펴보자.

 

<style>
.code {
width: 200px;
height: 100px;
background-color: yellow;
color: blue;
text-align: center;
border: 1px solid yellow;
border-radius: 20px;
box-shadow: 5px 5px 5px 2px red;
}
 
h1.code {
position: absolute;
    left: 50%;
margin-left: -100px;
}
</style>


<h1 class="code">Code is Poetry</h1>

 

결과는 아래와 같다.

 

oocss-02.png

 

코드에 class를 하나만 기재하였지만 2개의 css가 적용됨을 알 수 있다. 첫번째는 .code이고 두번째는 h1.code이다.

 

class가 1개 선언되었다고 해서 적용된 css도 1개일것이라는 생각은 보기좋게 빗나갔다.

 

아래의 코드를 보도록 하자.

 

<style>
.code {
width: 200px;
height: 100px;
background-color: yellow;
color: blue;
text-align: center;
border: 1px solid yellow;
border-radius: 20px;
box-shadow: 5px 5px 5px 2px red;
}
 
h1.code {
position: absolute;
    left: 50%;
margin-left: -100px;
}

h1 {
top: 50%;
margin-top: -50px;
}
</style>

<h1 class="code">Code is Poetry</h1>

 

 

oocss-03.png

 

위의 결과를 보면 3개의 css가 반영됨을 알 수 있다.

 

결과적으로 우리는 class, id등의 숫자와 상관없이 여러가지 디자인을 요소에 적용할 수 있음을 알 수 있다.

 

 

?

List of Articles
번호 분류 제목 날짜 조회 수
41 HTML 4. DIV안에 DIV 넣어 정렬하기 5 file 2015.12.23 134703
40 HTML 5. DIV를 통한 헤더 만들기 1 file 2015.12.24 83949
39 HTML 6. DIV를 통한 전체 화면 사용하기 & 응용 2 file 2015.12.24 53803
38 HTML 3. DIV내의 문자컨텐츠 수평정렬과 수직정렬 1 file 2015.12.23 24265
37 HTML 8. PHP를 통한 index파일의 구성 1 file 2015.12.28 19804
36 HTML 10. position: absolute; 에 대해 알아보자 1 file 2015.12.30 19672
35 HTML JavaScript의 반복문을 알아보자. 2 file 2016.02.24 16534
34 HTML 2. DIV요소의 수평정렬과 수직정렬 file 2015.12.23 15482
33 HTML Transition에 대해 알아보자. 8 2016.06.22 13707
32 SASS Sass 소개 2019.09.19 13118
31 HTML Form 요소 설명 4 2016.06.01 12831
30 HTML DIV 제거와 CSS 코드 줄이기 file 2016.02.17 10580
29 HTML li 에 대해 알아보자. 2 file 2016.02.15 10342
28 HTML 요소의 수직정렬을 알아보자. 1 file 2016.03.01 10340
27 HTML 1. Inline 요소와 Block 요소에 대한 이해 file 2015.12.22 10127
26 HTML 11. viewport를 활용한 반응형 예제 file 2015.12.31 9208
25 HTML 9. position: relative; 에 대해 알아보자 file 2015.12.29 8553
24 HTML 7. position: static; 에 대해 알아보자. file 2015.12.28 7259
23 HTML class 에 대해 알아보자. 1 file 2016.02.16 6740
» HTML 하나의 class = 하나의 디자인 ????? file 2016.02.23 6204
Board Pagination Prev 1 2 3 Next
/ 3