css 클래스 이름 규칙 정리(1)

이종호·2021년 3월 23일
0

CSS

목록 보기
2/5
post-thumbnail

html을 하면서 가장 많이 스트레스를 받은 구간은 css이다.

css를 어떻게 적용해야하는 문제는 의외로 큰(?)문제가 아닐 수 있다.
생각보다 html <tag>의 class이름을 어떻게 지어야 할지가 더 큰 걱정이다.

웹 페이지를 하나라도 구상해 본다면 알겠지만
해당 사이트 하나에 들어가야 할 태그의 종류는 매우 무척 많을 수 있다.

앞으로 다른 기발한 아이디가 있다면 추가하고, 일단 나만의 규칙을 정리해 보고 싶다.

위치 + 논리적 이름

나는 대출 위치 + ? 가를 써야 한다는 것은 대충 봐서 느끼고는 있었다.

하지만 코드를 구현하다보면 여것 저것 섞여 쓰게 되는데,
크게 2가지이다.

  1. 위치 + 태그 이름
<p class="main-right-p">나는 오늘 밥을 먹었다.</p>
<input class="main-right-input">
<button class="main-right-btn">
  1. 위치 + 논리적 이름
<p class="main-right-sub-title">나는 오늘 밥을 먹었다.</p>
<input class="main-right-login-id">
<button class="main-right-submit">

이렇게 대충 예시를 드니 누가봐도 논리적 이름을 써야 할 것 같다.
css하다 보면 의도치않게

  • div로 감싸야 하거나,
  • a => button 또는 span으로 바꿔야 할 일이 자주 일어난다.

그럴 때 tag명으로 한다면 .. html과 css를 둘다 바꾸든가
css에선 엉뚱한 태그이름을 가지고 스타일을 수정해야 할 것이다.

이 구간에 먼저 익숙해지고 시맨틴 태그의 종류와 그래서 내 페이지에 어떤 태그를 어디에 넣을지 고민해보고 정리가 된다면 2차 블로그를 써야겠다.


pm 4:04
사용하다 보니
생각보다 태그 이름이 논리적이름과도 유사할 뿐만 아니라 다른 논리적이름을 대표할만한 것을 발견하지 못할 때가 있다.

ex)

<!-- 1. 댓글 입력 창 -->
<textarea class="comment-textarea" name="" id="" cols="30" rows="10"></textarea>
<!-- 2. article header 이미지 -->
<img class="article-hd-image" src="" alt="">

1번 같은 경우 input으로 대체를 해야하나 고민도 했다.(왜 textarea를 썻냐 하면 instagram이 textarea를 썼기 때문이다.
(아직 textarea를 왜 써야 하는지 잘 몰라서 input과의 차이가 너무너무 궁금하다.) --> 추후 정리)
그 외 적당한 논리적 이름? 은 떠오르지 않았다.
나중에 다른 페이지는 class이름을 어떻게 지었나 염탐해야겠다.

2번 같은 경우 역시 image가 image인데 뭘 써야 좋을까? 모르겠다.

profile
코딩은 해봐야 아는 것

0개의 댓글