티스토리 스킨의 skin.html 과 style.css 이해하기

티스토리 스킨은 크게 2개의 파일로 구성되어 있습니다. 제목에도 설명했듯이 skin.html 파일과 style.css 파일이죠. skin.html을 HTML 본연의 기능대로 화면에 표시는 레이아웃(틀)과 텍스트들을 생성하는 역활을 하고 style.css는 HTML에서 생성한 화면요소들에게 색상이나 크기, 위치등의 속성을 지정하는 역활을 합니다.

가장 기본적인 예로 '내 블로그로 가기' 라는 텍스트에 'shumah.net' 이라는 링크를 주소싶을때는

HTML

<a href="http://shumah.net">내 블로그로 가기</a>

이렇게 입력하게되면 링크가 하나 생기게 되는거죠^^ 여기서 저 링크에 색상을 주고 싶을때 CSS를 이용합니다.

CSS

a {color: #red}

/* 다른예제

a {color: #eee}

a {color: #6C7AED}

*/

이렇게 CSS를 입력하게되면 HTML에서 입력한 '내 블로그로 가기'가 원하는 색으로 변경됩니다.

하지만 여기서 주의해야 하는 점이 있습니다. CSS에는 선택자라는 개념이 있는데요 selector 라고 부릅니다.

위 예제에서 a는 선택자이고 { } 으로 기술한것은 속성을 나타냅니다. a라는 선택자를 쓰게되면 HTML상의 모든 a를 나타냄으로 위 예제처럼 기술하시면 블로그 내에 모든 a가 지정하신 색상으로 변경될 수 있는 위험이 있습니다. 

그래서 이런 중복적인 선택자를 방지하기위해서 id 와 class 를 사용합니다. 다시 예제를 수정해보겠습니다.

HTML

<a class="myblog_link" href="http://shumah.net">내 블로그로 가기</a>

<a class="myblog_link" href="http://shumah.tistory.com">내 블로그로 가기2</a>

위와 같이 'myblog_link'라는 class 를 추가하고 CSS에서도 해당 class로 selector로 변경을 하면 됩니다.

CSS

.myblog_link {color: #red}

/* 다른예제

.myblog_link {color: #eee}

.myblog_link {color: #6C7AED}

*/

이렇게 하시면 중복 selector를 피해서 내가 원하는 요소에만 style을 줄 수 있습니다. 하지만 여기서도 'myblog_link' 라는 class가 다른곳에도 존재한다면 중복이 될수 있음으로 중복을 검사하시고 사용하시면 됩니다. 그치만 이렇게 모두 따로따로 지정한다면 코드가 많이 지겠죠^^? 중복도 활용을 잘 하면 아주 유용합니다. 같은 style 을 지정하게 하고 싶다면 HTML에서 같은 class를 입력하면 되는거죠^^