웹사이트나 블로그를 돌아다니다 보면 탭으로 구분된 메뉴를 종종 볼 수 있다. 탭으로 메뉴를 구성하면 가로나 세로로 나열된 정보를 작은 공간에 표시할 수 있다는 장점이 있다. /'pəlp/ 블로그처럼 본문과 댓글을 구분하는 데 사용할 수도 있고 사이드바의 최근 글, 최근 댓글, 최근 트랙백을 탭으로 묶어서 구성할 수도 있다. 이런 탭 메뉴는 복잡한 JavaScript를 사용하지 않아도 input 요소와 CSS만으로 간단히 만들 수 있다. 한 화면에 두 개 이상의 탭을 배치하면 제대로 동작하지 않으니 한 화면에 한 개만 사용하도록 주의한다. 앞으로 이야기할 탭 메뉴는 input 요소 중 라디오 버튼(input type="radio")에서 label 글자를 클릭하면 대응하는 번호의 버튼이 선택된다는 점을 이용..

1. 글꼴(ttf → woff, eot) 변환 및 Dropbox 업로드 오랜만에 블로그 스킨을 바꾸려고 CSS를 편집하는데 유독 IE9, IE10에서만 웹폰트가 적용이 되지 않았다. IE9 이후로는 EOT뿐 아니라 WOFF도 지원한다는데 왜 안될까 고민하던 중 Google Fonts가 문득 생각나서 적용해보았다. 이상하게 CSS의 내용은 내가 작성한 것과 완전히 똑같은데 Google Fonts는 적용이 되고 내껀 안된다. 이런저런 테스트를 하다보니 IE9, 10에서는 티스토리 스킨에 업로드한 글꼴 파일을 불러오지 못하고 외부 링크에서만 제대로 읽어왔다. 그래서 클라우드 서비스를 활용하기로 했다. 웹폰트를 적용해봤던 적이 있다면 방법은 아주 간단하다. 외부에 woff 파일을 올리고 CSS @font-fac..

CSS를 사용해서 특정 요소를 투명하게 할 땐 주로 두 가지 방법을 사용한다. 첫째가 opacity 속성이고 둘째가 rgba다. opacity는 이름 그대로 불투명한 정도를 지정하는 속성이다. 0 ~ 1 사이의 값을 갖는데, 0에 가까울수록 흐려지고 1에 가까울수록 진해진다. rgba는 흔히 사용하는 rgb 색상에 alpha 값을 더한 것으로, alpha 값이 0에 가까울수록 흐려지고 1에 가까울수록 진해진다. 두 가지를 예를 통해 살펴보자. 1. opacity Chrome, Firefox, Opera, Safari background : pink; opacity : .3 opacity는 앞에서 이야기한 것처럼 지정한 요소 전체를 투명하게 하는 속성이다. opacity: 0~1처럼 사용하며, 속성값은 0..

웹페이지 글이 길어지면 화면 오른쪽이나 아래에 스크롤 바가 나타난다. 대부분 회색 배경에 하얀 화살표가 나타난다. CSS를 사용해서 스크롤 바를 꾸며보자. fleXcroll이나 jScrollPane이라는 jQuery 플러그인을 사용하면 모든 브라우저에 스크롤 바를 적용할 수 있지만, 이번엔 그냥 CSS만 사용해서 IE, Chrome, Safari의 스크롤 바를 바꿔보자. Internet Explorer용 코드 html {scrollbar-3dLight-Color: #efefef; scrollbar-arrow-color: #dfdfdf; scrollbar-base-color: #efefef; scrollbar-Face-Color: #dfdfdf; scrollbar-Track-Color: #efefef; s..

CSS로 CCL과 각주를 만든 것처럼 블로그 메뉴도 만들 수 있다. CSS만으로 블로그 메뉴를 만들면 이미지나 JavaScript를 내려받고 연산하는 데 시간이 허비되지 않으므로 페이지 로딩이 빨라지고 메뉴 표시에 시간 지연도 없다. ul 요소를 중복으로 사용해서 HTML 코드를 작성하고 CSS만 적용하면 끝이다. 아래의 메뉴는 마우스 커서를 올리면 확장되는 분류(Category)를 포함한 블로그 메뉴 예제다. Home Tag Media Category ▽ 일상 ▷ 습작 문화생활 주절주절 컴퓨터 ▷ 컴퓨터 팁 한글화 블로그 시스템 유지, 관리 인터넷 멀티미디어 파일 관리 압축 프로그램 CD/DVD 보안 오피스 기타 기타 ▷ 음식 건강 상식 임시 보관소 Guestbook Admin Post CSS 코드 ...

CSS 롤오버로 CCL 표시하기에서 사용한 CSS 롤오버로 구현한 각주다. 글을 쓸 때 인용한 내용의 출처나 해당 내용에 대한 부연 설명을 주석으로 단다. 블로그는 하이퍼 링크를 사용할 수 있으니 내용 출처에 대해 주석을 달 일은 많지 않을 것 같고 대부분 내용에 대한 부연 설명일 것이다. 주석은 각주1각주 1각 쪽 마지막에 주석 내용을 기록한다.와 미주2각주 2글 전체 마지막에 주석 내용을 기록한다.로 구분되지만, 블로그 글은 기본적으로 쪽(page) 구분이 없다. 설령 쪽 구분을 해서 글을 작성한다고 해도 책과 같은 형태로 쓸 수 없고 연재물 형태가 되므로 각주와 미주를 구분하는 것이 의미가 없다. 어쨌든, 블로그 글에 각주를 달면 책과는 달리 글 마지막을 보지 않고도 즉시 말풍선으로 각주를 확인할 ..