CSS GitHub My Profile 클론
강의를 진행해 주신 강사님의 세션에서 저는 어떤 UI가 가장 클론 연습에 좋을까에 대한 질문을 했고 이에 대한 답변으로 깃헙 마이 페이지가 좋을 것 같다는 의견을 듣고 SASS로 SCSS 문법을 활용하여 진행하였습니다.
프리뷰
시멘틱 태그를 활용하여 HTML 작성
CSS 강의와 그동안의 경험으로 이제는 어떤 구조로 HTML을 작성해야 하는지 이해도가 있었지만 시멘틱 태그에 대해 생각하고 구조를 작성하느라 시간을 조금 더 투자하였다.
header, main, nav, section, address, article 등등 상황에 맞는 다양한 태그들을 모두 적절히 사용해 볼 수 있었다. 경계가 모호한 경우도 있었지만 이 경우에는 그 태그 안의 내용을 생각하며 선택하였다.
grid와 flex를 적절히 활용
여태까지 내가 만들었던 구조와는 확실히 다르다는 생각이 들었던 점은 여러 요소들이 정렬된 듯 보이지만 다양한 구조를 가지고 있다는 점이다. header에서는 flex를 사용하고 main 컨테이너는 grid를 활용하여 깔끔하지만 단조롭지 않은 UI를 클론 해볼 수 있었다.
mixin, CSS 변수, SASS 활용
따로 자바스크립트를 작성한 내용은 없으나 5일간의 기간만에 이 UI를 구현할 수 있었던건 SASS의 간편함 덕분이라고 생각이 든다. 특히 Nesting하여 따로 분리하여 작성하지 않아도 된다는 점이 편리했고 이로 인해 기존에 작성했던 내용에 접근하는 것도 한결 쉬웠다.
mixin으로는 글자 크기마다 정리된 CSS를 작성하고 가장 자주 사용했던 컨테이너 크기에 대해 정리해두었고 CSS 변수에는 색상, 각 이미지의 경로를 지정하여 이해하기 쉬운 CSS파일을 작성할 수 있었다.
다크모드 구현
@media (prefers-color-scheme: dark) {}이번 CSS 과제에서 추가로 작업한 내용은 다크모드 구현이다 미디어 쿼리의 prefers-color-scheme을 이용하여 사용자의 시스템 모드에 따라(다크모드, 라이트모드) 각 색상을 다르게 적용하는 방식이다. 아쉬웠던 점이 있다면 2가지 버전의 코드를 중복으로 작성하여 시간을 많이 소비했다는 점이다. 이에 대해 멘토님에게 질문을 하게 되었고 여기서 믹스인을 활용하는 방법이 있다는 점을 알게되었다.
리팩토링을 진행한 부분
- mixin, 변수 변환 안되도록, 변수 사용법 추가 - 이전에 제출한 파일에서는 mixin과 변수가 함께 컴파일되어 이를 수정
- a 태그 클래스로 정리 - a 태그에 클래스를 주고 이를 이용한 접근법을 사용하도록 수정하였습니다.
- webpack 적용, 파일 정리 - webpack을 적용하여 컴파일 경로를 설정하고 각종 이미지 파일을 변수로 정리하였습니다.
- autoprefixer 적용 - filter를 사용한 부분이 있는데 이를 후처리로 작업하여 더 범용적으로 사용할 수 있도록 컴파일하였습니다.
과제를 마치고...
이전에는 본인의 수준에서 구현하기 어려운 부분들을 보면 기존 기획했던 부분들을 바꾼 경우가 몇번 있었지만 이번 과제를 통해 더 다양한 CSS 사용법을 익히고 자신감을 얻었습니다. 여전히 어렵지만 경험해 본 내용들을 토대로 더 빠르게 더 가독성 좋게 CSS를 작성할 수 있게 되었습니다.
'프로그래머스 데브코스 > 회고' 카테고리의 다른 글
| 프로그래머스 데브코스 - 팀 프로젝트 디그디그딥 (0) | 2023.01.31 |
|---|---|
| 프로그래머스 데브코스 - FE#8 Vue 과제 회고 (0) | 2023.01.25 |
| 프로그래머스 데브코스 - FE#6 Vanilla JS_2 과제 회고 (0) | 2022.12.25 |
| 프로그래머스 데브코스 - FE#4 노션 클론 과제 회고 (0) | 2022.12.16 |
| 프로그래머스 데브코스 - 3주차 과제 회고 (0) | 2022.11.20 |
