도아의 세상사는 이야기 ::

미투데이 팁: 미투 로그를 마음대로 꾸미기

반 공개된 미투데이

현재 플톡과 미투라는 미니 블로그가 서비스 중이다. 플톡은 처음부터 공개된 상태에서 진행됐고 미투는 아직도 초대권이 있어야 가입할 수 있는 서비스이다. 그러나 이제는 초대권이 무한 리필되기 때문에 사실상 반 공개 상태로 봐도 된다. 미투를 사용해보면 알 수 있지만 미투는 사용자를 세심하게 배려한 부분이 많이 엿보인다. 처음 가입한 뒤에 나타나는 미투 사용법은 로그인을 몇번 하면 자연스레 사라진다. 미투 홈에는 doa's me2day라는 문구가 나타나지만 사용자의 미투 ID가 s로 끝나면 's도 붙지 않는다.미투에는 이처럼 사용자를 배려한 부분이 많다.

반 공개된 미투데이

현재 플톡과

여기서 line-height는 줄간격을 의미한다. 일반적으로 사람들이 글 읽기에 가장 좋은 글 간격은 160%~180%라고 한다. 아래아 한글의 스타일을 보면 줄 간격이 160%으로 설정되어 있는 이유도 여기에 있다.

두번째 text-align는 글을 정렬하는 방법이다. 한글은 글을 양쪽으로 배분하는 것이 보기에 좋기 때문에 나는 justify를 사용했다. 글은 양쪽으로 배분할 생각이 없는 사람은 이 줄을 삭제하면된다.

font-family는 사용할 글꼴을 의미한다. 맑은 고딕은 처음에 볼 때는 어설퍼 보이지만 자주보면 가독성도 좋고 글꼴도 예쁘다. 아울러 LCD를 이용하는 경우 ClearType 때문에 가독성은 더 올라간다. 각각의 글꼴 이름은 쉼표로 구분하면 되며, 글꼴 이름에 공백이 포함되어 있다면 위의 예처럼 큰 따옴표(")로 인용하면 된다.

마지막으로 font-size는 글꼴의 크기를 말한다. 10pt처럼 인쇄할 때 사용되는 포인트로 표시해도 되며, 10px처럼 화소 단위로 표시해도 된다. 일반적으로 같은 값이라면 pt가 px보다느 크다. 즉 10px보다는 10pt가 더 큰 글꼴을 표시한다.

불릿은 문자가 아닌 아이콘으로 꾸미려면 다음 코드를 더 추가하면 된다.

.me2day_daily_digest li { list-style-image: url('http://me2day.net/images/me2day_icon.gif'); vertical-align: middle; }

불릿을 숫자로 하려면 다음 코드를 사용하면 된다. 아울러 margin-bottom: 1em;를 추가하면 LI 태그와 태그 사이의 간격을 조정할 수 있다. 여기서 em은 글꼴 크기에 대한 상대적인 값이다. 1em은 글꼴 크기를 얘기하면 1.5em은 글꼴 크기의 한배 반을 의미한다. px, pt, em 모두 마찬가지이지만 숫자 뒤에 공백을 두면 동작하지 않는다.

.me2day_daily_digest li { list-style-type: decimal; margin-bottom: 1em; }

이외에도 사용할 수 있는 옵션은 상당히 많다. 더 자세한 내용은 국내 최초로 CSS 소개하고 사용한 QAOS.com의 강좌를 참조하기 바란다.

도아의 세상사는 이야기

미투데이 팁: 미투 로그를 마음대로 꾸미기

반 공개된 미투데이

목차

반 공개된 미투데이