H1: Lorem Ipsum

(`위키백과: 로렘 입숨` 페이지에서 복사)

로렘 입숨(lorem ipsum; 줄여서 립숨, lipsum)은 출판이나 그래픽 디자인 분야에서 폰트, 타이포그래피, 레이아웃 같은 그래픽 요소나 시각적 연출을 보여줄 때 사용하는 표준 채우기 텍스트이다. 최종 결과물에 들어가는 실제적인 문장 내용이 채워지기 전에 시각 디자인 프로젝트 모형의 채움 글로도 이용된다. 이런 용도로 사용할 때 로렘 입숨을 그리킹(greeking)이라고도 부른다.

로렘 입숨은 전통 라틴어와 닮은 점 때문에 종종 호기심을 유발하기도 하지만 그 이상의 의미를 담지는 않는다. 문서에서 텍스트가 보이면 사람들은 전체적인 프레젠테이션보다는 텍스트에 담긴 뜻에 집중하는 경향이 있어서 출판사들은 서체나 디자인을 보일 때는 프레젠테이션 자체에 초점을 맞추기 위해 로렘 입숨을 사용한다. 로렘 입숨은 영어에서 사용하는 문자들의 전형적인 분포에 근접하다고도 하는데 이 점 때문에 프레젠테이션으로 초점을 이동하는 데에도 도움을 준다.

가장 일반적인 로렘 입숨 텍스트는 다음과 같다. (다음: 인용문--blockquote)

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

H1: 2010 스킨 자활가용 매뉴얼

H2: 꼭 필요한 선택자 목록

텍스트큐브 공식 배포처에서 제공하는 스킨 제작 레퍼런스를 이용해서 작업 순서와 내용을 익힐 수 있습니다. 이것 만으로도 새 스킨을 만들고 적용할 수 있지만, 쉬운편집 기능을 적용하기 위해서 몇 가지 규칙을 추가했습니다. '쉬운편집'은 스킨 미리보기 창에서 리모콘 조작으로 간단하게 스킨을 고칠 수 있는 기능으로, 이미 티스토리나 텍스트큐브닷컴에서 제공하고 있습니다. 진보블로그에서 제공하려는 쉬운편집 기능도 전반적인 구성이 비슷하지만, 스타일시트 파일에 특정 치환자를 적어넣어야 하는 기존의 쉬운편집과는 다르게, skin.html 파일의 선택자만 맞으면 동작하도록 계획되었습니다. 쉬운편집 리모콘에서 저장된 값들을 새 스타일시트 파일에 저장해서 스킨 자체의 스타일시트 파일을 덮어쓰는 것입니다. 이 문서에서는 그러기 위해서 맞춰야 할 선택자 목록을 다룹니다. (다음: 순서 없는 목록--ul)

body -- html 문서에서 빠지면 안되는 그 body 태그. 자세한 설명은 생략합니다.
- div#frame -- 전체 스킨을 감싸는 영역.
  - div#header -- 블로그 제목 부분을 감싸는 영역.
    - div#header h1.title -- 블로그 제목.
  - div#navigation -- 방명록, 태그 구름 등으로 건너뛰는 메뉴 영역.
    - div#navigation a -- 메뉴 링크.
  - div#main -- 본문과 사이드바를 감싸는 영역.
    - div#content -- 본문 영역.
      - div#content div.entry -- 개별 글을 감싸는 영역.
        
        div#content div.entry h2.title -- 글 제목.
        
        div#content div.entry div.text -- 글 내용.
    - div#sidebar1 -- 기본 사이드바 영역.
      - div#sidebar1 div.widget -- 개별 위젯을 감싸는 영역.
        
        div#sidebar1 div.widget h3.title -- 위젯 제목.
        
        div#sidebar1 div.widget div.content -- 위젯 내용.
    - div#sidebar2 -- 확장 사이드바 영역.
  - div#footer -- 스킨 밑부분을 감싸는 영역.

H2: 덧붙임

노파심에 드리는 말씀. (다음: 순서 있는 목록--ol)

필수 선택자의 구조가 앞서 살펴본 목록에 들어맞아야 쉬운편집 기능을 살릴 수가 있습니다.
html 마크업만 갖고 css 파일을 만들고 싶은 분은 미리 준비된 스켈레톤 스킨을 살펴보세요.
배경 그림이나 아이콘을 교체하는 식으로 작업하실 분은 진보블로그 기본 스킨을 살펴보세요.

H2: 본문 요소 미리보기

앞선 내용에서 예로 들지 못한 요소들을 살펴봅니다.

H3: TABLE

이 부분이 테이블 캡션
헤더1	헤더2	헤더3
칸1-1	칸1-2	칸1-3
칸2-1	칸2-2	칸2-3

H3: PRE, HR

PRE 요소는 줄바꿈이나 띄어쓰기 등을 그대로 표현할 때 씁니다. 시를 쓰거나 프로그램 코드를 보여줄 경우에 적당하겠지요.

내 마음은 호수요
그대 노 저어 오오

HR 요소는 가로로 선을 하나 그어 줍니다.

오너라, 인간의 아이야
물가로 자연으로
요정과 함께 손에 손잡고

H3: ADDRESS

ADDRESS 요소는 연락처--웹 주소 말고 실제 주소--를 표시할 때 필요하지만, 사실 잘 쓰이지 않습니다.

진보네트워크센터
주소: 서울시 서대문구 충정로 3가 227-1번지 우리타워 3층
전화: +82-2-702-7687

H3: 그 밖의 인라인 요소들

H4: STRONG, B

STRONG과 B는 굵은 글씨를 출력할 때 씁니다. STRONG은 '특별히' 강조하라는 의미이고 B는 그냥 굵게 처리하라는 의미로 약간 차이가 있습니다. B의 경우에는 의미가 아닌 생김새를 다루는 오래된 요소로 이제는 안 쓰는 게 최선입니다만... 사람들의 습관과 다양한 환경을 고려해서 같이 취급하는 편이 좋겠습니다.

H4: EM, I

EM과 I는 기울어진 글씨를 출력할 때 씁니다. EM은 강조한다는 의미이고 I는 그냥 기울이라는 의미로 약간 차이가 있습니다. I의 경우에는 의미가 아닌 생김새를 다루는 오래된 요소로 이제는 안 쓰는 게 최선입니다만... 사람들의 습관과 다양한 환경을 고려해서 같이 취급하는 편이 좋겠습니다.