티스토리 사용자들을 위한 웹코딩 HTML CSS 기초 개념

이 글은 HTML에 대한 기초 지식이 전혀 없으신 분들께서 티스토리의 HTML 편집 부분을 어떤 식으로 접근해야 하는지에 대한 가이드 목적으로 작성되었습니다. 애드센스 승인 이후 스크립트 코드를 어디에 넣어야 하는지, 또 간단한 HTML 구조에 대해서 파악하는 목적도 가지고 있습니다. 친효스킨을 기준으로 설명이 되어 있습니다.

티스토리 내에서의 HTML 구조

HTML은 사람으로 비유하자면 뼈대라고 생각하시면 됩니다. 사람도 뼈가 정위치에 와야 생활할 수 있듯 HTML도 각 뼈대의 역할이라는게 있습니다. 크게 <head>와 <body> 구조로 나뉘어 있습니다. <head>에는 이 스킨의 각종 정보들이 들어있습니다. 사람으로 또 한번 비유하자면 개성 정도로 비유할 수 있을 것 같습니다. 이 사람이 가지고 있는 성격이나, 생각들, 능력, 혹은 인상들이 <head> 안쪽에 들어가게 됩니다. 그래서 애드센스를 구사할 수 있는 능력을 갖게 하기 위해서 승인 코드를 <head> 안에 스크립트 형태로 링크를 걸어주는 것 입니다. 그러면 이 스킨은 애드센스 능력을 갖게 되는 겁니다. 그 밖에 웹폰트 스타일이나 문서의 반응형 사용 여부 등등등 다양한 메타태그 ( <meta> ) 와 링크들이 들어가게 됩니다.

<head>에서 정말 중요한건 바로 타이틀 정보 입니다. <title> 이라고 되어 있는데 이게 없으면 안 됩니다. 블로그에도 이름이 각각 있습니다. 내 스킨은 이런 제목의 문서라는걸 보여주는게 바로 타이틀 정보 입니다. 메타태그나 기타 스크립트, 링크들은 없어도 동작 하지만 이 타이틀이 없으면 오류가 발생합니다. 보통 티스토리 HTML에서 <title>에 대한 정보는 관리 > 블로그 > 블로그이름 에서 설정하면 적용 됩니다.

출처 : 픽사베이

<body>는 사람으로 비유하면 몸 입니다. 그래서 태그도 body라는 키워드를 사용하게 된 것 같습니다. 여기에는 실질적인 뼈 구조가 배치됩니다. 사람의 신체 구조도 머리, 몸, 팔, 다리, 발 이런 식의 구조로 되어 있는 것 처럼 HTML 문서도 비슷한 성격을 가지고 있습니다. <body> 안에는 <header>, <aside>, <section>, <article>, <div>, <footer> 등등의 다양한 영역을 구분짓은 태그 요소들이 있습니다. 친효스킨은 header, aside, div, footer 정도가 사용되었습니다. 제작자마다 선호하는 태그가 다르고 개성이 다르기 때문에 사용되는 요소도 약간씩은 다릅니다. 그런데 아마 <body>에서 가장 많이 사용되는 태그는 단언컨데 <div> 일 것 입니다. 이 div구조가 가장 복잡하게 세팅되어 있을 겁니다. 친효스킨에서도 div 태그를 가장 많이 사용했습니다.

div는 Division의 약자 입니다. 분할이라는 의미를 가지고 있지요. 즉 본문에서 어떤 부분은 헤더 역할을, 또 어떤 부분은 사이드바 역할, 그리고 본문 역할, 마지막으로 맨 아래에 있는 푸터 역할을 해야 하는 영역을 나눠야 하는데 이때 바로 div를 가장 많이 사용합니다. 따라서 복잡한 구조의 스킨일수록 당연히 사용되는 div도 많이 늘어나게 될 겁니다. 아래는 간단한 HTML 구조의 예시 입니다.

<!doctype html>

