들어가기 전에

이미지 리스트 만들기 실습은 2번의 걸쳐 강의가 진행됩니다.

이번 시간에는 간단한 이미지 리스트를 먼저 만들어 보고, 

다음 시간에는 리스트에 기능을 추가하여 콘텐츠를 꾸미는 순으로 진행해 보겠습니다

제작 가이드  

주요 기능 

• 메인, 서브 리스트로 구성된 2단 이미지 리스트 
• 메인, 서브 리스트는 가로 중앙 정렬 처리
  
• 메인 리스트는 이미지 위 레이어 형태의 말줄임 텍스트 노출
• 서브 리스트는 이미지 하단에 말줄임 텍스트 노출

스타일 정보

• 메인/서브 리스트 - 전체 가로 너비: 1000px
  
• 메인 리스트 -  메인 이미지: 322x215, 배경색: #ececec, 외곽선: 1px/solid/#000(투명도 5%)
• 메인 리스트 - 카테고리 폰트: 14px/#fff, 제목 폰트: 18px/#fff 
• 서브 리스트 -  서브 이미지: 188x141, 외곽선: 1px/solid/#000(투명도 3%)
• 서브 리스트 - 카테고리 폰트: 12px/#7ba7df, 제목 폰트: 15px/#090909
  

주요 태그 및 속성 

• HTML
  • div, img, a, ol
• CSS
  
  • float, position, ellipsis, :after, :nth-child

참고 링크