구차니의 잡동사니 모음

결론은...

inline css로는 hover를 쓸 수 없다.

대신 onMouseOver/onMouseOut 이벤트로 구현이 가능하다. 정도?

[링크 : http://banasun.tistory.com/entry/inlinecss에서-ahover-스타일-지정하기]

[링크 : https://stackoverflow.com/questions/1033156/how-to-write-ahover-in-inline-css]

tr:hover가 먹긴 하는데(edge, chrome)

문제는 td에서 background 가 지정되었을 경우

background 색이 우선권을 가져서 tr:hover 색이 먹지 않는다.

[링크 : https://stackoverflow.com/questions/7510753/trhover-not-working]

[링크 : http://itzone.tistory.com/46]

요렇게 하면 색있는 애들도 칠해짐(단, th로 정의된 녀석들은 td가 아니니까 적용 안된다)

[링크 : https://stackoverflow.com/questions/5492900/changing-background-colour-of-tr-element-on-mouseover]

input type="button"이 아니라 button이 따로 있네?

[링크 : http://aboooks.tistory.com/301]

[링크 : https://www.w3schools.com/tags/tag_button.asp]

div로 할까 하다가 그래도 표니까 table 써야지 하고 보는데

디자인 적으로 한줄 사이사이 공백이 추가되어야 하고

한줄은 구분이 없어야 하는 쪽이라 막 건드려보다 보니 이게 되네

[링크 : https://www.w3schools.com/cssref/pr_border-spacing.asp]

+

padding으로는 셀 안의 크기를 띄우는 거라 내가 원하는 용도로 쓰긴 힘듬

메뉴는 ul / li를 통해서 css 적용해 만들고

웹 페이지에서는 표시할 데이터를 놔두고

display:none; 과 display:inline-block;을 이용하여 출력/숨기기를 하는 듯

[링크 : http://imivory.tistory.com/8]

[링크 : https://code.tutsplus.com/ko/tutorials/the-30-css-selectors-you-must-memorize--net-16048]

css를 작성하다 보니

어떻게 운용해야 할지 고민하다가 찾는중.

BEM은 일종의 클래스 명 작성규칙이고

쓰기 나름이긴 한데.. 어떤식으로 운영하는게 나을지 모르겠다...

예를들면.. 색상에 대한 class와 font에 대한 클래스를 구분하고

사용하는 곳에서 복수개의 class를 사용하는 방법과

특성에 따른 class를 개별로 정의하여 사용하냐 정도의 차이?

[링크 : https://www.vobour.com/-css-디버깅-시간을-절약-할-수있는-css-명명-규칙]

[링크 : https://windtale.net/blog/maintainable-expandable-front-end-web-strategy/]

[링크 : http://wikibootup.org/post/css-co-work/]

[링크 : https://hyeonseok.com/docs/about-css/]

웹 퍼블리싱 관련 이것저것 보다 보니 보여서 검색

일단 semantic은 "의미적"이라는 뜻인데

기존의 <b>와 같이 bold로 굵게 하라는 행동 기반이 아닌

<strong>이라는 강하게 표현하고 표현 방식은 뒤로 맡기는 그런 류의 접근 방식으로 보인다.

가장 많이 보는 걸로는

<header>

<nav>

<section>

<footer> 등이 있다고 하면 간단하게 이해 될 듯

HTML구성 요소로서 어떠한 보여주는게 아닌

어떠한 문맥을 의도를 보여주는 meta 데이터로서의 tag 라고 하면 되려나?

[링크 : https://www.w3schools.com/html/html5_semantic_elements.asp]

[링크 : http://west849.tistory.com/4]

[링크 : http://coderap.tistory.com/499]

모든 것의 원흉은 이녀석이었나..

단순하게 div를 왼쪽부터 딱딱딱 원하는 순서로 쌓는용도로만 생각을 했는데

말그대로 float 하게 하는거라 내가 의도하는 것과는 전혀 다른 형태로 작동해서 멘붕중

정 안되면

style="clear:both;" 와

style="overflow:hidden;" 을 해주면 내가 쓰려는 용도로는 충분하네..

[링크 : http://naradesign.net/wp/2008/05/27/144/]

[링크 : http://blog.wystan.net/2008/09/11/css-overflow-clearing-float]

overflow:hidden은 float로 하면 구성요소에서 빠져나가

상위 div의 높이 계산이 갱신되지 않는데, overflow:hidden을 해주면 float로 된 div를 포함하여 높이를 계산한다.

node.js에서 소스 건드리면 빌드하고

자동으로 웹 브라우저 리프레시 하는데 그게 신기해서 검색

[링크 : https://www.npmjs.com/package/browser-refresh]

[링크 : http://2ality.com/2012/08/jsreload.html]

+ 2018.09.04

전에 한걸 보니 node.js가 아니라 angular 였고, 

순수 node.js에서는 서버 재시작이나 브라우저 갱신이 지원되지 않는다.

그래도 위의 browser-refresh가 더 인기가 좋은 듯

[링크 : https://www.npmjs.com/package/reload]

+ 2018.09.06

[링크 : https://medium.com/engineering-on-the-incline/reloading-current-route-on-click-angular-5-1a1bfc740ab2]