본문 바로가기
프론트엔드/HTML CSS

class와 id는 누가 어떻게 사용하면 좋을까?

by bigcanhao 2020. 11. 29.

class와 id는 어떻게?

 

 

 

 

 

코딩을 처음 시작하기 할 때는 html의 태그에 id를 부여하고, css에서 코딩하는 것에 쉽게 빠진다.

 

id를 부여하면 태그를 지정하기 쉽기 때문이다.

 

수십 개 또는 수백 개의 div 중에 내가 원하는 하나만을 고를 수 있는 가장 편한 방법, 그것은 id를 부여하는 방법이기 때문이다.

 

하지만 코딩의 수준이 조금 올라가면 퍼블리싱에서 id를 함부로 사용하면 안된다는 것을 알게 된다.

 

개발에서 id를 사용해야 하는데 퍼블에서 그 id를 미리 사용하면?

 

코딩을 배우면 바로 알게 되는게 id는 절대로 겹쳐서 부여할 수 없다는 것, 하나의 html 파일에서는 id는 반드시 하나일 것이 규칙이다.

 

꼭 데이타베이스의 pk처럼.

 

사람이 사용하는 신분증이 겹치지 않고 꼭 하나인 것 처럼.

 

 

 

 

 

 

개발에서 꼭 사용해야 할 id를 퍼블에서 먼저 사용하게 되면? 개발에서 다른 id를 사용해야 할 것인가, 아니면 퍼블에서 id를 바꾸어야 할 것인가?

 

대답은 바로 정해진다. 퍼블에서 id를 바꾸어야 한다.

 

개발에서 id를 변경하기에는 번거로움과 어려움이 훨씬 많기 때문이다.

 

실무에서는 이러한 사실을 알기 때문에 퍼블에서는 아~~~주 특별한 경우가 아니면 id를 끌어다 사용하지 않는다.

 

그럼 퍼블에서는 어떻게 하나?

 

첫번째, 클래스를 부여하기.

 

클래스는 하나의 html 파일에서 수십 번, 수백 번을 부여해도 된다.

 

이 점은 공통된 스타일을 지정해 줄 때도 아주 편하다.

 

두번째, 부모의 부모에서 차례로 차례로 태그와 클래스를 부여해 오기.

 

세번째, 가상클래스 사용하기.

 

두번째와 세번째는 코딩을 잘하는 사람일 수록 많이 사용한다.

 

무분별한 클래스 사용도 방지하고, html도 많이 깔끔해진다.

 

코딩을 배우면서 늘 듣는 말은 html은 깔끔할 수록 좋다는 것이다.

 

그래서 두번째와 세번째에 익숙해지면 html이 점점 깔끔해진다.

 

 

 

 

네번째, 중복 클랙스 사용하기

 

단순하게 클랙스만으로도 지정하기 힘들고, 가상클래스로도 지정하기 힘들 때 중복 클래스를 사용하면 편하다.

 

하나의 클래스를 통해서 css에서 기본적인 속성, 공통적인 속성을 코딩해 주고, 중복 클래스로 별도의 개별 속성을 코딩할 때 많이 사용하는 방법이다.

 

퍼블에서는 되도록 class로 모든 작업을 해결하고, id는 개발에서 쓸 수 있게 배정을 한다는게 결론이다.

 

clsss도 꼭 필요한 것만 사용해서 html은 되도록 깔끔하게 유지를, 그래서 유지보수가 쉽게 하면 된다. 

댓글