TIL. westagram(인스타 클론) 7/28

예흠·2020년 7월 27일
0

wecode

목록 보기
9/43
post-custom-banner

1. 각각 맞는 수치 margin 하기

main과 aside모두에게 오른쪽 왼쪽으로 margin을 auto 해줍니다.

2. 두개 부모 만들기

feeds 전체를 감싸면서 asideWrap의 크기만큼 더한 부모를 만듭니다.
wrapMain = feeds + asideWrap (width)
그리고 각각 다른쪽에 %로 값을 부여합니다.

3. relative, absolute, fixed

큰 부모를 relative로 해서 두개 모두 감싼후에

aside를 오른쪽 위치로 absolute 해줍니다. (부모위치를 오른쪽으로 옮기기 위해서)

그리고 그 안에 div를 fixed해주면 완성입니다. (div가 부모위치에서 고정)

- 공부하기

  • tranform: translateX(-50%)
    (좌표 값 이동)

  • z-index: ;
    (ppt에서 앞으로 보내기와 유사)

  • fixed는 left, right, top, bottom등을 주면 부모를 무조건 무시한다.
    그러나 아무것도 주지 않으면 부모 위치에서 나타난다.

profile
노래하는 개발자입니다.
post-custom-banner

0개의 댓글