🤜 읽어볼만한 CSS 포스팅 🤛

1. CSS-in-JS에 관해 알아야 할 모든 것

[번역] CSS-in-JS에 관해 알아야 할 모든 것

사실, 평소에 CSS에 대해 크게 불만이 있는 편은 아니었다.

동적으로 CSS를 제어하고 싶다거나 할 때 약간 구현이 복잡하다거나 그런 건 있었지만

내 실력이 부족한 탓이겠거니 하고 CSS 실력을 키워야겠다고 생각하고 있었다.

근데, CSS를 JS에서 제어할 수 있는 방법들이 있다고 해서 몇몇 글들을 좀 읽어봤는데

얘네들을 쓰면 구현이 훨씬 간편해지겠구나 하는 생각이 들긴 한다.

 

물론, 특정 라이브러리의 사용자들은 주로 그 라이브러리의 장점들을 부각시키는 경우가 많아서

무작정 갖다 쓰지는 않을 것 같다. 나중에 진짜 CSS를 좀 어떻게 해보고 싶다는 생각이 들면

그 때 사용해보는 걸로.

 

일단, 좀 긍정적으로 검토해볼 만한 건 사실인 듯.

 

2. 당신이 innerHTML을 쓰면 안되는 이유

당신이 innerHTML을 쓰면 안되는 이유

글의 결론만 말하자면, innerHTML이나 innerText 대신 textContent를 사용하는 게 좋다는 내용이다.

특정 상황, 예를 들면 IE를 중심으로 한 프로젝트라던가, HTML Parsing이 필요한 문자열 등의 경우에는

사용자의 판단에 따라 사용이 필요한 경우도 있지만, 그 외의 대부분의 경우에는

textContent를 사용하는 것이 성능 상, 그리고 보안 상 더 괜찮다는 내용.

 

3. HTML 요소 크기 가져오기

[JS] HTML 요소 크기가져오기. (offsetWidth, clientWidth, scrollWidth, getBoundingClientRect

Element.getBoundingClientRect()

 

최근에 코딩을 하면서 느낀건데, 자바스크립트에서 그냥 style.width나 style.height를 사용하니까

올바른 너비값이 나오지가 않는 경우도 있어서 그럴 때는 어떤 속성을 사용해야

내가 원하는 결과를 뽑아낼 수가 있는지 상당히 혼란스럽더라.

심지어 width 관련된 것만 해도 offsetWidth, clientWidth, getBoundingClientRect 등 너무 많아서

좀 공부를 하고 뭐가 다른지를 알아야 할 필요성을 느꼈다.

 

offsetWidth(Height) - margin을 제외한, padding과 border를 포함한 너비를 가져온다.

(만약 스크롤바가 생기면, 내부 content영역의 일부가 스크롤바 너비로 치환된다)

clientWidth(Height) - margin과 border를 제외한, padding만을 포함한 너비를 가져온다.

scrollWidth(Height) - 스크롤 영역일 때, 스크롤로 감싸진 내용의 전체 크기를 가져온다.

만약 스크롤 영역이 아니라면, clientWidth와 동일한 너비를 가진다.

getBoundingClientRect()는 조금 복잡하니, 출처에 가서 보도록 하자.

 

물론 얘는 정확히 말하면 자바스크립트에 관한 내용이지만,

결국은 자바스크립트에서 CSS값을 다루는 것에 관한 이야기니깐.