<head>

</head>

<body>

</div>

</header>

</div>

</div>

</div>

</footer>

</body>

</html>

잘 보시면 뭔가 공통점이 보일 겁니다. HTML의 구조는 마치 러시아 전통 인형인 마트로시카와 비슷합니다. 인형을 열어보면 또 인형이 있고, 또 그 인형을 열면 또 인형이 안에 들어있는 구조 입니다. <body> 부분도 비슷한 구조를 가지고 있습니다. 위에 색 별로 구별을 해놨습니다. 보시면 어떤 구조인지 딱 눈에 들어올 것 입니다. 보편적으로 header 부터 시작해서 footer 로 마무리가 됩니다. <header>에는 메뉴 버튼이나 블로그 제목이 출력되는 부분이 들어가는게 보편적 입니다. 그리고 본문을 구성하는 섹션요소는 딱히 없기 때문에 대부분 div로 구성을 합니다. 친효스킨도 본문을 구성하는 div가 많습니다. 마지막으로 맨 아래에 위치하는 <footer>에는 보통 스킨 제작자가 들어갑니다.

티스토리는 header와 footer를 만들기가 상당히 쉽습니다. 문제는 본문 입니다. 본문을 1단으로 할지, 2단으로 할지, 아니면 3단으로 할지를 먼저 정해야 합니다. 친효스킨의 경우는 사이드바가 존재하고 바로 옆에 본문이 위치한 2단 구조 입니다. 따라서 <div id="BODY"> 라고 하는 태그가 있고 그 안쪽에 두 개의 큰 div가 존재하고 있습니다. 하나는 <div class="sidebar"> 이고, 다른 하나는 <div class="content"> 입니다. 이 각 div가 사이드바와 본문을 구성하게 됩니다. 특히 <div class="content">의 경우는 유동성있게 변하는 부분입니다. 사이드바는 보통 고정적인 옵션들이 많지요. 카테고리나 추천글, 인기글, 최근글, 최근댓글, 태그클라우드, 방문자 카운터 등 딱 고정된 모듈들이 들어가는 영역입니다. 하지만 본문의 경우는 다릅니다. 메인화면일경우 인덱스 페이지가 나와야 하고, 글을 클릭해서 들어가면 해당 포스팅이 출력되어야 합니다. 방명록을 누르면 방명록 리스트가 나와야 합니다. 특히 본문 포스팅의 경우 맨 아래에 카테고리 다른 글이나 공유 링크, 댓글 리스트들도 들어갑니다. 따라서 본문의 구조가 가장 많은 div를 사용하게 됩니다.

최초 영역을 어떻게 나눌지에 대해 고민하고 정해졌으면 레이아웃을 구성하여 정확히 이 영역에는 이 태그가 사용되는게 정해지게 됩니다. 앞서 비유한것처럼 사람의 뼈와 마찬가지라고 생각하시면 됩니다. 갈비뼈가 막 팔에 가고 다리에 위치하면 더 이상 사람이 아니게 되겠죠? 마찬가지 입니다. 한 번 정해진 div 위치는 변경 시 형태가 뒤틀리게 됩니다. 따라서 HTML에서의 스킨 구조에 사용되는 모든 태그는 반드시 정해진 위치가 있습니다. 물론 약간의 유동성을 허용하지만 큰 영역을 지정해놓은 대표 태그들은 반드시 그 위치에 있어야 합니다. 즉 HTML 스킨 구조는 정해진 위치와 순서가 있습니다. 또한 위에서 설명드린 러시아 인형과 같은 구조이기 때문에 이들 중 태그가 잘 못 수정되면 스킨 전체가 망가져 오류가 발생하기도 합니다. 그렇기 때문에 HTML에 대한 지식이 전혀 없는 경우에는 대체 어디를 어떻게 수정하고 고쳐야 하는지에 대해 전혀 모르므로 스킨 편집이 어려울 수 밖에 없습니다.

