[태그:] CSS

이 포스트에서는 CSS로 전환 효과(transition)를 구현하는 방법을 포스팅합니다. CSS로 롤오버 버튼 만들기 포스트에서 포스팅한 바와 같이 간단한 롤오버 버튼은 자바스크립트 대신 CSS로 구현할 수도 있다는 글을 포스팅한 바 있습니다. 이 CSS를 응용하면 CSS에 의한 형태 전환이 이루어질 때 바로 전환되지 않고 서서히 매끄럽게 전환되는 효과를 구현할 수 있습니다. 이를테면 크기가 변하는 상자의 경우 바로 변하지 … 더 보기 “CSS 전환 효과 구현하기”

이 포스트에서는 <div> 등의 태그로 그리는 박스 영역의 크기를 잡을 때 그 기준을 정하는 CSS에 대해서 서술합니다. 박스 크기의 기준을 정하는 CSS 프로퍼티의 이름은 box-sizing이며, 이 프로퍼티는 CSS3에서 새로 추가된 프로퍼티입니다. 이 프로퍼티가 가질 수 있는 값은 initial과 inherit를 제외하면 다음과 같이 두 가지가 있습니다. content-box 내용 영역을 기준으로 크기를 잡습니다. 즉, 바깥 여백(margin)과 외곽선(border)과 … 더 보기 “박스 크기의 기준을 정하는 CSS”

이 포스트에서는 CSS로 롤오버 버튼을 만드는 방법을 포스팅합니다. 예전에는 롤오버 버튼(마우스를 대면 모양이 바뀌는 버튼)을 만들려면 보통의 버튼 이미지와 롤오버 버튼 이미지를 준비해 놓고 자바스크립트를 써서 마우스를 대면 롤오버 버튼 이미지로 변하게 하는 방식을 사용했습니다. 하지만 CSS를 이용하면 간단한 텍스트 버튼의 경우는 자바스크립트 없이 CSS만 가지고도 롤오버 버튼을 만들 수 있습니다. 이것은 CSS를 이용하여 링크에 … 더 보기 “CSS로 롤오버 버튼 만들기”

이 포스트에서는 CSS를 이용하여 상자의 모퉁이를 둥글게 만드는 기법을 서술합니다. 예전에는 둥근 모퉁이를 구현하려면 배경 이미지를 이용하거나 플래시를 사용하여 둥근 모퉁이 버튼을 만드는 등의 방법을 사용하였지만, 현재는 CSS만으로도 둥근 모퉁이를 구현할 수 있어서 굳이 이런 방법을 쓸 이유가 없게 되었습니다. CSS에서 둥근 모퉁이를 구현하는 프로퍼티는 border-radius입니다. 일단 다음 코드를 봅시다. .radius_box { display: inline-block; padding: … 더 보기 “상자 모퉁이 둥글게 만들기”

이 포스트에서는 CSS로 홀수와 짝수에 따라 다르게 표시되는 기법을 서술합니다. 사무실에서 다루는 문서의 표나 각종 요금 고지서 등의 표를 보면 홀수줄과 짝수줄의 색이 다르게 입혀져 있는 것을 볼 수 있습니다. (참고로 마이크로소프트 엑셀 등 스프레드시트 프로그램에도 이 기능이 있습니다.) 이 기능은 CSS로도 구현할 수 있습니다. 다음 코드를 봅시다. p:nth-child(2) { color: blue; } 이 CSS … 더 보기 “홀짝에 따라 다르게 표시되는 CSS”