css 초짜 질문....

[눈팅]

중소기업에서 일을 하기 때문에 php 개발과 웹디자인을 같이 하고 있습니다.

그동안 css 는 단순한 기능만 이용하였는데, 이제부터 공부 좀 해서 하나씩 하나씩 표준을 지키면서 잘 하고 싶습니다.

그런데 css 는 쉽게 설명한 내용이 없는 것 같네요..

코너(꼭지라고도 부르더군요.) 를 만들기 위해서 이제 까지는 테이블을 만들어서

맨 위에는 이미지를 넣고, 두번째는 백으로 이미지를 삽입하고, 세번째는 마무리 이미지를 넣고, 두번째 td 안에 테이블을 또 삽입을 하여 왼쪽에는 블렛을 넣고 오른쪽에는 내용을 넣는 방법으로 이용을 했었습니다.

내용이 두 줄정도로 늘어나면, 블렛의 위치가 약간 어정쩡해서 그냥 top 으로 이용을 했었는데, 이부분을 어떠한 방법으로 바꿔야 할까요?

[hyeonseok]

1. 라운드 코너
라운드 코너의 경우 가로가 유동적인가, 세로가 유동적인가에 따라서 차이가 있습니다.
폭이 200px 라면 600px 짜리 이미지에 상단, 중간, 하단을 가로로 배치 합니다.
그렇게 하고 background-position 을 사용하여 해당 영역을 보이게 합니다.

<div>
<h2></h2>
<ul>
<li>어쩌고</li>
<li>저쩌고</li>
</ul>
</div>

했을때 div 에는 중간 이미지를 repeat-y 로 깔고
h2 에는 상단(background-position: -200px top;) 을, ul 에는 하단(background-position: -400px bottom;)이미지를 깔아 줍니다.

가로세로가 둘다 유동적인 경우는 매우 복잡하고 많이 찾아 볼수 없는 경우래서...그리고 HTML 에 따라서 달라집니다. (그때그때달라요... )

2. 불렛의 경우는 ul에 list-style:none; 을 주고 li에 padding-left 를 사용해서 bullet 이 들어갈 위치를 잡아줍니다. 그 padding 영역에 bullet 을 background 로 넣습니다. 그러면 두줄이 되더래도 background 는 고정이 되고 text 들의 indent 도 유지 되기 때문에 원하시는 모양을 얻으실 수 있습니다.