HTML/CSS class 사용하여 관리하기

 

웹 개발을 할 때 class 속성을 사용해서 css를 관리하게 됩니다.

 

각 태그마다 style을 사용하여 적용한다면 한 두 번은 편할지도 모르지만 점점 소스량이 많아질수록 관리하기가 매우 어려워집니다. 

처음 설정한 값이 절대 변하지 않는다면 모르겠지만

나중에 수정하거나 추가하려면 여기저기 찾아다니며 수정하기란 결코 쉬운 일이 아닙니다.

 

예시를 보며 비교해보도록 하겠습니다. 

 

1. class 사용

 

HTML 소스

<div class="box"> 테스트 </div>

 

CSS 소스 

.box {
	background-color: black;
	width: 100%;
	height: 50%;
}

 

 

2. class 미사용

 

<div style="background-color:black; width: 100%; height: 50%;"> 테스트 </div>

 

 

위 예시로만 본다면 style을 사용하여 코딩하는 쪽(class 미사용)이 더 편리해 보일 수 있으나

동일한 style을 가진 태그가 양이 많아질수록 그만큼 수정해야 할 양이 많아지게 되는 것입니다.

 

반면에 class로 여러 style값을 묶어둔다면

CSS에서 해당 class의 내용을 한 번만 바꾸면 그 class를 사용한 모든 태그가 한 번에 수정됩니다.

 

 

처음 작성할 때는 번거롭거나 귀찮다고 생각할 수 있지만 나중에 수정, 추가 작업을 위해 CSS 작업을 꼭 추천드립니다.