칼라 밑줄을 그으면서 글쓰기

2008.07.12 18:20 이런저런/수다 떨기

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

이렇게 말이죠. ^^

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

걱정의 말씀제가 전문 웹디자이너가 아니고, 필요할 때마다 웹에서 정보를 구하다 보니 전문용어부터 제대로 알지 못합니다. 설명 중에 매우 엉터리인 부분이 있을 수 있습니다. 이점 양해를 부탁드리며, 아울러 잘못된 부분을 지적해 주셔서, 더욱 알찬 내용으로 이끌어 주신다면 감사하겠습니다. ^^

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

안녕하세요, 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.HTMLstyle.css 로 2개의 부분으로 나뉘어져 있습니다. 그러므로 style.css 에 자주 사용하는 style를 아래와 같이 추가합니다.

사용자 삽입 이미지

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

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

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

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

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

이 댓글을 비밀 댓글로
    • asayo@hanmail.net
    • 2008.07.12 19:53
    컴퓨터를 잘하시는거 같아서 급 질문 드리는데요 ....
    제가 이번에 조립 컴퓨터를 샀는데요 그쪽에 올라온 사양이랑 완전히 다르게 보냈더라구요
    메인보드도 디앤디컴 GeForce 7050 DREAM GF7050V 775 이거인데
    ECS GeForce 7050 GF7050VT-M5 이것으로 보냈더라구요
    그리고 중요한건 그래픽 카드인데
    ASUS 지포스 8600GT EN8600GT 512MB 터보 이것으로 되었있는데
    KHAN 지포스 8500GT 칸 DDR2 256MB 이렇게 생긴걸 보냈더라구요

    그런데 중요한거 생긴건 8500gt 인데 나오는건 8600gt로 나오네요 그럴수 있나요???
    딱지 같은게 붙어 있고 8600gt 256mb 040301503 이런게 붙어 있어요
    시디는 대산 아이티 라고 적혀 있구요~~

    이거 8500gt 를 8600gt 로 만든거 아닌가요

    이거 열받아 죽겠네요 ㅡㅡ+ 이거 어떻게 보상 받아야하죠????
      • 개념방전
      • 2008.07.12 22:20
      산 곳에 전화하시는게 빠를 듯합니다.
      소비자보호원에 신고하신다고 하면 일처리가 손쉬울겁니다.
    • neoaeo
    • 2008.07.12 22:45
    <strong> 안녕? <strong> 대신 <b> 안녕? </b> 라고도 해 보세요 ㅋㅋ
  1. 전 css 속의 H 시리즈를 다 바꿔서 H1, H2 이렇게 스타일 별로 나눠서 쓰는...(나름 좋아요~)
  2. 훗~ 친절히 트랙백도 남겨 주셔서 너무 감사합니다.^^
    한결 깔끔하고 세련된 글 단락 제목을 만들 수 있을 것 같아서 벌써부터 막 글을 쓰고 싶어 집니다.ㅋㅋ
    • 오타발견
    • 2008.07.13 15:07
    덕분에 좋은 내용 배우고 갑니다.
    그런데, 저는 html을 잘 모르지만, 글 내용을 읽다보니 아무래도 오타인 것 같아 알려드립니다.
    마지막 예제를 설명하는 html 문장 (회색 배경처리 된 부분), 그러니까
    <p clss="jwtitle">안녕하세요, jwmx 블로그입니다.</p>
    여기에서 의 clss가 cl"a"ss로 되어야 하는 것 아닌가요?
    저같은 정말 초보자들은 이런 것에도 혼란스러워 할 수 있을 것 같아서요. ^^
    수정하신 후에 제 글은 지우셔도 좋습니다. 좋은 하루 되세요~
    • 좋은날
    • 2008.07.13 20:37
    오 저런 방법이 있군요..
    정말 태그는 무궁무진한듯...
    감사합니다 ^^
    • 굳잡
    • 2008.07.14 11:37
    흑...style로 저런것도 되는군여~ 멋집니다~캬~
    • 레위인
    • 2008.07.16 13:23
    질문이 있는데요~ 그럼 글 쓸때 평소의 edit 모드로 쓰는게 아니라 항상 html 모드로 놓고 써야하는가요? 그냥 edit 에서는 태그가 안 먹는거 같아요...
    • 네, 이렇게 필요할 때만 html 모드를 사용하시며 되겠습니다.
      Edit 모드로 변경하신다고 해서, 설정된 내용이 사라지지는 않습니다. ^^
    • 서식으로 저장해 놓으시고 사용하셔도 되겠습니다. :)
  3. 좋은 내용 감사합니다. :-)
  4. ㅎㅎㅎ 문외한이 보니 신기할 따름입니다. 감사합니다.
  5. 좋은 내용 감사해요