지금까지 사용하던 CCL 표시를 약간 수정했다. 글 오른쪽 위의 CCL 표시 부분에 마우스 커서를 올리면 CCL 표시 부분 아래에 작은 화살표가 추가된 것을 확인할 수 있다. CSS 롤오버로 CCL 표시하기 글을 참고 해서 소스 코드를 복사한 다음, 이 글에서 이야기하는 내용을 약간 수정하기만 하면 된다. 먼저 HTML 코드는 이전과 같다. CSS 롤오버로 CCL 표시하기 게시물에 나온 HTML 코드를 그대로 복사해서 사용한다. 그리고 CSS만 아래의 코드로 교체한다. CSS 코드 .license{text-align:right;cursor:help;position:relative;margin:5px 0} .license span.ccl{margin-left:-999em;position:absolute;p..

화면에 요소를 배치할 때, 또는 각 요소 내용을 정리할 때 가장 많이 사용하는 스타일 속성이 padding과 margin이다. CSS를 사용해서 내가 원하는 위치에 원하는 방식으로 HTML 문서의 각 요소를 배치하려면 padding과 margin에 대한 이해는 필수다. 1. padding padding은 요소 내부의 여백이다. border에 관한 게시물에서 모든 요소는 자신만의 영역을 가진다고 이야기했다. 자신만의 영역 가장자리가 border로 표시된다. padding은 쉽게 생각하면 border에서부터 그 안에 배치된 글이나 이미지까지의 거리다. 아래 예를 보면 padding에 대해 감이 올 것이다. padding:15px 적용padding 미적용 Lorem ipsum dolor sit amet, co..

티스토리 블로그는 게시물에 CCLCreative Commons License를 표시할 수 있도록 옵션을 제공한다. 그러나 스크립트를 사용하는 이 CCL 표시는 스크립트에 포함된 특정 문자열 때문에 웹 표준 검사를 통과하지 못한다. 그래서 CSS 롤오버 기능으로 CCL을 만들어봤다. 특징 XHTML 웹 표준을 준수한다. CSS 3.0 웹 표준을 준수하지 못한다. (border-radius, box-shadow 속성 사용) 글자 색, 이미지 등을 원하는 대로 지정할 수 있다. 뭐, 특징을 잠깐 살펴봐도 쉽게 알 수 있지만, 이미 티스토리에서 지원하는 기능이므로 굳이 CSS로 따로 만들어 적용할 필요는 없는 기능이다. 티스토리 기본 CCL과의 차이는 스크립트를 사용하지 않는다는 것, 이미지나 글자 스타일, 글..

border 속성은 단어 뜻 그대로 테두리를 표시하는 것이다. HTML 문서의 모든 요소는 자기만의 일정한 영역을 가진다. 배경색이나 테두리가 없으면 시각적으로 표시되진 않지만, 사실은 자신의 영역을 차지하고 있다. border 스타일을 지정하면 사용자가 지정한 스타일로 이 영역의 가장자리를 표시한다. a border span border p border div border table border 예를 들면 위와 같은 것이다. 너비나 높이 속성이 지정되지 않았을 때 a와 span 요소는 글자가 입력된 부분만 영역으로 갖으므로 연달아서 표시된다. p 요소, div 요소는 문단과 특정 영역을 나타내므로 가로 전체를 기본 영역으로 가진다. table 요소 역시 td나 th에 입력된 내용만큼을 자신의 영역으로 ..

* 이전 글 보기 - 블로그에 유용한 태그 4 - table 태그로 간단한 표 만들기 - 블로그에 유용한 태그 5 - table 태그에 스타일 적용하기 이 글은 표 만들기에 관한 이전 글을 읽었다는 전제하에 작성되었습니다. 본문에 나오는 CSS 각 항목에 대한 설명은 이전 글을 참고하세요. 이전 글에서 table 태그로 표를 만드는 법, table 태그 속성 대신 CSS로 표 속성을 지정하는 방법에 대해 알아보았다. 이번엔 스타일을 적용해서 표 내용을 더 보기 쉽게 꾸며보자. 한눈에 알아보기 쉽고 외관상으로도 예쁜 표를 꾸미려면 CSS를 어떻게 작성해야 좋을까? 가장 간단한 방법은 배경색을 사용하는 것이다. 예를 들어 표의 홀수 행(tr class="odd")과 짝수 행을 다른 색으로 지정하면 색 차이 ..

CSS는 이전에 이야기한 것처럼 HTML 문서를 읽기 쉽게 구성하면서 일괄적으로 글꼴, 배경, 여백 등의 속성을 지정하는 것이다. 예전에 HTML 문서에서 글꼴의 크기, 스타일 등을 바꾸려면 태그를 사용했지만, 앞으로 언젠가 표준이 될 HTML 5에선 font 태그를 지원하지 않는다. (현재 사용하는 HTML은 HTML 4다.) font를 사용하지 않고 글자 스타일을 바꾸는 방법은 이미 블로그에 유용한 태그 1 - 글자 스타일 지정하기 (1)에서 이야기한 바 있다. 그러나 앞에서 font-family, font-size, font-style 등의 개별 스타일을 사용한 것을 font라는 하나의 스타일로 통합해서 사용할 수 있다. 스타일 시트의 크기도 줄고 물론 로딩 시간도 줄어든다. 먼저 이전의 방법인 H..