홈페이지 제작에서 jQuery 만큼이나 스타일은 매우 중요하다
개인적으로 jQuery, javascript 보다 스타일을 더 신경을 쓰고 개발을 하는 편이다
<style>
div { border:1 xp solid silver; }
</style>
<div style='border:1px solid silver;'></div>
두가지 모두 동일한 동작을 한다. 하지만 어떨때 임배디드로 쓰고 어떨때 인라인으로 써야 할까?
개발을 하는 과정에서 두가지는 매우 혼용이 되지만 많은 개발사들은 임배디드로만 모든 스타일을 선언하기도 한다. 인라인으로 개발을 하면 수정시 일일이 소스를 찾아다니는 불편함이 있다고 생각하기 때문이다.
나는 반대로 최대한 인라인으로 개발하고나서 골격이 결정된 다음에 임배디드로 변경하는 쪽을 선호한다
개발의 신속성이나 테스트에 더욱 편하기 때문이다. 물론 스타일을 정의하는 방법에 대해서는 사전에 개발자들간에 상당시간의 조율이 필요하기도 하다.
위 예처럼 단순한 디자인의 경우에 리스트 형태처럼 반복이 3번이상 나온다면 임배디드로 가고 단순히 한번만 사용하는 경우는 인라인으로 적용한다.
class, attribute 를 혼영해서 쓰기도 한다
div.style[attribute] 의 형태로 디자인 위주가 될 경우는 클래스로 배정하고 데이타 위주가 되면 attribute로 사용한다
javascript를 최소화 하기 위한 style은 매우 유용하기도 하다
+, ~ 연산자를 이용해서 내 다음 또는 근처 element의 속성을 지정함으로써 javascript를 이용하지 않고도 상당히 동적인 페이지를 만들 수 있다.
가장 많이 사용하는 style은 flex, grid 이다
화면의 정렬을 table, div 로 잡을때는 자동조절이나 자동 줄바꿈 등이 매우 한정적이라 flex, grid를 이용한다면 상단히 편하게 화면을 설계할 수 있다