자기소개 페이지(3)

난나다·2022년 5월 24일
0

시작하기전에...


이번에는 HTML코드 리뷰에 이어 CSS코드를 리뷰해보려고 합니다. 전체적인 틀을 어떻게 잡았는지 살펴보도록 하겠습니다.



본문


CSS 코드

처음 CSS를 작성할 때 import 를 통해 모든 css를 한 css에 연동시키고 실제 html과 link를 통해 연결되는 css 파일은 한 개가 되어 파일을 정리하거나 실제 볼 때 깔끔하게 느껴지도록 목표를 잡고 만들었습다.

css 코드가 역할별로 구분되었으면 하는 목표가 있었기에 처음 만들 때부터 varialbe.cssfonts.css 같이 비슷한 것 끼리 모아두었습니다.

한 screen에만 영향을 주는 파일들은 screen 폴더 안에 모아두어 수정할 때 좀 더 확인하기 쉽게 만들었습니다.


CSS를 만들면서 만났던 문제들

대부분 기초적인 부분들이다보니 간단히 키워드 검색만으로도 금방금방 해결되었습니다. 때문에 만들면서 진짜 너무 힘들었다라고 느껴진 문제는 거의 없었습니다.
이러한 중에도 만들면서 시간을 오래 잡아먹었거나 오래 고민했던 문제들을 돌아보면 아래와 같습니다.

class명 짓기

만들면서 가장 힘들었던 부분은 CSS class명을 정하는 일이었습니다. 저는 그래도 처음부터 BEM방식을 쓰고자 노력했기에 한 우물만 팠느라 상대적으로 시간을 덜 쓴 느낌도 있는데 만약 이를 모르고 작성했다면 더 오랜시간 고민하면서 작성했을 것 같습니다.

::after(:after)

::after의 경우 background-img 에 투명도를 주고싶어 처음에 opacity 를 적용하였는데 안에 있는 요소에도 투명도가 들어가서 새로운 코드를 찾다가 만나게 되었습니다.
우선 검색해서 찾은 대로 페이지에 적용해보았는데 기대와는 달리 결과가 opacity 와 똑같길래 이게 아닌가 싶은 마음에 이런저런 시도를 해보았지만 결국 제대로 사용하지 못했습니다...
필수적으로 꼭 적용해야되는 문제는 아니기에 진행을 위해 넘어갔고, 나중에 공통과제로 새로운 기능을 넣는 과제를 제출해야될 때 기회가 된다면 다시 도전해봐야겠다고 마음을 먹었습니다.



마치며...

처음에는 '엄청 세세하게 리뷰해야겠다!' 마음먹었다가 작성하면서 스스로도 제대로 코드가 이해되지 않거나 이런 리뷰를 해본적이 없었기에 계속 부족하다는 느낌이 들지만 지식을 복습함이 아닌 알아가는 과정이었기에 노력했던 것 같습니다

부족한 글솜씨이기에 여기저기 수정해야할 곳이나 추가할 내용있다면 댓글 달아주시면 감사드리겠습니다! 읽어주셔서 감사합니다!

0개의 댓글