html을 하면서 가장 많이 스트레스를 받은 구간은 css이다.
css를 어떻게 적용해야하는 문제는 의외로 큰(?)문제가 아닐 수 있다.
생각보다 html <tag>의 class이름을 어떻게 지어야 할지가 더 큰 걱정이다.
웹 페이지를 하나라도 구상해 본다면 알겠지만
해당 사이트 하나에 들어가야 할 태그의 종류는 매우 무척 많을 수 있다.
앞으로 다른 기발한 아이디가 있다면 추가하고, 일단 나만의 규칙을 정리해 보고 싶다.
위치 + 논리적 이름
나는 대출 위치 + ? 가를 써야 한다는 것은 대충 봐서 느끼고는 있었다.
하지만 코드를 구현하다보면 여것 저것 섞여 쓰게 되는데,
크게 2가지이다.
- 위치 + 태그 이름
<p class="main-right-p">나는 오늘 밥을 먹었다.</p>
<input class="main-right-input">
<button class="main-right-btn">- 위치 + 논리적 이름
<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인데 뭘 써야 좋을까? 모르겠다.
