지난 주에 이어 HTML5와 CSS에 대한 많은 것을 배우고 실습하는 한 주였다. 공휴일을 빼고 4일 뿐이었지만 나의 미미한 지식수준 때문인지 매일매일이 굉장한 변화와 성과가 있던 한 주였다. 머릿속에 우겨넣은 수업내용을 다시 되새김질하는 것에만도 시간이 많이 걸려서 다소 조급하기도. 찬찬히 성실히 가자.
배운 것들
- IR(Image Replacement) 기법으로 텍스트노트를 숨김처리하는 방법
- 여러개의 이미지를 모은 하나의 파일을 일부분씩 렌더링해 웹페이지 성능을 향상시키는 Sprite 기법(흥미로워서 따로 포스팅까지 했다)
transition속성을 통한 애니메이션 효과, cubic-bezier timing function으로 시간 조절- GRID로 레이아웃 짜는 엄청나게 편리하고 혁신적인 방법
- 적응형 vs 반응형 웹 디자인: 각각의 특성과 차이
- 반응형 웹 디자인 개발을 위한 미디어쿼리 사용법, 성능향상을 위한
srcset활용 등 aria-haspopup,aria-pressed,aria-labelledby와 같은 다양한 ARIA 속성들- BEM 방식 클래스 네이밍
- Sass의 의미와 기능, 간단한 역사와 트렌드와 함께 문법, 함수, 변수 등을 배웠다.
실습한 것들
- 고정형 예제를 마무리하며
transition로:hover과:focus를 통해 애니메이션 효과도 주고, grid로 layout을 짜보았다. - 반응형 예제로 Ediya 메뉴 페이지를 구현하고 gitpage로 서버연동한 나의 페이지도 만들었다.
- 다양한 ARIA 속성들을 활용해보았다.
- position 중 absolute, relative는 물론이고 fixed와 sticky등까지 다 써볼 수 있었다.
- figma를 통해 시안을 분석하는 법도 다시 한 번 익힐 수 있었다.
- npm으로 Sass를 설치하고, package.json에서 명령어를 등록하여 간단하게 빌드하는 환경을 세팅했다.
- scss 파일을 분할하여 layout, mixin 등을 관리하고, media query에 따른 각각의 mixin을 만들어보았다.
- list와 map을 만들어 규칙적이거나 반복되어 나열되는 속성이나 값을 지정하고 불러와 사용했다.
- 또다른 반응형 예제를 grid를 사용한 layout과 media query로 각 기기별 너비에 대응하여 구현하는 것을 Sass로 실습했다.
- iframe 태그로 유투브 영상이나 구글맵을 퍼올 때 원래는 반응형 크기조절이 되지 않는데, div 태그로 만든 부모 container에 padding-top을 입히는 트릭을 써보았다.
- grid의 column 너비를 계산하기 위해 Sass에서 mixin에 계산식을 입력해보았다.
느낀 점
- 이번주에도 많은 양을 단시간에 배우느라 연휴가 없었으면 따라잡기 힘들었을 뻔했다. 그래도 빡세게 복습해두니까 수업시간에 선생님이 무슨 말씀을 하시는지 정도는 알아들을 수 있어서 뿌듯했다.
- 트렌드에 맞는 다양한 모던 기법을 많이 공부하고 실습도 해보고 싶은데 지금은 수업시간에 한 것 복습하는 것만으로도 헥헥.
- Sass를 아직 익숙하게 다루지 못함에도 이게 얼마나 대단한 도구인지 벌써 느껴진다. 얼른 익숙해져서 효율적이고 편하게 CSS를 주무르고 싶다.
- HTML5/CSS가 벌써 끝나다니 아쉽고, 파이썬을 복습하지 못해서 다 잊어버릴까봐 걱정이 된다.
