2023.08.11 모각코 6회차 결과

많은 html과 그에 따른 css파일은 한 파일에만 만드는 것은 효율도 떨어지고 보기에도 좋지 않다.

그렇다면 어떻게 하는게 좋을까?

 

1. class이름 설정하기

id를 사용할 수도 있지만 class를 사용하는 것이 조금 더 효율적이다. 그리고 class이름이 다소 길더라도 이름만 보더라도 이것이 어떤 부분에 해당하는 태그인지를 손쉽게 파악 가능하다.

 

예시를 보자

div태그부터 보면 user-component를 메인으로 하나씩 늘려가는 것을 알 수 있다.

user-component__title 이렇게 쓰면 상당히 긴 class지만 클래스 이름만 보고도 이게 유저 컴포넌트의 제목을 나타내는 태그구나 라는 것을 손쉽게 알 수 있고 css파일에서도 바로 찾아가 수정이 가능하다.

이런식으로 css파일도 명확하게 뭐가 뭔지 구별 가능하다.

 

2. 효율적으로 css파일들 구성하기

style.css만으로 모든 작업을 하는데에는 한계가 있다. 

따라서 우리는 여러 css파일들을 나누어 만들고 import를 해주면 된다.

위는 모든 html파일들에 들어가는 style.css이다.

모든 html에 공통인 body 태그와 main-screen 클래스만 설정해주고 나머지 파일들은 전부 구분해서 따로 작성한 css파일들을 import한 것이다.

 

화면에 직접적으로 나타나는 screen, 요소들을 설정해준 component, 지역변수 root를 이용한 variable과 브라우저의 기본세팅을 모두 리셋해주는 reset까지

이런식으로 구성된다.

여러 html 파일에 공통적으로 들어가는 부분은 component에서 따로 만들어 style에 import 해주면 된다.

 

예를 들어보자 아래는 friends.html이다.

작업물을 봤을 때 위의 상단바와 아래 버튼들은 한 눈에 봐도 모든 html에 들어갈 것이라 파악된다.

그럼 find.html을 보자

마찬가지로 상단바와 아래의 네비게이션 바가 똑같다.

그렇다면 코딩시 처음부터 상단바와 네비게이션 바로 묶으면 된다.

위를 보면 상단바인 status-bar.css, 네비게이션바인 nav-bar.css 뿐만 아니라 공통적인 요소들을 모두 따로 빼서 css파일들은 만들어 준 것을 알 수 있다.

 

3. root 지역변수

공통적으로 쓰이는 색상, 글씨체, 테두리 등을 root에 넣어주고 --(이름)을 설정해주면 좀 더 편하게 작업을 할 수 있다.

위 css도 마찬가지로 style.css에 import 해주는 것을 잊지말자

 

사용시 다음과 같이 작성하면 된다.

var(--사용하려는 변수 이름)

그렇게 되면 variable.css에 있는 root의 --yellow가 사용될 것이다.

 

 

이를 통해 우리는 방대한 양의 작업을 효과적으로 나누고 보기 쉽게 정리하여 작업의 효율을 높일 수 있다.