티스토리 뷰
블로그에서 글을 작성하다보면, 마우스를 올렸을때 버튼 색상이 바뀌는 것처럼 다양한 링크 버튼을 만들게 됩니다.
블로그를 꾸미다보면 점점 여러종류의 버튼을 만들게 되고, 나중에는 각 버튼들의 CSS가 전부 꼬여서 버튼이 원하는대로 만들어지지 않게 됩니다.
이때는 class와 id라는 개념을 넣어서 각 버튼의 속성을 지정 가능합니다. 같은 초보자 눈높이로 설명드리니, 직접 한번 따라해보시길 바랍니다.
Class와 id의 설명
제가 코딩을 아는것이 아니기 때문에, 원론적인 부분을 말씀드리기는 어렵습니다. 그러나 의미를 설명하자면, 아주 먼 옛날 학교를 다니던 것으로 비유를 하니 이해하기가 쉬웠습니다.
"class"는 말 그대로 '반'이고, "id"는 특정 학생의 '반 번호'라고 볼 수 있습니다.
반의 이름이 '새싹반'이라면, 해당 반에 속해있는 모든 학생은 '새싹반 학생'이라는 공통된 속성을 지니고 있습니다.
그러나 각 학생들은 자신만의 고유한 속성을 갖고 있습니다. '1번 학생은 키가 큼', '2번 학생은 머리가 노란색', '3번 학생은 유일하게 성별이 여성' 처럼 말입니다.
즉, class를 통해 모든 공통된 속성을 지정해주고, id는 각각의 특수한 경우에 대해서만 지정해주는 것입니다.
CSS를 통한 버튼을 적용한다면, class를 통해 기본적인 버튼의 모양과 배경 색상을 지정하고, id를 통해 폰트 색상이나 배경 색상 등을 변경 가능한 것입니다.
예시
.myButton {
box-shadow: 0px 0px 0px 2px #9fb4f2;
background:linear-gradient(to bottom, #7892c2 5%, #476e9e 100%);
background-color:#7892c2;
border-radius:10px;
border:1px solid #4e6096;
display:inline-block;
cursor:pointer;
color:#ffffff;
font-family:Arial;
font-size:19px;
padding:12px 37px;
text-decoration:none;
text-shadow:0px 1px 0px #283966;
}
위와 같이 CSS를 작성해서 버튼 class를 만들었다고 가정해보겠습니다. 해당 버튼은 아래 이미지 처럼 나타날 것입니다.
이 상태에서 id를 적용하여 배경 색상과 폰트 색상을 바꿔보겠습니다.
/* B1 ID에 대한 스타일을 정의합니다. */
#B1 {
background:linear-gradient(to bottom, #78c2 5%, rgb(19, 190, 62) 100%);
background-color:#72c2;
}
/* B2 ID에 대한 스타일을 정의합니다. */
#B2 {
color: black; /* 폰트 색상을 검정색(black)으로 지정합니다. */
}
class속성은 CSS입력시 앞에 "."을 입력하지만, id의 경우 앞에 "#"을 입력합니다.
B1 ID는 배경색상을 다른으로 지정하도록 설정하고, B2 ID는 글자색을 검정색으로 지정하도록 설정했습니다.
이렇게 적용한 결과 아래와 같이 버튼이 변경되었습니다.
기본적인 class를 통해 기본 형상을 넣고, 나머지는 id를 통해 버튼의 개성을 넣어줬습니다.
각각을 모두 class로 만들었다면, CSS우선순위가 꼬여서 일부 색상이나 폰트만 적용되었겠지만, id를 함께 적용하는 방식으로 해결이 가능했습니다.
이 때 본문은 아래와 같이 class와 id를 반드시 지정해줘야 합니다.
<button id="B1" class="myButton">버튼 class</button></a></p>
<button id="B2" class="myButton">버튼 class</button></a></p>