문득 생각나서 작성하는 것이다.

주 업무로 html/css/javascript(jQuery)를 코딩한다. 직업은 웹 퍼블리셔라고 하는데 웹의 노출되는 부분을 만드는 일을한다. 디자인이미지를 웹페이지로 출력되게 컨버팅하는 일이라고 하는것이 쉽게 설명될 것이다.

중딩부터 웹사이트를 만들어오면서 이런저런 시행착오를 해왔는데, 대학교때(2006년즈음...) 텍스트에디터로 웹페이지를 코딩하게 되었는데(하드코딩이라고들 한다.) 그때 당시에는 레이아웃을 구성하는데에는 대부분 테이블을 사용하고, 세세한 사이즈 여백을 주려면 고스트이미지 기법(1x1사이즈의 투명gif파일을 삽입하여 자유롭게 사이즈를 변경하여 여백을 조절한다.)을 사용해왔다.

2008년에 서울에서 일할때 웹 퍼블리셔가 단기계약직으로 들어왔는데 그때부터 웹퍼블리싱에 관한 본격적인 부분들을 배우게 되었고, html코딩하는 스타일을 변화시키는 중요한 전환점이었던 것 같다.
html파일속에 디자인 속성이랑 내용을 한꺼번에 모두 집어넣다가 html과 css를 분리하게 된것이다. 그리고 javascript에 관하여 좀더 공부를 하게 되었고 말이다.

이제 본론으로 html/css 마크업에 관하여 가장 추구하는 부분은...

1. 사이트의 사이즈가 유연해야한다.
   사이트의 사이즈가 고정되어있으면 작은 해상도에서는 가로로 스크롤을 해야한다. 일반적인 마우스는 대부분 세로 스크롤만 된다. (맥쪽의 디바이스는 가로스크롤도 손쉽게 할 수 있다.)
   브라우저의 사이즈가 커지면 내용을 표시하는 면적도 커지고 작아지면 같이 작아지면서 화면에서 내용이 꽉차게 보여야한다. 요즘의 디바이스들은 해상도가 제각각이며 편차가 굉장히 크다.(모바일부터 대형 모니터까지...) 반응형웹쪽이 상당히 괜찮은 해결방안이며, 처음 기획할때부터 유연한 형태로 가는것을 염두하고 작업하는것도 좋아 보인다.
2. html과 css는 확실히 구분되어야한다.
   요즘에는 html에 디자인 속성까지 같이 들어가있으면 가독성이 떨어져서 코드를 보면 하나도 알아먹지도 못하는 경우가 허다하다.
   html에서는 태그와 내용만 들어가는것이 좋다. css를 연결시키기 위한 class는 필요한 부분에 삽입하면서 네이밍은 알아볼 수 있는 수준으로 정하는것이 좋다. 그리고 id는 자바스크립트 컨트롤이 필요한 부분에만 사용하며, css에서는 대부분 class로 처리하는것이 좋다. id는 문서상에서 단 하나만 들어가야 충돌이나 오작동을 피할 수 있기 때문이다.
3. 주석문을 잘 활용한다.
   보통 레이아웃 영역마다 <!-- header --><!-- // header --> 형식으로 감싼다. 이렇게 감싸는 이유는 해당 영역의 범위가 어디까지인지 쉽게 알 수 있기 때문이다.
   주석은 심하게 길게 적으면 문서가 난잡해지기 때문에 어떤 역할을 하는 수준으로 붙여둔다.
4. 버튼의 크기는 커야한다.
   모바일에선 주로 엄지손가락을 이용하므로 터치 영역이 상당히 넓다. 그래서 세로 크기만큼은 40px이상은 확보해야한다.

ps.
좀 더 생각나는것이 있다면 추가적으로 작성예정