[7월 26일]

정서이·2022년 7월 26일

1) 학습한 내용

1.마우스오버시 이미지 테두리

(1)수정 전


(2)수정 후


img_wrap태그에도 border-radius:20px; 을 추가하였음

2.메뉴 더보기 버튼

(1)디자인 시안

(3)결과

(4)문제점


헤더 뒤로 가려져서 보이지 않음

2) 학습내용 중 어려웠던 점

마우스 오버시 테두리가 둥글게 되지 않는 것을 z-index를 설정하여도 안되었다.

3) 해결방법

z-index가 아니라 border-radius:20px;를 이미지를 감싸는 태그에도 적용하니까 바로 해결되었다.

4) 학습소감

이미지를 연결하는 것은 쉽지만 세분화해서 링크가 연결되게 되어야하므로 메뉴바를 이미지가 아니라 코드를 이용해서 만들고 있는데 시간이 오래걸리지만 60%는 완성을 해서 뿌듯하다.

0개의 댓글