the Great World Meson:: the Great World Meson

블로그 꾸미기 - CSS 에 익숙해지기

시스템 잡설 | 2013. 3. 14. 22:02

블로그에 자신의 글을 올리다 보면 여러가지 자신에게 딱 맞는 형태, 구조나 아주 간단하게 폰트같이 아주 사소한 것들을 변경하고 싶어질 때가 많다. 일반적인 문서편집기와 다르게 폰트, 크기, 줄간격 등 세부적인 내용까지 조절하고 싶어도 쉽지 않은 경우가 많다. 아무리 WYSWYG 방식 (보이는대로 편집되고 결과물이 얻어지는) 의 편집기가 제공된다고 해도 제대로 안될때도 많다. 웹에서 문서를 표시하는 방식은 다양한 방법이 있다고 하지만 기본적으로 HTML 이 표준이다. 즉, 모든 웹 문서는 HTML 의 문법을 통해 작성이 되고 그 문법에 맞게 웹브라우저에 표시되고 출력되게 되는 것이다.

티스토리, 워드프레스 (Wordpress), 블로거와 같이 서버와 기본적인 블로그 기능을 위해 글을 작성하고 글 목록을 만들어주고, 관리해주는 서비스를 제공하고 사용자는 아주 간편하게 글만 작성해서 올리면 바로 인터넷에서 자신의 글을 만들어 올릴 수 있다. 혼자 이 모든 것을 만들려고 한다면, 웹프로그래밍, HTML 과 웹페이지 작성에 필요한 방법을 터득해야 하지만, 그렇게 된다면 이렇게 대중화된 블로그는 아주 소수의 웹 프로그래밍을 할 줄 아는 사람들의 전유물이 되었을 것이다. 다행히 똑똑한 인재들이 범인들을 위해서 쉽게 사용할 수 있는 블로그 서비스를 제공해주고 심지어 다양한 미적 감각을 만족시킬 수 있는(?) 스킨을 제공해서 편리하게 자신의 블로그를 꾸밀 수 있는 방법을 제공해주었다.

¶ 불편은 필요를 만든다

처음에는 블로그 서비스 (현재는 티스토리) 에서 제공하는 스킨 중 가장 마음에 드는 것들을 적용해보고 어떤 스킨이 마음에 들지 선택하게 된다. 화려하고 사진 위주로 올릴 사람들을 위한 스킨도 제공되고, 심플하고 간단하면서 글 위주로 작성할 사람들을 위한 스킨도 있고 관리의 편리성과 개인의 선호도를 감안해서 1단, 2단, 3단 등 다양한 형태의 스킨을 제공해준다. 초기에는 별 문제없이 사용하지만 아주 사소하게는 관리하는 단 (column) 의 위치도 변경해주고 싶고, 큰 제목 위에 부 제목 말고 무엇인가 작은 이미지라도 채워서 허전한 공간을 채우고 싶거나, 유연하고 예쁜 폰트들이 많은데, 기본으로 제공되어 표시되는 폰트는 무엇인가 마음에 안들때가 많다.

무엇이든 보기에 불편한 것은 변화시키고 싶은 필요를 만들게 된다. 이러한 불편과 타협하고 그냥 있는 그대로 받아들여서 그대로 사용하는 경우도 있지만, 성격상 바꾸지 않으면 그냥 계속 눈에 거슬리는 사람도 있기 때문에 그 불편을 따라가면 자신이 원하는 스타일이 무엇인지 알게 될 것이다. 그렇게 조금씩 자신의 불편을 제거하고 싶은 마음을 따라가고는 싶은데 어떤 원리로 바꿔야 심각한 손실(?)을 겪지 않고 마음에 드는 블로그 스타일을 만들 수 있을지 작은 가이드가 되길 바라며 시작한다.

¶ 목적과 전략

목적은 명확하다. 기존의 블로그 스킨을 자신의 마음에 드는 방향으로 바꿀 수 있는 방법을 찾는 것이다. 특별히 플래쉬나 별도의 방법을 사용하지 않고, 기본적인 HTML / CSS / JavaScript 라는 세가지 표준을 가지고 만들어진 어떤 블로그에서 적용가능하다. 처음부터 자신만의 디자인을 꾸미기 힘들기 때문에 기존에 제공해주는 스킨을 변경하여 자신이 원하는 형태로 변경하는 것이 전략이다. 블로그 서비스에서 가장 마음에 드는 스킨을 정하고 시작한다. 현재 개인적으로 사용하고 있는 티스토리를 통해서 알아보지만, 블로거(blogger) 나 워드프레스(Wordpress) 등 기본적으로 HTML / CSS 를 지원하기 때문에 동일한 방법으로 편집하기로 한다.

