0310

sinsin·2022년 3월 10일
0

'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.com
  • paint-box.com
  • 10x19.co
  • www.z-o-o.fr
  • schwartzmedia.com.au
  • tolv.dk/

0개의 댓글