썸네일 컨테이너를 추가해봅시다
웹사이트에 처음 들어가면 다양한 썸네일들로 구성되어 있지요. 이 썸네일들은 8개, 4개, 3개 등이 모여 하나의 새로운 영역을 만듭니다. 이 썸네일 컨테이너를 만들어보겠습니다. 썸네일 컨테이너를 통해 float:left속성을 잘 이해하면 코딩에 두려울 것이 없습니다.
가장 먼저 해야 할 일은 컨테이너를 만드는 것입니다. div class="conA"와 같이 클래스를 사용해서 아래와 같이 노란색의 컨테이너를 만들었습니다.
이번에는 썸네일 컨테이너에 리스트를 추가할 것입니다. 먼저 3개짜리 컨테이너를 위해 3개짜리 리스트를 넣겠습니다. ul태그를 사용해서 리스트를 생성합니다. 그러면 3줄짜리 리스트가 생성되고 앞에 불릿이 생겨납니다. list-style-type속성을 none으로 해서 우선 불릿을 제거해줍니다.
가장 중요한 순간입니다. ul속의 li에 float:left속성을 지정해서 줄이 아니라 칸으로 만들어야 합니다. 스타일시트를 잘 보세요.float:left를 주고 width를 3개니까 100을 3으로 나누어 33.3%를 주겠습니다. background는 우선 gray로 하구요. height값도 150px주었습니다. 영역을 확인해볼께요.
- 메뉴 1
- 메뉴 2
- 메뉴 3
자 이 상태에서 리스트 한 칸 마다 이미지를 넣어볼까요? 이미지를 클릭하면 해당 링크로 이동해야 하기 때문에, a태그를 먼저 넣고, 그 안에 img태그를 넣어봅니다.
으핫!!! 이미지가 너무 커서 뻥!!하고 터졌습니다. 빨리 li태그에 overflow:hidden속성을 주어서 넘쳐도 밖으로 나오지 않도록 수리합니다. img태그의 width속성을 100%로 해서 칸에 맞출께요~~ 이제 3개짜리 이미지 컨테이너는 완성입니다.
이번엔 일정한 여백이 생기도록 내부여백을 줘볼께요. 전체 conA 안에 padding값이 필요하지요. image과 left를 주겠습니다. 이번엔 속에 들어있는 li들은 margin값이 필요해요. right와 text을 줍니다.
이번엔 이미지만 있는 거 말고, 밑에 캡션도 넣어볼께요~ 이미지를 빼고 캡션을 넣었습니다.
이번엔 다시 image클래스 안에 img를 넣습니다. 마지막으로 text클래스에 적절히 padding을 설정합니다.
컨테이너 A
드디어 conA라는 하나의 예제 썸네일 컨테이너가 완성되었죠. 이것을 가지고 다른 컨테이너를 쉽게 만들 수 있습니다. css를 수정해서요. 소스에 들어있는 스타일시트를 참고해보세요.
