선배님들 HTML/CSS class에 방식에 관하여 조언좀 받고자 합니다.

Question

선배님들 안녕하십니까.현재 독학으로 개인프로젝트 웹 개발 중인데 HTML/CSS 관련해서 조언을 얻고자 글을 작성하였습니다. @media를 이용하여 스마트폰, 테블릿, 데스크탑 데스크탑 화면을 한번에 작성하는데,한페이지 만드는데 css만 코드가 짧아도 1000줄을 넘어가고 html까지 정말 코드가 길어지더군요. 그러다가 문득 생각한건데. class를 짜집어가지고 개발 하면 어떨가 하는 생각이 들어서 여쭤봅니다.예를 들어 이전에는 아래 코드와같이 이렇게 class 하나당 하나식 맞춰 개발하였는데..search_option { width: 990px; height: 330px; position: relative; } .search_decorator { box-sizing: border-box; width: 990px; height: 330px; border : solid 1px #707070; position :absolute; top: : 0px; left : 0px; border-radius: 5px; } .search_option_dt { width: 137px; height: 330px; box-sizing: border-box; border: solid 1px #707070; border-radius: 5px 0px 0px 5px; background-color: #F3F1F1; margin: 0px; padding: 0px; }width : 990px; height : 300px; margin: 0px; padding: 0px;와 같이 중복이 많이 되는 것들을 아래 코드와 같이 따로 나누어..w990 { width : 990px; } .h330 { height : 300px; }

이런식으로 class를 여러개 사용하여 코드를 작성하면 어떨가 하는 생각이 들었습니다. 근대 다른 웹사이트들 보면 대부분 class를 제가 생각한것 처럼 이용하지 않는것 같더라구요. 저렇게 개발하게 되면 안좋은 이유가 있을까요? 방법이 틀린걸까요?

Magritte · Answer

그게 부트스트랩 컨셉입니다.수정하게 되면 수정양이 많아진다는 단점이 있습니다.

장독깨기 · Answer

중복을 따로 뺀다기 보다는 여러 스타일을 만든다 생각하는 것이 어떨까요.그리고, 위치는 스타일과 거리가 좀 멀죠.크기 역시 고정 값보다는 비율로 작성하는 것이 스타일과 좀 어울릴 것 입니다.

songline · Answer

공통 값들을 따로 정리해 활용하고자 하시는 것이라면 css variable(Using CSS custom properties (variables) - CSS: Cascading Style Sheets | MDN (mozilla.org))을 활용하시는게 어떨까 싶습니다. 수치 뿐만 아니라 색상 등도 지정 가능해서 잘 활용하면 디자인 전체에 일관된 스타일을 적용할 수 있습니다.

Tae-woong Kim · Answer

https://tailwindcss.com/실제로 많이사용하는 Utility class라고하는 패턴인데tailwind가 가장유명하지만 React,Vue 같은 컴포넌트 베이스 라이브러리가 아닌환경에서는 사용하기 어려운감이있고 윗분말씀대로 CSS Variable이 대안이 될 수 있을 거 같습니다.:root { --content-width: 900px; } @media (max-width: 768px) { :root { --content-width: 700px; } } .content-width { width: var(--content-width); }

선배님들 HTML/CSS class에 방식에 관하여 조언좀 받고자 합니다.

4개의 답변

기술 목록