티스토리 내에서의 CSS 구조

사람의 뼈 구조가 형성이 되면 다음 해야 할 일은 바로 살을 붙이고 옷을 입히는 일 입니다. 어렸을 적 초등학교 미술시간 때 찰흙만들기가 생각이 나는군요. 처음에는 철사로 뼈대를 잡고, 포즈가 완성 되었으면 철골 주변으로 찰흙을 씌워 몸을 형성하죠. 그리고 다 마르면 색칠을 해서 멋들어진 형태로 최종 완성합니다. CSS는 HTML의 뼈대에 살을 씌우고 옷을 입히는 역할 입니다.

위에서 설명드린 태그들 중 <header>, <aside>, <section>, <article>, <footer> 등의 요소는 딱 이름이 정해진 요소여서 사용 위치가 거의 고정되어 있습니다. 또한 다른 태그 이름과 중복이 되지 않지요. 한 마디로 뼈 이름이 정해진 경우 입니다. 하지만 <div>의 경우는 얘기가 달라집니다. 스킨에서 가장 많이 사용되는 태그이면서 div라는 이름이 여러번 사용되기에 대체 어디 위치에 있는 div인지 구별이 안 됩니다. 그래서 우리는 이 div마다 별명과 이름을 부여하여 구별짓는 방법을 사용하게 됩니다. 그게 바로 CSS의 주요 역할 입니다.

그래서 div에는 id와 class라고 하는 값을 입력하는게 대부분 입니다. 저 위의 예시에서도 id와 class값이 div 요소마다 모두 들어가 있습니다. 잘 보시면 각각 다른 class값, id값을 할당받은걸 확인하실 수 있습니다. <div> 라고 하는 뼈대가 3개가 있다고 가정해 봅시다. 하나는 홀쭉한 노란색 인형을, 다른 하나는 보통 체격의 파란색 인형을, 마지막 하나는 뚱뚱한 빨간색 인형을 제작하고 싶습니다. 그래서 각자 스타일을 저장해둔 장치가 있습니다. 이 장치에 div 뼈대를 넣으면 해당 장치의 스타일대로 변신하게 됩니다. 장치 이름도 지었습니다. 아래와 같이 구별짓습니다.

A1 : 홀쭉함 + 노란색

A2 : 보통 + 파란색

A3 : 뚱뚱함 + 빨간색

여기에서 A1, A2, A3는 클래스(class)명이 됩니다. 그리하여 각 div를 이 클래스명에 연결을 해서 스타일을 꾸미게 됩니다. 사용 방법은 <div=class"A1"> 이라고 하면 됩니다. 주의 사항은 큰 따옴표를 사용하고, 그 안에 클래스명을 입력하여 연결시킨다는 것 입니다.

그러면 id는 뭘까요? 하고 의문이 생길 수 있습니다. id의 역할도 class와 큰 차이는 없습니다. 다만 id값은 북마크의 개념이 추가 포함되어 있습니다. class는 사용 범위가 무척이나 다양합니다. 친효스킨의 경우 사이드바에 들어가는 모듈들을 생각해 봅시다. 카테고리, 추천글, 최근글, 인기글, 댓글 등등의 div 스타일들이 다들 비슷합니다. 카테고리에도 추천글에도 최신글에도 인기글에도 댓글에도 각각 div가 사용되었는데 이 모두를 동일한 스타일로 만들고 싶다면 굳이 여러개의 클래스값을 만들어서 일일히 부여하지 않아도 될 겁니다. 그냥 동일한 스타일 속성을 가지고 있는 클래스값을 하나 만들고 이 클래스값을 각 모듈에 연결을 하면 됩니다. 그러면 모든 모듈의 기본 스타일이 다 똑같아지겠죠. 이 클래스값을 AAA라고 만들었다면 사이드바의 각 모듈을 구성하는 메인 <div>에는 필시 <div class="AAA"> 처럼 사용되고 있다는 뜻 입니다. 근데 id의 경우는 약간 다릅니다. 보통 어떤 커뮤니티 사이트에 가입을 한다고 하면 ID는 개인당 하나만 생성할 수 있죠? 이것과 비슷한 개념 입니다. CSS에서 id명은 하나만 만들 수 있습니다. 그렇기 때문에 어떤 특정한 위치나 특정한 영역을 지정하고 차후에 유지 보수를 위해서 쉽게 그 영역을 찾고자 할 때 id를 사용하여 스타일을 꾸며줄 수 있습니다. 보통 티스토리의 스킨에서는 본문인 <body> 요소에 티스토리에 제공하는 치환자라고 하는 id 값을 입력하여 사용합니다. 그리고 친효스킨의 경우는 최상단 혹은 최하단의 영역에 사용된 div에는 id값을 부여해서 해당 영역을 쉽게 검색하고 쉽게 스타일을 편집할 수 있도록 제작했습니다. id와 class는 이런 차이가 있다는 것 정도만 알고 계시면 될 것 같습니다.

