[CSS] 애플 웹사이트 인터랙션 클론! (인프런 강의 추천 및 후기)

듣게 된 계기

항상 css가 너무 부족하다라는 생각이 들었다. 그래서 CSS 실력을 키우려고 여기저기서 개념들을 익히고 따라해보았지만, 잘 와닿지 않았다. 막연하게 따라하는 것보단 역시 실제로 하나의 웹사이트를 만들어보는 것이 좋을 것 같았다. 어떤 사이트를 만들어야 도움이 될까 여기저기 찾아보다가, 잘되어있는 웹사이트 중 하나는 애플 사이트라며 따라해보라는 유튜브 영상이 있었다. 마침 회사분 한분이 유사한 내용의 인프런 강의를 소개시켜주셔서 듣게 되었다.

애플 웹사이트 인터랙션 클록! - 인프런 | 강의

애플 웹사이트 인터랙션 클론! - 인프런 | 강의

강의는 약 3000명(2022년 기준) 정도의 수강생이 듣고 있을 정도로 인기가 많았고, 실제로 따라하다 보니까 기초적인 것도 차근차근 알 수 있어서 너무 좋았다.

 

강의 영상별 메모

강의를 듣다가 기억하면 좋을 것 같은 내용들을 영상별로 정리해보았다. 

• 페에지 내용 HTML 작성: 모바일과 컴퓨터 화면 비율을 기준으로 기본적인 CSS 설정을 한다.

 

[페이지 내용 HTML 작성]

- 비슷한 성격은 class로 묶고 고유한 특성은 id을 추가하여 따로 빼낸다.

- 보통 줄글의 나열은 p 태그를 사용하는구나

- Div 박스 태그를 사용하는 이유는 글자의 위치를 자유자재로 두기 위함이다. 이 때 많이 쓰이는 것은 display: flex이다. 
가로 => justify-content / 세로 => align-item

 

[페이지 내용 HTML 작성1]

• 보통 font size는 rem, margin은 em으로 한다. (전체 html font-size가 14px => 그럼 1rem이 14px이라는 뜻)

 

[페이지내용 HTML 작성2]

• 보통 크롬 모바일 버전 띄우고 먼저 크기를 맞추고, 그 다음으로 media 쿼리를 이용하여 화면을 맞춘다.
• rem은 고정값이다.

 

[위치가 고정된 요소의 처리]

출처: 인프런

스크롤에 따라서 나타나는 내용물들이 다르지만, 위치는 똑같다.

우선 위치는 position:fixed 속성을 사용한 것이다. 보통은 position: sticky 속성을 이용많이 하지만, 인터넷 익스플로러 11버전은 지원하지 않으므로, fixed를 사용하여 구현한 것이다.

.sticky-elem {
    position: fixed;
    top: 0;
    /* left: 0; */
    width: 100%;
}

스크롤 내릴때마다 보여주는 값을 변경해주기 위해선 현재 스크롤 구간에 해당되는 내용들만 애니메이션 처리를 해야한다. 

.sticky-elem {
    position: none;
    top: 0;
    /* left: 0; */
    width: 100%;
}
#show-scene-0 #scroll-section-0 .sticky-elem,
#show-scene-1 #scroll-section-1 .sticky-elem,
#show-scene-2 #scroll-section-2 .sticky-elem,
#show-scene-3 #scroll-section-3 .sticky-elem {
    display: block;
}

자세한 내용은 스크롤 애니메이션 1~4 부분에 나와있다.

 

[스크롤 높이 세팅]

애니메이션을 구현 하기 위해선, 스크롤에 따라 어떤 섹션은 보여주고 안보여줄지 설정해야 한다. 이 내용은 Javascript를 통해 함으로 js 폴더 및 파일을 생성해준다.

// 즉시 호출 함수
(() => {
    // 모든 애니메이션에 대한 정보를 배열에 담아 두어야 한다.
    const sceneInfo = [
        {   // 0
            type: 'sticky',
            scrollHeight: 0,    // 각 구간의 scroll 높이 정보 담고 있음
            heightNum: 5,       // ex 브라우저 높이의 5배
            objs: {
                container: document.querySelector('#scroll-section-0')
            }
        },
        {   // 1
            type: 'normal',
            scrollHeight: 0,    
            heightNum: 5,       
            objs: {
                container: document.querySelector('#scroll-section-1')
            }
        },
        {   // 2
            type: 'sticky',
            scrollHeight: 0,    
            heightNum: 5,
            objs: {
                container: document.querySelector('#scroll-section-2')
            }      
        },
        {   // 3
            type: 'sticky',
            scrollHeight: 0,   
            heightNum: 5,
            objs: {
                container: document.querySelector('#scroll-section-3')
            }      
        },
    ];

    //  각 scroll 섹션의 높이 세팅
    function setLayout() {
        for (let i = 0; i < sceneInfo.length; i++) {
            sceneInfo[i].scrollHeight = sceneInfo[i].heightNum * window.innerHeight;
            sceneInfo[i].objs.container.style.height = `${sceneInfo[i].scrollHeight}px`;
        }
        console.log('sceneInfo: ', sceneInfo);
    }
    
    // 윈도우 사이즈 변경되면, 스크롤 높이도 변경되도록 설정
    window.addEventListener('resize', setLayout);
    setLayout();
})();