Let's CheolGyu

---

---

---

[10Mar2011] body에서 가로 크기를 지정할 경우. 스킨 레이아웃이 깨지는 문제가 있어서 수정합니다.


2. 제목 스타일 설정
글을 작성할 때는 구조에 따라 메인 타이틀, 제목1, 제목2 등의 구조를 가질 수 있다. 이에 맞게 스타일을 지정한다.


위의 스타일은 본문 작성시의 메인 제목을 h0, 각각 제목들을 레벨에 따라 h1, h2로 정의했다. class name을 headerMainTitle, headerLevel0, headerLevel1 등으로 지정하는 것이 보기에는 좋을지 모르나, 반복해서 입력하기에는 너무 길다. 본인만 알 수 있다면 h0, h1, h2와 같이 짧을 수록 좋다.

제목 스타일에서 글자 크기를 지정할 때 px 대신에 em을 사용하면 body에서 지정한 기본 글꼴을 확대/축소하는 방법으로 글자의 크기를 결정한다. 2em은 기본 글자 크기의 2배, 1.2em은 기본 글자 크기의 1.2배 이런 식이다. 역시나 확대/축소나 모바일 뷰시에 훨씬 나은 모습을 제공한다.

위의 스타일은 아래와 같이 사용하면 된다.

<div class=h0>"Mobifying" Your HTML5 Site</div>
<div class=h1>CSS 미디어 쿼리</div>
<div class=h2>스크린 사이즈 지정하기</div>

3. 본문 스타일 설정

가장 많은 비중을 차지하는 본문의 스타일을 지정한다. line-height 속성을 줘서 가독성을 높여준다. 이 스타일을 적용할때도 약간의 팁이 있는데, 제목과 본문이 반복되는 구조에서 아래와 같이 매 본문마다 <div> 태그를 이용해서 이 속성을 적용하는 것도 쉽지 않다.


위와 같이하면 <div class=art>에 대한 입력이 너무 많다. 아래와 같은 방식을 적용하면 훨씬 편리하다.

4. 기타 필요한 스타일 설정
나머지 작성하는 글의 특성이나 필요에 따라 요구되는 스타일을 정의한다.

(1) 코드 입력을 위한 글상자 정의

(2) 경고문, 참고 자료, 본문 내 삽입된 코드 강조 관련 스타일 정의

참고로 이렇게 작성한 글을 편집하게 되면, 적용된 CSS 스타일이 모두 날아가는데, 이는 CSS 파일을 로드하는 <LINK> 태그가 삭제되어서 그렇다. HTML 편집 모드로 들어가서 추가해주면 정상적으로 돌아온다.