noimage

Background를 활용해 보아요 : 공지사항 박스의 형태 만들기

Background를 활용해 보아요.의 두번째 예제입니다.
제로보드 시스템에서 흔히 쓰던 최근글 표시와 비슷한 것이랍니다.

설명

index 화면 등에 타이틀이 있는 링크 리스트를 표시하려고 합니다.
요런 것 말이예요.

notice_box

기존의 방식 예제

기존 테이블 방식을 한번 살펴보겠습니다.

img에 alt 텍스트도 없고, table도 td만 사용한 형편없는 코드가 나와버렸습니다. (XHTML방식이 아니라 HTML 4.01로 해봤어요. 기존 코드들은 거의 HTML 4.01방식이니까)

웹 표준에 따라 작성해 보기

일단은, XHTML 1.0에 맞춘 방식으로 해보겠습니다.
전체 형태와 아이콘 등에 background를 사용하게 될거예요.

제목 부분

“쿠키넷 공지사항” 부분부터 해볼까요.
앞에 아이콘이 있는 타이틀 항목입니다. 한 영역을 대표하는 제목의 성격이니까 헤딩항목을 이용해야겠어요. h1,h2,h3..어떤 것을 쓸지는 상황에 따라 다르지만 h1일 가능성은 매우 낮고.. 여기서는 가장 무난한 h3로 해보겠습니다.
일단 h3안에 텍스트를 넣습니다.

이제 아이콘을 넣고, 글씨 모양을 꾸며야겠습니다.
아이콘은 이미지로 넣지 않고, 백그라운드로 넣습니다.

icon_01.gif 파일을 백그라운드로 넣고, 위치는 왼쪽으로 붙고(좌로부터 0px) 위에서 1px내려온 부분으로 잡았습니다.
y값의 경우 50%로 하는 것도 좋은 방법입니다.
다만 컨텐츠가 길어질 경우에, 글은 두줄로 나오고 아이콘는 세로로 중간에 위치하게 될 수 있습니다.
여기서 h3의 경우는 고정된 형태이기 때문에 %를 사용해도 되지만 전 그냥 고정할랍니다.

목록 부분

실제 공지사항이 뿌려지는 부분을 만들어 봅시다.
목록 속성을 가지고 있기 때문에 list 항목을 사용하여 코드를 작성합니다.

코드가 훨씬 간결하고 알아보기 쉬워졌지요?

이제 제목 부분과 동일하게 아이콘을 백그라운드로 설정해 줍니다.

아참, 위에서 빼먹었는데-
padding-left를 넣는 것은, 배경으로 아이콘 이미지를 넣고 이미지 만큼의 좌측 여백을 넣어 주는 것 이랍니다.

이제 다 끝났어요. 🙂
조금 더 예쁘게 꾸민 예제 파일을 보세용.

최종 예제 파일

위의 모든 예제를 포함 한 파일 보기

 

기타 설명

크게 신경 쓰지는 않아도 될 것 같지만 참고사항입니다.
background를 사용할 때, 기본값이 정해져 있는 속성(background-repeat:repeat; 등)의 경우 별도로 값을 지정하지 않아도 되지만
background 속성을 사용하면서 단축코드으로 사용할 경우는 배경 색상을 입력하지 않으면 validator에서 warning을 띄웁니다.

그리고 위 예제에서는 list의 아이콘 이미지를 배경 이미지로 사용하였지만, list에는 기본적으로 icon을 이미지로 사용할 수 있는 속성이 있습니다.

위와 같이 사용하면 되는데요, 저런 경우엔 이미지의 위치를 조절할 수 없는 작다면 작은 단점이 있습니다.
또 하나 들자면 background를 사용할 경우엔 http 리퀘스트를 줄일 수 있습니다.
취향이나 형태에 맞게 list-style을 사용할지 background를 사용할지 결정하면 되겠습니다.

  • 무려 6월에 써놓은 글을 이제서야 포스트합니다 -.-;
    회사에서 서비스 론치 기다리다가 정리 했습니다;
    전체 형태에 대한 것은 정리도 못 했네요.
    조만간 업데이트 🙂

  • 흠? 근데 http request 랑은 상관 없을 듯 한데? 어짜피 백그라운드로 보여주든 이미지 태그로 보여주든 파일은 요청해와야 하는걸 😉

  • 이미지가 저런식으로 적게 들어가는 경우에는 큰 차이가 없을 텐데, 많은 이미지들를 불러와 사용할 경우엔 차이가 있잖아.
    HTML에서 이미지를 하나씩 request 하는 거랑 CSS에서 불러들이는 거랑 차이가 있어. 문서 찾아봐야겠당 ^^ㅋ

  • 오~~ 역시 누나 멋진뎅~
    하나 배워감!!

  • 개인적으로는 list-style로 블릿 넣는것보다
    background로 넣는게 유동적이라 쫌 사랑해 흣흣;

  • 제 경험상 ie에선 background로 list-style을 지정해주면, 깜박이면서 매번 로딩하는 버그가 있더군요. 그게 hover 스타일로 지정했을 때만 그런 건지는 모르겠지만요. (잘 기억이 안나는군요)

  • hover로 지정하면 잘 깜빡이고요.. 그냥 고정되어 있는 형태면 아마 깜박이진 않을 거예요 🙂

  • yser 님이 말하신 버그를 해결하는 방법 중에 apache 의 mod_expire 을 이용하는 해결 책이 있더군요 😉

    .htaccess 같은 곳에 다음과 같은 코드를 넣으면 됩니다.

    ExpiresActive On
    ExpiresByType image/gif A2592000
    ExpiresByType image/jpeg A2592000
    ExpiresByType image/png A2592000

  • 냐~ 서버 만지는건 넘 어려운 작업이닷 @.@

  • Pingback: Background를 활용해 보아요 at kukie()