191018 TIL semantic tag(div vs table) && webstorm

» 1.5막, TIL (Today I Learned)

semantic tag

다른 사람들이 짠 html 코드를 보면 table로 많이 짜는 걸 볼 수 있었다.
난 주로 div로 많이 짜는데.. 코드를 시맨틱하게 짜는 법을 연습해야겠다! 해서
일단 왜 div 대신 table을 써야하는 지 찾아봤다.

Tables instead of DIVs [duplicate] 이 글을 보면 div를 남용하지 말라, 용도에 맞게, 시맨틱하게 짜라고 한다.

근데 또, Why are people making tables with divs? 이 글을 보면 물론 div를 남용하는 건 좋지 않지만 요새는 responsive design을 생각해야 하기 떄문에 div를 쓸 수 밖에 없다고 한다.
기존 태그마다 이미 가지고 있는 default 속성들이 있는데, 어차피 table로 짜면 모바일에서 속성을 다 override해야 하기 때문에 오히려 div가 효율적일 수도 있다고.. 그리고 예전 버젼 IE는 default 속성에 override를 할 수 없다고 한다.


새롭게 알게된 용어 -> divitis

스택오버플로우 글 보면 it falls into the divitis trap and isn’t semantic 라는 말이 나와서 찾아봤는데 실제로 div를 남용하는 경우를 뜻하는 말이었다.

What is divitis?

Divitis’ is a term used to describe an error common amongst newcomers to building CSS-based sites whereby they use too many divs for everything.

webstorm

한번 써보면 빠져나오지 못한다는 웹스톰으로 IDE를 바꿨다. 원래 쓰던 vscode도 굉장히 만족하면서 쓰고 있었지만… 다들 넘 좋다길래 바꿔보았다.. (nightmare의 시작)

일단, 개발시작하고 처음 IDE를 바꿔보았는데, 마치 개발을 처음 배우는 것 같은 느낌을 받았다.
내맘대로 되는 게 하나도 없고ㅋㅋ 내가 이렇게 단축키를 많이 썼었나 생각해보게 되었다..

찾아보니 웹스톰 plugin으로 vscode keymap을 제공하는 걸 알고 적용했다. 백프로 일치하진 않지만 그래도 … 어느정도..는 괜찮아졌다.

또 느껴지는 단점은 좀 무겁다는 것? vscode는 로딩 시간이 굉장히 짧았는데, 웹스톰은 좀 켜지는 데 시간이 걸린다.
그리고 뭔가 램도 많이 잡아먹는거 같고.. 발열도 심한거 같다…

근데 이 모든걸 견뎌보게 하는 장점은 온갖 찾기 기능이 너무 잘되어있다.
shift를 두번 누르면 웹스톰이 제공하는 모든 기능을 검색해서 찾아볼 수가 있고,

image

함수명 같은 걸로 파일 찾는거나, 파일명으로 파일 찾고 이동하는 게 굉장히 편리하다.

image

익숙해져보자 웹스톰😆