Program/HTML.CSS

농협-퀵아이콘박스 작업과정

주니코리아 2020. 7. 13. 00:41

1. box-2를 (con-min-width) 만든다. div.con>ul.row>li.cell*7> a.block.relative[href="#]를 만든다. 

2. a자식 img을 유령화시키기 위해 relative해주고. img를 a안에 꽉채우도록 width:100%,height:100%를 준다. img는 style = "background-image:url(..);" 를 주었기 때문에 background-position, repeat값을 입력한다.

3. hover 시 색깔변화. 이미지를 번갈아 보여줄수 있도록. display:none, block를 한다. 

4.  a안에 span을 3개 사용. off-img, on-img, title-box로 코딩.

5.title-box, title 유령화 시킨다. title-box 유령화시킨후 꾸미고 그다음 title