인프런 커뮤니티 질문&답변

시연님의 프로필 이미지

작성한 질문수

쉽게 배우고, 포트폴리오로 만드는 반응형 웹! #설화수

클래스 질문 드려요!

해결된 질문

22.03.14 12:53 작성

·

156

1

간단한 질문인데요! 실무에서도 클래스가 많이 사용되는지  궁금합니다!

기본 태그 이름으로 가져오고 주석을 달아두면 되지  않을까해서요!ㅎㅎㅎ

선생님은 실제 실무에서 어떤 방법을 선호하시나요?!

 

답변 1

2

LIZ.B님의 프로필 이미지
LIZ.B
지식공유자

2022. 03. 14. 15:10

class 이름을 지을때 큰 블럭을 생각해서 짓습니다.

가령 header에 들어가는 내용들이라면 h 또는 header 로 시작하는 키워드로 시작해 그안에 1행에 n열짜리 내용이 들어간다면. 각 열의 키워드를 두번째 키워드로 붙여줍니다.

예를 들자면 header에 1행 2열에 로고가 흰색 컬러가 두가지 타입이들어가야 한다면.

하나는            class="h_logo white"
다른하나는    class="h_logo color"
이런식으로요~

공통적인 정의는 .h_logo 로 하고, 각각 다른 것들은
.h_logo.white
.h_logo.color 
이것들로 각각의 다른 내용을 적어주는 거죠~ 

또한 큰 맥락의 광범위한 공통 class가 있다면,
layout정의하는 css와 별개로 공통 class 만 따로 들어가는 css를 작성해 따로 보관하는 것이 좋습니다.

설화수 같은경우 제작한지 좀 시간이 되어 이런 특성들을 다 반영해서 작업하지는 못했습니다.
계속 코딩을 하시다보면 이렇게 클래스를 작성하는것이 효율성을 올릴 수 있다 뭐 이런 감이 오실거예요.
하나하나 직접 작성하다 보면 그런 노하우는 저절로 익혀지리라 생각합니다.
지금을 일단 만들어보시고, 고민해보세요. 그리고 좀더 좋은 방법이 있다면 그걸로 바꿔보시는것도 좋습니다~! 또 궁금한 내용있으면 문의 남겨주세요~ ^^

시연님의 프로필 이미지

작성한 질문수

질문하기