잡학편식 직영 이글루스 영업소

• 모든 저작물은 CCL(by-nc-nd)에 따라 사용하실 수 있습니다. 단, 회원제 사이트, 신문/잡지는 예외입니다.
• 자소를 분해한 말, 통신체와 욕설 등의 비속어, 광고, 작성자 불명의 덧글은 사전 경고 없이 삭제될 수 있습니다. 줄 띄기 역시 임의 삭제 대상이며, 나눠 써야할 정도로 긴 덧글은 트랙백을 이용해주시기 바랍니다.
• 유다롱씨와 그의 단체(?) 일원으로 명시된 사람의 접근은 형태와 깊이에 상관없이 완전히 거부합니다.

드디어 실용예제로 배우는 웹 표준 [저자: 댄 씨더홈, 역자: 박수만]을 다 읽었습니다. 이상하게도 뒷부분을 읽을 때 쯤부터 몸이 근질거리더군요. 그래서 기본적인 설문을 하고 바로 어제, 일요일 저녁부터 웹표준화에 발맞추는 것을 목표로 스킨 제작을 시작했습니다. 이글루스용 웹표준 스킨 제작 일지이라고 거창하게 쓰긴 했지만, 책보고 따라하는 중이라 엉성하기 그지 없습니다. 디자인 자체도 기대하지 마세요.
어쨌든 여러분이 보고 계신 것은 그 중간 결과물입니다. 비유하자면 뜨다 만 편물이라고 할 수도 있겠네요. 아직 완성으로의 길은 멀고도 멉니다. 이번 글을 1일차라고 명명했지만 월요일이 2일차, 화요일이 3일차인 것은 아닙니다. 주말마다 작업한다면 다음 토요일이 2일차, 일요일이 3일차, 또 그 다음 토요일이 4일차가 되겠죠. 즉, 작업한 기간만을 카운트하는 겁니다. 그럼 어제까지 한 일에 대한 보고를 합죠.


1. 일단 기본 레이아웃의 모든 코드를 날려버렸습니다. 단 시스템, 달력, XML에 관한 CSS는 건드리지 말라길래 margin, padding, border만 0으로 잡고 거의 그대로 뒀습니다. 덧글 입력창은 다른 블로그들에서 !important;를 이용한 것을 보고 따라서 늘렸습니다. 익스플로러가 body{}에서 width 잡는걸 못 알아먹어서 전체 div를 따로 잡았습니다, 췟.

2. 전체 레이아웃은 댄 씨더홈 책의 float 방법을 이용했습니다. (내부적으로도 float을 꽤 썼습니다.) Rivian님과 lunamoth님께서 사이드바와 컨텐트 사이가 너무 넓다고 하셨는데 그 이유는

[파이어폭스 적용 화면]

[익스플로러 적용 화면]
이렇기 때문입니다. -_- 2일차에서 (사이드바와 컨텐트 사이 부분에 대한) 부분조정으로 간격을 좁히면 가능하겠지만 현재의 큰 틀 잡기에서는 더 좁히면 익스플로러에서 제대로 안나오네요. (크악 이놈의 익스!!) 두 분 지적 감사합니다.

3. CSS 박스 모델 문제는 Mozilla 포럼에서 hyeonseok님이 쓰신 hack을 사용했습니다(별로 추천하지 않는다고 쓰셨지만). IE 7에서는 막힌다고 하는데, 그 말이 IE 7은 박스 모델을 표준대로 적용한다는 뜻으로 받아들이고 싶네요.

4. 블로그 이름에 <h1>, 각 글의 제목에 <h2> 태그를 각각 적용했습니다. 블로그 이름에 <h1>를 붙이는 건 좀 아닌 것 같기도 하지만 ˚ー˚) 일단은. 방문자 입장에서는 상관없는 부분이지만 <h2> 태그 특성(inline의 반대말, 이미 용어 까먹음) 때문에 <$postadmin$>을 <$posttail$> 옆으로 옮겼습니다.

5. 편집의 용이를 위해 div에 border를 넣었습니다. 그냥 테스트용으로 배경이나 글자 옆 등에 이미지가 뜰 수도 있습니다. 어디까지나 테스트용으로 실제 스킨에서 쓰일 border와 이미지는 아닙니다. 지금 셜리가 떠 있는 것도 background 속성이 궁금해서 테스트하다보니 어쩌다가 뜬겁니다. 나중에 지울거에요, 나중에... *-_-*


일요일 저녁 9시부터 월요일 새벽 2시까지 한 것 치고는 거의 해놓은 것이 없습니다. 따로 마감이 있는 것도 아니니 느긋하게 할 생각이고요. 앞으로 해야할 것은 익스플로러와의 균형을 맞춰서 사이드바와 컨텐츠 위치를 다시 잡고, 전체 레이아웃을 위한 이미지 등도 만들고, 블럭 단위의 세부적인 모양도 잡고, 각 태그의 CSS를 설정해주고, 건드리지 말라고 했던 부분의 CSS도 건드리고..... 으음, 언제 끝내지.