웹디자인 기능사 시험예제/5-4) 기타 패턴

웹디자인 기능사 시험예제/5-4) 기타 패턴

기타 패턴 2) 갤러리 over

갤러리에 마우스를 올렸을 때 오퍼시티 수치를 낮추는 기능입니다. html, css 해설은 하지 않습니다. 갤러리를 만드시면 됩니다. javascript 마우스를 올렸을 때(mouseover) : opacity 값이 0.5~0.8이 되고, 마우스를 내렸을 때(mouseleave) : opacity 값이 1 이 되도록 만드시면 됩니다. 변화량이 보이는지 안 보이는지 잘 보고 수치는 적당히 조절해 봅시다.

웹디자인 기능사 시험예제/5-4) 기타 패턴

4_기타 패턴 1) 탭 메뉴

html 탭 메뉴의 구조는 기본적으로 다음과 같습니다. - - 공지사항 - 갤러리 - - *table 간략화 - *img 간략화 핵심은 메뉴 영역과 컨텐츠 영역을 나누는 것입니다. css 여기서 menu 따로, contents따로 꾸며주면 됩니다. 중요한 것은 첫 화면에는 공지사항 컨텐츠가 출력이 되고 있도록 맞춰 둬야 합니다. 즉, 1번째를 제외한 나머지는 출력되면 안 됩니다. 이때 :not(:first-child)를 사용합니다. (.main .tab .contents li:not(:first-child){display:none;}) 또한 2번째 영역만 지칭하기 위해서는 nth-child(2)를 사용해 줍시다. 2번째 리스트만 속성을 지정할 수 있습니다. .main .tab .contents li:nt..

frogOlis
'웹디자인 기능사 시험예제/5-4) 기타 패턴' 카테고리의 글 목록