¶ 사전 지식

아무리 복잡한 홈페이지도 결국 HTML 출력하여 보여주는 것이다. 내부적으로 아무리 복잡하고 화려한 기술을 사용한다고 해도 궁극적으로 HTML 태로 출력하는 것이다. 따라서 HTML 기본적인 문법을 알아두면 HTML 이 우리가 보는 화면으로 어떻게 보여주는지 이해하기 빠르다. 기본적으로 HTML 은 <tag> 로 시작하고 </tag> 로 닫아 적용 범위를 표시한다. HTML 문서의 기본은

HTML 문서의 기본 구조는 위와 같다. <HEAD> 부분은 문서의 다양한 값들을 정의하는 곳이다. 문서의 키워드부터 문서의 종류, 문자 인코딩 종류 등 다양한 문서의 기본값들을 정의하고 문서 전반에 걸쳐 실행되기 원하는 스크립트 (JavaScript 를 포함) 를 적어 놓는 곳이다. <BODY> 는 우리가 웹브라우저를 통해서 보는 내용물을 넣는 곳이다. HTML 태그 문법은 다양하지만, 모든 브라우저에서 호환이 되는 태그를 위주로 알아두면 편리하다. 기본적으로 HTML 그는 블로그의 형태와 위치 등의 배열에 직접적으로 연결되는 경우가 많다. 그 중 다음의 HTML 기본 태그는 미리 알아두면 편리하다.

<TABLE> .. <TD> <TR> ... </TR> ... </TD> </TABLE>

테이블은 HTML 에서 아주 유용한 태그이다. 블로그 전체 화면을 2단으로 나누거나, 브라우저 크기에 따라서 자신이 원하는 위치에서 벗어나는 등의 경우 TABLE 태그를 이용하면 아주 간편하게 정렬해줄 수 있다. 예를 들어 블로그에 SNS 단추를 넣고 싶을 때 TABLE 태그를 이용하면 각 버튼간의 정렬을 자신이 원하는 크기만큼 상하 정렬을 조절해줄 수 있다.

본 블로그에 붙어 넣은 SNS 단추를 테이블 태그를 통해서 넣은 것이다. 보통 TABLE 의 테두리 (border) 두께를 0 으로 설정하면 테이블이 전혀 없는 것처럼 나오기 때문에 화면 구성을 위해 유용하다.

<DIV ...> .... </DIV> vs. <SPAN ...> ... </SPAN>

HTML 4.01 권고안으로 넘어가면서 기존의 <P> 태그나 <BR> 태그와 같이 문단 구성을 위한 줄바꿈 태그대신 DIV 와 SPAN 태그를 권고했다. 거의 대부분의 블로그 서비스 스킨들은 이러한 권고안을 대부분 잘 따르기 때문에 DIV 와 SPAN 으로 만들어진 요소들이 구성되어 있는 것이다. 블로그의 사이드바에 있는 달력, 글목록 등 각각의 요소들도 DIV 로 구분된 영역으로 구별되고, 블로그 제목, 부제목, 본문 제목, 날짜, 본문 내용 모두 DIV 와 SPAN 의 구분으로 나누어진 영역이라고 생각하면 편리하다.

DIV 와 SPAN 의 차이점은 http://chatii.kr/45 에서 가장 쉽게 차이를 알 수 있다. SPAN 은 inline 레벨의 구역이고 DIV 는 block 레벨의 구역이다. 줄바꿈의 요소와 폭, 높이를 쉽게 지정할 수 있다는 측면에서 SPAN 보다는 DIV 태그를 더 선호해서 사용하면 편리하다. SPAN 은 문장 중 특별한 변화가 필요할 때 예를 들어 윗첨자 형태로 폰트 색을 달리하고 폰트 형태를 변경할 때와 같이 문장 안에서 변화가 필요할 때 유용하다.

출처: chatii의 웹노트