See the Pen HTML CSS 기본 개념 설명 by rgy0409 (@rgy0409) on CodePen.

설명드리면서 예시로 들었던 부분을 시각적인 이해를 위해서 간단히 코딩해 봤습니다. HTML과 CSS 상태를 살펴보시기 바랍니다. 보시면 HTML의 div에 class값으로 연결을 해주었고 이것을 CSS에서 어떻게 세팅했는지 살펴봐 주시기 바랍니다. class는 CSS에서 .을 사용하여 연결짓게 됩니다. <div class="A1">의 A1은 CSS에서 .A1로 입력합니다. 마찬가지 방법으로 <div class="A2">는 .A2로 입력했습니다. 이와 비슷한 개념으로 id는 #을 사용하여 연결짓게 됩니다. 이런 방법으로 CSS에서 아이디명과 클래스명을 연결하게 된다는 것 정도만 알고 계시면 될 것 같습니다.

내 마음대로 웹코딩 커스터마이징을 하려면 뭘 배워야 하나요?

웹코딩 입니다. HTML과 CSS를 배우시면 됩니다. 자바스크립트도 배워두면 좋긴한데... 이건 좀 어렵더라구요. 저도 계속 배워나가고 있는 중 입니다. 국비교육으로 웹코딩 과정도 있습니다. 한번 알아보시고 상담 받아 보시는것도 괜찮을 것 같습니다. 만약 여건이 안 된다면 유튜브에도 강좌가 엄청 많습니다.

마무리

최대한 이해하기 쉽게 설명을 드린다고 작성하긴 했는데 전달이 잘 되었는지 의문이네요. 저 역시 티스토리를 처음 접했을 당시에는 아무것도 모르는 풋내기였습니다. 애드센스를 알게 되면서 코드를 어디에 넣어야 하는지를 몰라서 맨땅에 해딩하듯 정보를 찾아가면서 시작했던게 HTML과 CSS 였습니다. 대충 개념을 알고나서 학원에서 배우니까 엄청 머릿속에 잘 남고 공부가 너무 잘 되더군요. 이래서 예습이 중요한 모양입니다. 그리고 배운 내용을 다시 한 번 티스토리에 복습겸 포스팅을 하니까 확실히 더 오래 기억하게 되는 것 같습니다. 나중에 까먹어도 얼마든지 블로그에서 다시 한 번 보고 내용을 떠올릴 수 있어서 좋구요. 중요한건 역시 목표 달성을 위해서 노력해야 한다는 점 이라고 생각합니다. 여러분들도 티스토리를 위해서 뭔가 실천하고자 마음 먹은 일이 있다면 잘 되든 안 되든 결과 생각하지 마시고 일단은 실천하는 자세를 가져보시기 바랍니다. 지금 당장은 해보는게 더 중요하니까요. 끝.

이 글도 읽어보세요