'css layout master class' 를 들으며 챌린지와 클론코딩을 진행하고 있다.
📝 NOTE
-
img 사이에 지정한 적 없는 gap이 생긴 경우, img의 display를 block으로 바꾸어주면 해결.
-
img가 삽입된 grid 요소에 gap이 작동하지 않는 경우, img의 크기가 container를 벗어나는 것.
👉 img의 width나 height, 혹은 둘 모두를 100%로 지정해주면 됨. -
position: fixed & sticky
fixed: popup처럼 스크롤과 상관없이 그 자리에 고정되게 할 때 사용
sticky: 스크롤하다가 일정 지점에서 멈추게 하고 싶은 경우에 사용
ex) 스크롤 시 header 변경하는 경우 -
화면의 반만 스크롤되는 메인은 다음과 같이 작성.
#scroll{
width: 100%;
height: 100vh;
display: grid;
grid-template-columns: 1fr 1fr; /* container 가 각각 너비 50%씩을 차지하게 함. */
.banner{
& > div{ width: 100%; height: 100vh; }
}
.textbox{
.text_wrap{ /*스크롤 시 고정할 콘텐츠를 container 내부에 wrap으로 묶어 sticky로 고정*/
width: 100%;
position: sticky;
top: 50%;
transform: translate(0, -50%);
text-align: center;
}
}
}
💬 Comment
기본적인 레이아웃 클론코딩은 이제 제법 거의 비슷하게 구현할 수 있고 속도도 많이 빨라졌다. (2~3시간?)
하지만 아직 애니메이션(특히 js)은 많이 어렵다.
반응형도 포폴 제작 때 몇 번 만들어본 게 다라 아직 코드도 지저분하고 능숙하지 못하다.
일단 나머지 사이트 클론코딩할 땐 애니메이션 부분은 최대한 스스로 구현해서 만들어보도록 하고,
이 수업이 전부 끝나고 나면 구현한 사이트를 반응형으로 바꾸어보면서 공부를 해야할 것 같다.
⚪️ to go ・・・
besthorrorscenes.compaint-box.com10x19.cowww.z-o-o.frschwartzmedia.com.autolv.dk/
