javascript를 배우게 된 이후로, javascript를 이용하여 스타일을 변경해야 할 경우에 가능한 선택지는 2개가 된다.

1. 스타일 변경용 css class를 생성하여 javascript로는 이벤트 발생 시 class가 생성되었다 사라지게 하기 (display: none때문에 많이 사용)
2. 이벤트가 발생할 경우 javascript 내부에서 style을 통제하기

두가지 모두 범용적으로 사용되는데..문득 궁굼해졌다. 두가지 방법 중 어느 방법이 보다 효용성이 높을까?

구글링을 한 결과, 여러가지 의견들을 볼 수 있었다. 대부분 의견이 하나로 통일되어지기에, 그 의견들을 아래와 같이 정리해보았다.

styling은 모두 CSS로 통제해야된다

CSS 는 HTML스타일링을 위해 만들어진 언어이기에, 가급적 CSS 로 통제하는 것이 좋다.

Javascript DOM을 이용하던, JQuery같은 라이브러리를 사용하던, 이러한 것들은 결국 다시 CSS 를 건드리게 되기 때문이다. 어차피 CSS 를 건드릴꺼면, 처음부터 CSS 에 접근 하는 것이 훨씬 효율적이기 때문이다.

또 다르게 생각해보면, script 중에 일부분만 (그것도 styling이 아닌 다른 곳) 문제가 있어도, 페이지가 로딩 되지 않는 경우가 있다. 이 때, 사용자가 레이아웃이라도 볼 수 있는 상황과, 아무것도 없는 빈 화면밖에 볼 수 없는 상황 두가지를 비교하면 당연히 전자가 훨씬 나은 상황이기에 CSS에 최대한 styling에 관련된 내용을 모두 작성하는 것이 안전하다.

모든 상황, 그 중에서도 예측이 가능한 정적인 요소들(변화 값이 없는 경우)의 경우에는 가급적 CSS 만으로 스타일링을 하는 것이 좋다.

Javascript로 styling control은 그럼 언제 하는가?

예측할 수 없는 요소나 event가 계속 발생하고, 계속 값이 바뀌어야만 하는 요소 (mouse-over로 요소가 움직이게 하는..반응형효과를 줄 때라던가)를 다뤄야 할 때는 Javascript를 사용해야 한다.

허나, 그 조차 직접적으로 styling을 변경하는 것은 최대한 지양하고, javascript를 통해 class를 추가했다 뺐다 하는 정도로만 기능할 수 있도록 하여야 한다.

왜냐면,

위에서 말한 것 과 같이 script 의 문제로 인해 페이지 스타일이 로딩되지 않는 위험으로 부터 벗어나는데 이와 같은 방법이 도움이 되기 때문이다. IE같은 브라우저는 DOM이 매우 느리고, JS library에서 제공해주는 메소드 사용에 제한이 많다. 이런 브라우저에 까지 대응을 가능하게 하려면 역시 CSS 만한 것이 없기에 결국 우리는 CSS 로 회귀할 수 밖에 없는 것이다!

결론 내리자면, 도저히 css만으로는 작업할 수 없을 때, 그 때가 되서야 Javascript를 사용하는 것이다.

결론

스타일에 관련된 사항은 모두 CSS에 정리해야한다.

아래 키워드를 잊지 말 것!

• HTML => 구조
• CSS => 스타일
• JS => Logic