Mozilla 한국 커뮤니티

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

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

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

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

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

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

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 도 유지 되기 때문에 원하시는 모양을 얻으실 수 있습니다.