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..

마음. 눈에 보이진 않지만, 누구나 마음이 있다. 마음. 눈에 보이진 않지만, 눈여겨보면 눈에 보이는 게 또 마음이다. 하늘 같은 마음. 하늘 같은 마음은 그 크기를 가늠할 수 없을 만큼 넓다. 내 손바닥에 들어올 만큼 조그만 것이 또 하늘 같은 마음이다. 오늘 내 마음은 손바닥만큼이나 작은, 하늘 같은 마음이다. 조금씩 작아져서 나중엔 눈여겨봐도 보이지 않는 건 아닐까? 초록이 우거진, 바다만큼 푸른 내 마음. 조금씩, 조금씩, 조심스럽게 내보인다. 오늘의 내 마음이다. 내 마음을 당신께...

이전 글 보기 티스토리 스킨 만들기 1 - 페이지 구성 만들기 티스토리 스킨 만들기 2 - 페이지 구성 만들기 (HTML5) 여기를 클릭하면 완성된 문서 형식 예제로 바로 이동합니다. 1. 문서 형식 선언 (DOCTYPE) 블로그 레이아웃(배치)을 완성했으니 이제 각 영역에 필요한 정보를 입력하면 될까? 아니다. 그전에 레이아웃 외에 웹 페이지 전체를 구성하는 기본 요소를 추가해야 한다. 대표적인 것이 문서 형식을 선언하는 doctype이다. 지금 티스토리 [HTML/CSS 편집]에서 skin.html을 확인해보자. 맨 위에 doctype이라는 문구를 확인할 수 있을 것이다. (물론, 없을 수도 있다.) doctype은 태그가 아닌 현재 페이지가 어떤 버전의 마크업 언어로 작성되었는지를 웹 브라우저에 알..

오랜만에 노트북을 켰다. 집에 공유기가 없어서 데스크톱과 노트북을 함께 사용하면 한 녀석은 인터넷에 연결되지 않는다. 공유기 없던 시절처럼 연결하긴 귀찮고,, 어쨌든, 윈도 7 서비스 팩도 설치하고 그 김에 인터넷 익스플로러 9를 같이 설치했다. IE9를 설치하면서 몇 가지 기대를 한다. 속도에 향상이 있겠지? 사용하기 좀 편해졌겠지? HTML5 지원 여부는 어떨까? CSS3 지원은 좀 나아졌을까? 스크립트 처리는? 뭐 결론적으로 IE8보단 훨씬 좋겠지? 1. 첫인상 긴 머리, 긴 치마를 입은 난 너를 상상하고 있었지만.. 일단 외관은 요즘 추세에 맞게 바뀌었다. 브라우저 상단 메뉴를 얇게 줄이는 유행에 발맞춰서 많이 줄였다. 근데 좀 너무 줄였단 생각도 든다. 얇긴 하지만, 주소 표시줄이 그만큼 짧아졌..

한국어를 거의 삼십 년 사용하고도 아직 어려운 그것. 맞춤법.... 한국어는 참 좋은 언어다. 그러나 아무리 좋은 것도 단점이 있기 마련이다. 한국어의 어려운 맞춤법과 띄어쓰기 등은 모국어 사용자에게도 쉽지 않은 부분이다. 학교 국어 시간에 배운다고 결코 마스터할 수 없는 것이 한국어 맞춤법이 아닌가 싶다. 만약, 당당히 여기에 이의를 제기할 수 있다면, 지금 바로 '우리말 겨루기' 출연하시길. '달인' 기원!! 진짜 '우리말 겨루기'는 퀴즈 프로그램의 최고봉인 듯. 어쨌든, 모든 맞춤법을 제대로 알 수 없다는 한계에 온라인 한국어 맞춤법/문법 검사기와 Firefox 부가 기능 - 한글 맞춤법 검사기 0.3.2 글을 통해 손쉽게 사용할 수 있는 온라인 맞춤법 검사기를 소개했다. 난 지금도 항상 (주)나라..

* 이전 글 보기 티스토리 스킨 만들기 1 - 페이지 구성 만들기 티스토리 스킨 만들기 1 - 페이지 구성 만들기에서는 HTML4와 XHTML까지 사용하던 div 요소로 페이지를 구성했다. 시각적으로 아무런 문제가 없지만, 페이지 구성을 만들기 위한 요소와 기타 세부 구성을 위한 요소가 구별되지 않는다. 또 앞으로 HTML5가 주류를 이룰 것을 생각하면 새 스킨은 HTML4나 XHTML보단 HTML5 구성을 따르는 것이 나을 수 있다. 페이지의 구조적인 구성을 위해 HTML5에선 header, nav, article, aside, footer, hgroup, section 요소가 추가되었다. 앞의 글에서 IE 8 이하에서 HTML5의 section ..