티스토리 CSS 수정하기, 스킨 수정
오늘은 CSS에 대해 알아볼까 합니다. 티스토리 블로그를 마음대로 꾸미려면 CSS는 어느정도는 필수로 알고 있는것이 수월한 꾸미기에 유리합니다.
CSS(Cascading Style Sheets)의 기본적인 개념입니다.
HTML을 이용해서 웹 페이지를 제작할 경우 전반적인 틀에서 세세한 글꼴 하나 하나를 일일이 지정해주어야 하지만, 웹 페이지의 스타일(작성형식)을 미리 저장해 두면 웹 페이지의 한 가지 요소만 변경해도 관련되는 전체 페이지의 내용이 한꺼번에 변경되므로, 문서 전체의 일관성을 유지할 수 있고 작업 시간도 단축된다.
따라서 웹 개발자들은 보다 풍부한 디자인으로 웹을 설계할 수 있고, 글자의 크기, 글자체, 줄간격, 배경 색상, 배열위치 등을 자유롭게 선택하거나 변경할 수 있으며 유지·보수도 간편하게 할 수 있다.
[네이버 지식백과] CSS [cascading style sheets] (두산백과)
티스토리에서 CSS를 이용하면 좋은 점이 무엇일까요? HTML 기본지식과 CSS의 기본적인 틀만 조금 배운다면 인터넷에 나와있는 정보들로 충분히 자신만의 스킨을 제작할 수 있습니다. 하지만 Javascript, Jquery 등의 프로그래밍 언어를 모른다면 반응형 홈페이지 등의 유동적인 스킨은 제작하기가 어렵습니다. 우선 티스토리에 CSS가 어떤 식으로 적용되는지 알아보겠습니다.
블로그 관리 -> 꾸미기 탭 -> HTML/CSS 편집 |
블로그 관리에서 HTML/CSS 편집 버튼을 클릭해주세요.
클릭 하시면 HTML과 CSS를 편집할 수 있는 창이 아래 처럼 새 창으로 나타납니다.
씁쓸한 글이 보이는군요.. 왼쪽에는 자신의 블로그 메인이 최신글로 설정되어있던 티에디션으로 설정되어있던 간에 무조건 최신글이 보여집니다. 티에디션은 티에디션 메인화면에서 수정해야 해요~. 오른쪽에는 3개의 탭이 보이는데요.
[HTML / CSS / 파일업로드] 이렇게 세개가 보이지만 오늘은 CSS에 대해 알아보기로 했으니 CSS탭을 클릭해 봅시다.
네! 처음보신 분들은 도대체 이걸 어떻게 알아먹나 싶으실 수도 있습니다. 전부 아실 필요가 없습니다. 몇가지 기능만 아셔도 됩니다.
HTML과 CSS |
HTML과 CSS는 뗄래야 뗄 수 없는 관계입니다. 둘 다 웹 프로그래밍에 있어서 없어서는 안되는 존재죠. 그중 HTML은 그냥 웹 그 자체라고 할 수 있습니다. 모든 웹프로그래밍 언어들도 출력물은 HTML로 이루어져 있으니까요.
CSS에는 HTML의 구성요소(Element)들을 꾸며주는 역할을 합니다. HTML에서 ELEMENT라 하면 div, span, a 등 <>로 감싸져 있는 요소입니다.
요런 식으로 말이죠. div에 세 개의 a가 있습니다. 각각 element에는 id와 class라는 속성을 부여할 수 있는데 CSS에서는 이를 이용해서 HTML문서를 꾸며줍니다.
<div id="tests"> <div id="testdiv"> 테스트 1 </div> <div class="testdiv"> 테스트 2 </div> </div>
이렇게 되면 id가 tests인 div 안에 id가 testdiv인 div하나 class가 testdiv인 div가 하나 생성된 것입니다. (div는 box로 생각하시면 됩니다.)
위의 글상자 안에 코드를 넣었습니다. (속성 미적용을 위해 tests div로 묶지 않았음.)아직 설정된 속성이 없기 때문에 아무것도 보이지 않습니다. 내부에 어떠한 content도 없기 때문에 크기가 0인 셈이죠. 이제 CSS로 속성을 부여해 보겠습니다.
보통 홈페이지 에서는 style.css파일을 따로 생성하여 작성해 놓고 호출 하지만 HTML문서에서 바로 CSS를 활용할 수 있습니다.
바로 HTML문서 안에서 <style></style> 이라는 엘리먼트 안에 css 코드를 작성할 수 있습니다.
id 속성을가진 element 는 #id명 으로 호출 가능하며 class 속성을 가진 element는 .class명으로 호출할 수 있습니다. 둘 다 가지고 있다면 둘 다 사용 가능 합니다.
<style> #tests div { width:30px; height:30px; } #testdiv { background-color:#000000; } .testdiv { background-color:#AAAAAA; } </style>
위처럼 적용해 보겠습니다.
이런식으로 되는 것입니다. 두 div 모두 width:30px, height:30px이 적용 되었으며 첫번째 testdiv에 #000000 (검정색)이 적용됐고 두번째 testdiv에 #AAAAAA (회색)가 적용된 모습을 보실 수 있습니다.
다른 속성들도 매우 많으며 꾸미길 원하는 속성을 구글에서 검색하시면 바로 예제나 사용법을 익히실 수 있습니다.
예를 들어 'div 위치' 라는 키워드를 검색하면
아주 정보가 수두룩 빽빽합니다. 진짜 css에 대한 정보는 차고 넘치기 때문에 알맞는 정보를 찾아서 사용해보세요.
다음엔 CSS의 그러한 속성들을 티스토리에 꾸미기에 적절하게 적용 시키는 방법을 포스팅 하도록 하겠습니다. 감사합니다!
