코딩
5월 13일
상여브
2020. 5. 14. 00:09
반응형 페이지 만들기 주의사항
1.상단 로고
- 이미지를 a로 감싼다.
2. 메뉴 바
-.before, after를 입힌 식에 left:0;을 써주었으니 다 왼쪽에 몰려있다
그것을 오른쪽으로 풀어주기 위해
-.menu-bar > .menu-box-1 > ul > li > a::after { left:auto; right:0; }
이처럼 에프러를 오른쪽으로 풀어준다.
-수직 중앙정렬 top:50%; transform:translateY(-50%);
3.배너바2
-전체 이미지들을 25%로 일치 시켜주고
-nth-child를 따로 줌으로서 그 이미지들은 50%를 준다
-@media를 통해 일정 픽셀 이하로 창을 줄였을 때 50%의 이미지들은 100%로
25%의 이미지들은 50%로 준다
-이미지들중 마지막과 마지막에서 두번째 이미지 올리기(유령화가 필요할 때는 맨 아래 이미지 두개가 올라와야할때
그 때(min-width) 만 조건을 만들어 주고 유령화 입히고 relative 입히고 나머지 진행
(1) 유령화
(2) 가두기(relarive를 주는 위치는?)
(3) 유령화 위치 지정( bottom:0; left:0;)
(4) 두 겹이 된 이미지 두장 중 last-child를 넓이 25% 입력