제 블로그를 방문하신 분 중에 가끔, 글 밑에 어떻게 그런 밑줄을 그을 수 있는지 궁금해하시는 경우가 있습니다.

이렇게 말이죠. ^^

그때마다 자세히 말씀드린다고 했습니다만, 글로만 설명을 드려서 내용이 부족할 수 있고 해서, 이번에 조금 자세한 설명을 준비해 보았습니다. 다음에 또 물어 오시면 링크 주소를 알려 드리면, 저도 편하고 해서. ^^;

웹 페이지는 읽을 수 있는 부분 외에도 글을 치장할 수 있는 코드를 함께 넣을 수 있습니다. 보기 좋은 떡이 맛도 좋다고, 웹 페이지는 다른 분을 위한 글이라고 해도 과언이 아닙니다. 그러므로 읽기 좋으면서도 깔끔하고 멋지게 보이는 것이 좋겠죠. 그래서 웹 페이지에는 본문과 함께 디자인 요소를 함께 가지고 있습니다.

안녕하세요, jwmx블로그입니다.

위의 문장은 HTML 문장을 브라우저가 분석하여 출력한 부분입니다. 즉, 실제 HTML 문장은 아래와 같습니다.

<p>안녕하세요, <font color="#990000"><strong>jwmx블로그</strong></font>입니다.</p>

<p></p> 로 묶은 것은 행을 바꾼 새로운 문장을 출력한다는 HTML 코드이며, <font color>는 글자의 색을 지정하며, <strong>은 글자를 굵게 출력하라는 뜻입니다. 이렇게 웹 페이지는 출력하려는 문자열과 디자인 요소를 함께 가지고 있습니다.

여기에 문장 전체를 묶는 <p> 코드에 아래와 같이 디자인 요소를 첨가하면 출력되는 모습은 사뭇 달라집니다.

<p style="background:#00FFFF; color:#0000FF">안녕하세요, jwmx 블로그입니다.</p>

안녕하세요, jwmx 블로그입니다.

<p> 코드에 stryle을 코드를 적용하여 문장 전체의 배경과 글자 색을 변경했습니다. style로 적용되는 요소는 매우 다양합니다. 제가 부제목으로 사용하는 style 문장은 아래와 같습니다.

<p style="BORDER-BOTTOM: #ccc 1px solid; COLOR: #4070aa; TEXT-ALIGN: left; font:12px Tahoma; font-weight: bold; margin-top:40px">안녕하세요, jwmx 블로그입니다.</p>

이 HTML 문장은 웹브라우저에 아래와 같이 출력됩니다.

안녕하세요, jwmx 블로그입니다.

style에 지정하는 문장은 디자인 요소별로 ; 문자로 구분해 주면 되며, 위에서 사용하는 요소를 한 가지씩 알아보면 아래와 같습니다.

• BORDER-BOTTOM: #ccc 1px solid;
  문장의 4 변 중에 밑변에 대해서만(BODER-BOTTOM) #ccc 색상으로, 1px의 두께로 이어진(solid) 선을 그어라.
• COLOR: #4070aa;
  문자 색상을 #4070aa 으로 출력하라
• TEXT-ALIGN: left;
  문장을 왼쪽 정렬로 출력한다.
• font:12px Tahoma;
  문장의 폰트는 Tahoma로, 크기 12px로 출력한다.
• font-weight: bold;
  문장을 두껍게 출력하라.
• margin-top:40px
  위 문장과 40px 띄워라

그러나 style 문장을 자주 사용해야 한다면 매우 불편합니다. 그래서 따로 이런 디자인 요소를 다른 파일로 모아 놓고 이름을 붙여놓았다가, 이름만 지정하여 사용합니다. 이렇게 style 을 모아 놓는 것을 style sheet 라고 하며, 보통 파일로 저장할 때 style.css 로 저장합니다.

Tistory 스킨도 메뉴 이름부터 HTML/CSS 편집이라고 되어 있고, 스킨 편집 페이지로 가 보면 skin.HTML 과 style.css 로 2개의 부분으로 나뉘어져 있습니다. 그러므로 style.css 에 자주 사용하는 style를 아래와 같이 추가합니다.

여기서는 이름을 jwtitle로 지정하여 추가했습니다. 이제 앞으로 Tistory에서 글을 올릴 때, HTML 코드로 아래와 같이 입력하면,

<p clss="jwtitle">안녕하세요, jwmx 블로그입니다.</p>

아래와 같이 jwtitle 이름으로 지정된 style로 출력됩니다. 주의하실 것은 이름을 지정할 때에는 style 가 아니라 class코드를 사용합니다.

안녕하세요, jwmx 블로그입니다.

이제 다양한 style를 적당한 이름으로 지정하신 후, 사용하시면 더욱 다양한 모습의 글을 올리실 수 있습니다.