KDT0_NamgungJongMin "The Armor Bearer" 클론 코딩 #55
Conversation
Set development environmnet - Creat package.json & Add script - Set eslint / prettier - Set .gitignore Set directory structure - Creat public / src Creat README.md
Creat images directory - add sprite image Add text in README.md - text for sprite image's position
Icon images detach from sprite image Add new sprite image to assets directory
Add section3 markup Add section3 scss
Add section4 markup in index.html Add section4 scss
Add javascript to section1 Add section1 & section2 mark up Add scss files
Write code to index.html
과제 결과물 소개 및 설명 과제를 진행하며 느낀점
NamgungJongMin
changed the title
|
리드미 코드 작성 시 고려한 점 너무 잘 읽었습니다! 블로그 포스팅도 하시나요?? 운영하신다면 블로그 링크가 궁금해요 |
|
와 이미지 최적화 ,, 까지 생각하시다닌 대단하신데요 |
감사합니다. github 블로그를 가지고는 있지만 현재 deploy는 멈춘 채로 hexo 내에서 관리 중입니다. 포스팅 스타일이나 날짜 정리 후 한번에 generate deploy 할 예정입니다. |
절대 좌표와 달리 translate나 opacity 같은 경우 앞서 생성한 DOM tree를 변경하지 않도록 설계 되어있습니다. 따라서 transform 속성을 이용해 레이아웃의 변화를 구현하면 브라우저가 더 쾌적하게 애니메이션을 보여줄 수 있습니다. |
|
스크롤 애니메이션, 슬라이드 구현, css 작성법 등 새로 알게된 것들이 많았습니다. 제 과제에도 적용 가능한 부분이 있으면 적용 해보겠습니다! |
| </nav> | ||
| </header> | ||
|
|
||
| <div class="modal"></div> |
There was a problem hiding this comment.
해당 부분이 공통적인 모달로 확인이 되고있습니다 보통 공통 모달같은경우는 추후 유지보수를 위해 아래에 위치 시켜주시면 추후 유지보수할때 파악이 쉬워져서 상단으로 옮기는 작업 추천드립니다~
| $prev.addEventListener('click', e => { | ||
| if (section2Order === 0) section2Order = 0; | ||
| else section2Order = section2Order - 1; | ||
|
|
||
| const innerWidth = window.innerWidth; | ||
| const widthBase = innerWidth < 1200 ? window.innerWidth : 1200; | ||
| const moveWidth = widthBase === 1200 ? `${(section2Order * widthBase) / 10}rem` : '100vw'; | ||
|
|
||
| // console.log(section2Order, widthBase, moveWidth); | ||
|
|
||
| document.querySelector('.section2__container__flex').style.transform = `translate(-${moveWidth})`; | ||
| }); | ||
|
|
||
| $next.addEventListener('click', e => { | ||
| if (section2Order === 6) section2Order = 0; | ||
| else section2Order = section2Order + 1; | ||
|
|
||
| const innerWidth = window.innerWidth; | ||
| const widthBase = innerWidth < 1200 ? window.innerWidth : 1200; | ||
| const moveWidth = widthBase === 1200 ? `${(section2Order * widthBase) / 10}rem` : '100vw'; | ||
|
|
||
| // console.log(section2Order, widthBase, moveWidth); | ||
|
|
||
| document.querySelector('.section2__container__flex').style.transform = `translate(-${moveWidth})`; | ||
| }); |
There was a problem hiding this comment.
해당 부분에 코드들이 중복되는거같습니다 중복되는 코드들은 함수로 묶어주시면 더욱 가독성이 좋은 코드를 작성하실수 있을꺼같습니다
function moveSection(increment) {
section2Order = increment
? Math.min(section2Order + 1, 6)
: Math.max(section2Order - 1, 0);
const innerWidth = window.innerWidth;
const widthBase = innerWidth < 1200 ? window.innerWidth : 1200;
const moveWidth = widthBase === 1200 ? `${(section2Order * widthBase) / 10}rem` : '100vw';
document.querySelector('.section2__container__flex').style.transform = `translate(-${moveWidth})`;
}
| @@ -0,0 +1,90 @@ | |||
| /* ----------------------------- index carousel ----------------------------- */ | |||
| const $carouselBtns = document.querySelector('.carousel-btns'); | |||
There was a problem hiding this comment.
주로 querySelector를 많이 이용해주셨는데 문서 전체 에서 쿼리 셀렉터로 엘리먼트를 찾는것은 비효율적일 수도있습니다
다행이도 현재는 크게 성능상에 문제가 발생하지는 않을꺼같은데 페이지 안에 내용이 많아진다면 쿼리셀렉터 보다는 getByElementId가 성능이 더 좋습니다
추후 작업하실때 참고해주시면 좋을꺼같습니다~
There was a problem hiding this comment.
저도 SCSS을 사용해보고 싶었는데 mixin과 include를 사용하시는 걸 보니
미리 선언해놓고 스타일 지정할 때 편하게 사용할 수 있을 거 같습니다!
앞으로 리팩토링에도 참고해보겠습니다~
| } | ||
| main .section3__container { | ||
| background-image: url(../images/sec3_bg.png); | ||
| background-attachment: fixed; |
There was a problem hiding this comment.
section3에서 뒷 배경을 고정하는 구현 방법이 궁금했는데, background-attachment: fixed; 였군요! 좋은 공부가 되었습니다!
|
이미지 최적화를 고려하신 부분이 인상 깊었습니다! |
|
웹 접근성, 웹 성능까지 고려하시다니 대단하세요! 전체적으로 많이 배웠습니다~! |
🖨"The Armor Bearer" 페이지 클론
원본 페이지: https://abtr.co.kr/
클론 페이지: https://strong-seahorse-4965f1.netlify.app/
💻사용 기술
📃페이지 기능
1. 스크롤 기반 애니메이션
페이지 스크롤링 시 현재 window의 innerWidth 값을 읽어 지정한 스크롤 위치에서 레이아웃 애니메이션을 실행
2. hover 대상 변화
대상에게 마우스 hover시 상태가 변화하는 transform 적용
3. 캐러셀 슬라이드
index 캐러셀의 경우 버튼 element 요소의 dataset을 읽어와 보이고 싶은 위치의 값을 지정
무한 캐러셀 구현은 javascript로 기존 슬라이드 배열 [1,2,3,4]를 [4,1,2,3,4,1]로 배열하고 양쪽 끝에 갔을 때 duration 속성값을 0을 주고 반대쪽 같은 인덱스로 바꾼뒤 지속하는 방식으로 하려 했음
4. 반응하는 배경
해당 레이아웃의 배경이미지가 스크롤의 상태에 따라 변화하는 기능
overflow를 hidden 시킨 뒤 background-attachment: fixed 와 background-size: cover를 이용해 구현.
5. 반응형 디자인
브라우저 width 값이 지정된 width 값보다 작아질 경우 flex와 Media Query를 이용한 레이아웃의 변경
width 값이 지정한 만큼 작아졌을 때 header를 display: none으로 변경하고 메뉴 버튼 추가
메뉴 버튼 클릭 시 새로운 navigation이 활성화
🔍코드 작성 시 고려한 점
1. CSS 방법론
sass의 중첩 규칙을 활용하는데에 있어서 BEM 방법론이 굉장히 효율적이라고 생각함
block 별로 요소 단위를 쪼개고 활용하는 것에는 좋았지만 잘못하다간 클래스 명이 너무 길어질 수도 있다고 생각하여 못썼던 적도 있음
'유지보수면에서 효율적인 코드가 무엇일까'라는 고민을 하게 되었고 조만간 생각한 내용을 정리하여 포스팅 할 예정
2. 웹 접근성
웹 사이트를 이용하는 사용자가 스크린리더 기능에 의지할 때 현재 무슨 부분을 확인하고 있는지를 알려주는 기능
accessibility hidden style을 이용하여 시각적으로 보이지는 않지만 스크린리더가 문장을 읽어주게 됨.
반대의 경우) 디자인적인 요소로 넣었기 때문에 스크린리더 사용자에게 읽어줄 필요가 없는 요소는 WAI-ARIA를 사용
javascript 작성 시에도 가져온 DOM 요소가 비활성화 상태로 toggle해줄 때 ariaHidden 프로퍼티의 값을 수정해줌
3. Mixin
Sass의 매우 강력한 기능 중 하나이자 코드의 컴포넌트화를 가능하게 하는 기능
중복 코드를 방지하고 코드의 유지 보수성을 매우 높여주는 엄청난 기능
4. 웹 성능
1) Style 최적화
렌더링 과정에서의 자원 효율성을 생각하여 더 적합한 방법을 선택
그러나 레이아웃 초기값 설정에서 transform을 사용하는 것은 불필요한 자원을 소모하기 때문에
애니메이션 효과의 목적일 때는 translate() 함수 사용, 초기값 설정에서는 절대좌표를 사용해야겠다고 생각
2) 이미지 최적화
렌더링 과정에서 많은 자원 소모가 일어나는 것 중 하나가 이미지 다운로드
sprite image를 생성하고 background-position 값을 설정하여 이미지를 사용하는 방식으로 웹 성능을 높일 수 있음
🔔LightHouse