이 정도 태그만 알면, HTML 문서가 몇개의 기본적인 태그로 구성되어 있고 영역이 구분되어 있다는 것을 알 수 있다. 자신이 사용하는 모든 스킨도 이러한 기본적인 구성으로 이루어졌다는 사실만 알고 바라보면 제목 위치를 변경하거나 내가 고치고 싶은 영역이 어떤 부분인지 알 수 있다. 블로그 꾸미기의 시작은 자신의 블로그 영역을 파악하는 것이다.

¶ 블로그 스킨의 구성 요소

블로그는 세가지 구성요소로 구분해서 살펴보면 편하다. 지금까지 설명한 HTML 은 가장 기본적인 골격을 표시해주는 것이다. 따라서 프로필의 위치를 변경하고 싶거나 본문의 폭을 조절하거나 자신이 원하는 이미지를 넣는 등의 블로그의 구조에 관련된 일들은 HTML 코드를 변경하면 된다.

나머지 두개의 구성 요소를 설명하기 전에 나머지 두개의 구성 요소가 제외된 상태의 HTML 화면을 살펴보자.

모습은 대충 비슷하지만, 우선은 ① 무미 건조하고 ② 알수 없는 [##...##] 으로 구성된 문자열을 볼 수 있다. 이 두가지가 바로 블로그를 구성하는 나머지 두가지 요소이다.

① CSS (Cascaded Style Sheet) : 무미 건조함에 자신이 원하는 형태로 꾸며주기 위한 요소이다. 쉽게 말하자면, 내가 원하는 폰트, 크기, 문단 정렬, 그림자 등 어떤 형태로 출력할지를 정해주는 내용이다. 대부분의 블로그는 사용자가 HTML 분과 CSS 부분을 편집할 수 있도록 해주어 자신이 원하는 구성과 형태를 꾸밀 수 있도록 해준다. (이 두가지를 지원해주지 않는다면 스킨이 제공하는대로 사용하거나 다른 블로그를 이용해야 할 것이다.) 본 블로그가 서비스되는 티스토리도 관리자 화면에서 HTML / CSS 편집 화면을 볼 수 있다.

CSS 를 이해하기 위해서는 워드프로세서의 스타일을 생각하면 편하다. 학부시절 논문 작성을 위한 Technical Writing 수업을 들을 때 수업하신 교수님의 말씀에 따르면, 가장 지저분한 문서는 가장 깔끔하게 만들기 위해 스타일을 사용하지 않고 제목마다 폰트, 크기, 색 등을 모두 지정한 문서라고 이야기하셨다. 조금 안다는 사람은 붓 모양의 '스타일 복사'를 사용한다고 스스로 자랑스러워할지 몰른다. 가장 좋은 것은 제목은 제목으로 지정하는 것이다.

너무도 당연하지만 만약 제목 스타일이 마음에 안든다고 다른 폰트로 바꾸라고 했을 때 제목마다 포맷을 지정한 사람들은 또다시 일일이 바꿔야 한다. 그러나 스타일로 지정한 사람은 스타일의 포맷만 바꾸면 전체를 모두 바꿀 수 있다. 한번 제대로 지정하면 그 이후 포맷을 바꾸는데 효율적이다.

예를 들어 블로그 안의 날짜의 포맷이 마음에 안든다면 날짜의 포맷을 정의하는 것이 필요하다. 그리고 HTML 문서안에는 해당 영역은 날짜를 표시한다고 지정해주면 되는 것이다. 이런 포맷을 지정하는 문서가 바로 CSS 문서이다. 기본 스킨에 포함된 CSS 문서를 보면 그 관계를 파악할 수 있다.

CSS 문서에 보면 .date 라는 항목이 있다. 이 항목에 원하는 폰트 형태로 Georgia 로 지정한 것이다. CSS 의 문법은 인터넷 상에서 참조하면 되는데 w3schools.com 에서 찾아보면 호환성 뿐만 아니라 적용시 변화되는 모습도 확인할 수 있어서 도움이 될 것이다.

이렇게 정의된 date 라는 항목은 HTML 문서에서 다음과 같은 형태로 적용이 가능하다.

즉, CSS 에서 .date 로 정의 내린 항목들은 HTML 서 안에서 태드 다음 class="date" 로 덧붙여서 해당 SPAN 이 CSS 서 .date 라는 항목에서 정의된 내용대로 화면에 표시를 하라는 뜻이다. 마찬가지로 위의 CSS 화면에서 .button 과 같이 정의한 항목도 HTML 에서 class="button" 이라고 덧붙이면 해당 태그에 감싸인 항목은 해당 스타일 정의대로 표시되는 것이다. 예를 들어 .title_one 이라고 CSS 에서 정의하고 나서 HTML 에서 <DIV class="title_one"> 이라고 사용하면 해당 DIV 의 영역은 .title_one 에 정의된 스타일대로 표시되는 것이다. 스타일을 지정해줄 수 있는 방법은 이처럼 특정 class 를 지정해주는 방법도 있지만, 특정 태그에 대해서 적용가능하도록 정의할 수 있다.

위와 같이 <input> ... </input> 이나 <strong> ... </strong> , <blockquote> ... </blockquote> 로 둘러쌓인 부분들은 해당 CSS 에서 지정한 스타일 대로 출력이 된다. 즉, 별도의 class 지정없이 해당 태그가 사용될 경우 모두 적용할 수 있다.

만약 HTML 문서 내의 특정 지역만 스타일을 적용하고 싶다고 할 때는 id 를 붙일 수 있다. 예를 들어 블로그의 사이드바 영역에 대해서만 적용하고 싶을 때는 해당 영역을 구별하는 div 태그 다음에 id="navigation" 을 붙인 다음...

해당 id 로 묶인 영역에 대한 스타일을 지정하기 위해서 CSS 문서에서는 #navigation 으로 정의하면 된다.

예를 들어 id="navigation" 으로 묶인 div 영역 안의 ul 태그에 대한 스타일 정의를 나타내기 위해 #navigation ul { ... } 로 정의해주고, #navigation .menu a {... } navigation id 를 가진 div 영역 안의 menu 라는 class 를 가지는 태그 안에서 (주로 div 태그 일 가능성이 높다.) a (링크) 태그의 항목에 대한 스타일을 정의한 것이다. #navigation .menu a {... } 의 경우에는

<div id="navigation">

<div class="menu">

<a href="..."> Something ...1 </a> has ... something bla .. bla

<strong> here! </strong>

then <a href="... ... "> <strong> This CASE?? </strong> </a>

</div>

<div>

의 구조를 가지게 된다. 이 경우 Something ... 1 은 링크를 가지고 #navigation .menu a 에서 정의된 형태로 스타일이 표시된다. here! 의 경우에는 strong 태그에 대해서 정의된 대로 표시된다. 그런데 이때 This CASE?? 의 경우에는 어떻게 표시될까 strong 태그에 정의된대로 표시될까 아니면 #navigation .menu a 에 정의된대로 표시될까 이 부분은 각자의 숙제로 남겨둔다.

아주 간단하게는 CSS 서 정의된 스타일만 변경해줘도 화면에서 표시하고 싶은 폰트, 크기, 정렬 정도는 쉽게 변경할 수 있다. 문제는 HTML 어떤 부분이 내가 변경해주고 싶은 부분인가 하는 것이다. 물론 id 나 class 를 HTML 에서 찾아서 확인해보면 알 수 있지만 텍스트 문서 형태로 된 HTML 을 화면 출력된 화면과 연결해서 그려보는 것은 무척이나 어렵다. 이런 경우 구글 크롬은 '요소 검사 (N)'라는 항목 (화면에서 오른쪽 버튼 클릭) 으로 우리가 변경하고 싶은 영역에 대한 정보와 스타일 정보를 한꺼번에 확인할 수 있다.

해당 영역에 적용된 CSS 스타일을 확인할 수 있다. 따라서 여기서 확인된 CSS 문서에서 변경해주면 된다. 해당 HTML 나 CSS 정은 바로 바꿀 수 있다. 예를 들어 폰트를 Georgia 라고 되어 있는 것을 클릭해서 Tahoma 로 바꿔주면 화면에서 어떻게 표시되는지도 확인해준다.

② 블로그 변수 [##... ... ##] : 이 변수의 형태와 내용은 블로그 서비스에 따라서 다르다. 그렇지만 HTML/CSS 문법과 겹치지 않는 범위에서 지정가능하다. 티스토리에서는 [## ... ...##] 와 같은 형태를 취하고 있다. 예를 들어 https://meson.tistory.com/ 의 경우 블로그의 대표 URL 을 뜻하는 것이다. HTML 만 표시된 화면내용을 보면 정상적으로 표시되는 내용들이 변수로 치환되어 있는 것을 알 수 있다. 이러한 내용은 블로그 제목 뿐만 아니라 본문 제목, 본문 내용 등을 생각할 수 있다. 그리고 블로그 본문의 고유 URL 주소도 있을 것이다. 이 부분은 우리가 고칠 수 있는 부분이 아니다. 다만 [##... ...##] 도 출력되는 문서의 내용이기 때문에 해당 변수를 <div> 이나 <span> 등 다양한 태그로 감싸서 적용할 수 있다.

블로그의 제목 같은 경우에는 블로그 관리자의 기본 정보에서 수정할 수 있다. 여기에서 수정한 정보가 표시되는 것이다. 본문 내용의 경우에는 해당 제목과 글 내용을 HTML 형태로 출력해준다. 어떤 내용이 출력되는지는 앞서 설명한 구글 크롬의 요소 검사나 HTML 소스 보기 를 통해서 확인할 수 있다.

¶ 실전 응용하기

여러가지 응용이 가능하지만 아주 간단한 예를 통해서 CSS 와 블로그 변수에 대한 설명해보고 글을 마무리하려 한다. 티스토리의 플러그인 중에 같은 카테고리의 글들을 한꺼번에 보여주는 기능이 있다. 플러그인에 들어가면, '카테고리 글 더 보기' 항목으로 설정이 가능하다. 설정을 하면, 적절한 위치에 본문 내용 아래에 같은 카테고리 글들을 설정한 갯수만큼 보여준다. 그런데 처음에 설정을 하면 해당 글 다음에 나오는 날짜/시간 폰트가 마음에 안든다. 그래서 해당 항목이 어떤 영역의 어떤 요소인지를 확인해보면,

해당 항목은 <td> 태그로 묶인 요소이고 플러그인을 통해서 만들어진 해당 영역의 class 이름은 another_category 인 것을 확인할 수 있다. 구글 크롬의 요소 보기를 통해서 보면 어떤 CSS 스타일이 적용되는지를 확인할 수 있다. 이런 경우 해당 날짜 포맷을 Georgia 폰트로 변경하고 싶을 때 CSS 문서에

.another_category td {

font-family:'Georgia';

}

로 추가해주면 원하는대로 변경이 가능하다. 아주 간단한 예이지만, 자신이 원하는 곳의 id , class 를 확인하고 이를 CSS 에 적용하는 방법으로 자신이 원하는 형태로 블로그를 편하게 꾸밀 수 있게 된다.

¶ 마무리하며...

누군가에게는 초급적 내용일 수 있지만, 제공되는 블로그, 스킨만을 사용하는데, 보기 불편한 작은 부분을 고치기 위해서는 전문적인 지식이 필요하지 않다는 것을 설명하고 싶었지만, 기본적인 내용을 익혀야 하기 때문에 내용이 길어지게 되었다. 블로그 구성 요소를 HTML / CSS / 블로그 고유 변수 세가지로 생각하고 이 중 HTML 과 CSS 에 조금만 익숙해지면 블로그 서비스가 제공하는 복잡하고 자유도가 떨어지는 (자신마음대로 섬세하게 조정하기 힘든...) 블로그보다는 단순하지만 자신의 스타일에 맞는 형태로 표현되는 블로그를 원하는 사용자들을 위해서 소개한 내용이다.

블로그와 특정 블로그 서비스를 이용해서 작성했지만, CSS 와 HTML 이 가지는 연관성을 통해서 자신을 표현하는 간단한 웹사이트를 만드는데도 도움이 될 것이라고 생각하며 마무리한다.

저작자표시 비영리 변경금지

'시스템 잡설' 카테고리의 다른 글

앱 디자인의 발견 - 메모 서비스를 생각하다. (2)	2013.08.08
Stay Updated - 최신 데이터 유지하기 (0)	2013.08.06
블로그 꾸미기 - Be social (0)	2013.03.20
자신만의 도메인을 사용하자 - Custom Domain Service (0)	2013.03.11
그래프서치 - 관계 중심형 검색엔진을 꿈꾸다 (3)	2013.02.01
정보의 가공 및 개인화 - 논문 작성을 중심으로 (2)	2013.01.18

◀ PREV : 1 : ··· : 9 : 10 : 11 : 12 : 13 : 14 : 15 : ··· : 189 : NEXT ▶