이 포스트에서는 CSS로 전환 효과(transition)를 구현하는 방법을 포스팅합니다. CSS로 롤오버 버튼 만들기 포스트에서 포스팅한 바와 같이 간단한 롤오버 버튼은 자바스크립트 대신 CSS로 구현할 수도 있다는 글을 포스팅한 바 있습니다. 이 CSS를 응용하면 CSS에 의한 형태 전환이 이루어질 때 바로 전환되지 않고 서서히 매끄럽게 전환되는 효과를 구현할 수 있습니다. 이를테면 크기가 변하는 상자의 경우 바로 변하지 … “CSS 전환 효과 구현하기” 더 읽기
이 포스트에서는 <div> 등의 태그로 그리는 박스 영역의 크기를 잡을 때 그 기준을 정하는 CSS에 대해서 서술합니다. 박스 크기의 기준을 정하는 CSS 프로퍼티의 이름은 box-sizing이며, 이 프로퍼티는 CSS3에서 새로 추가된 프로퍼티입니다. 이 프로퍼티가 가질 수 있는 값은 initial과 inherit를 제외하면 다음과 같이 두 가지가 있습니다. content-box 내용 영역을 기준으로 크기를 잡습니다. 즉, 바깥 여백(margin)과 외곽선(border)과 … “박스 크기의 기준을 정하는 CSS” 더 읽기
웹 페이지를 만들 때 스크롤이 가능하게 하면서도 스크롤바를 숨겨야 할 경우가 있습니다. 모바일 기기에서는 스크롤바가 평소에는 보이지 않다가 스크롤 중에 희미하게 보이지만 데스크톱에서는 오른쪽에 자리를 차지하고 있는데, 이 때 overflow: hidden;으로 CSS를 지정하면 스크롤바는 숨겨지지만 스크롤이 되지 않습니다. 다만, 모종의 방법을 사용하면 스크롤바가 숨겨진 상태에서도 스크롤이 가능하게 구현할 수 있습니다. 스크롤바를 숨기고 웹 페이지를 스크롤할 … “스크롤바가 숨겨진 상태에서 스크롤되는 웹 페이지 만들기” 더 읽기
이 포스트에서는 모바일의 가로화면 또는 세로화면에 따라 다른 모양으로 표현되는 웹 페이지를 만들기 위한 CSS에 대해 서술합니다. 반응형 CSS 만들기 포스트에서도 설명한 바와 같이 CSS에 미디어쿼리 기능이 있습니다. 반응형 CSS에는 브라우저의 최소폭에 따라 다른 CSS 코드를 지정해 줄 수 있었습니다. 미디어쿼리에서는 최소폭 뿐만 아니라 다른 여러 조건을 지정할 수 있는데 그 중 웹 페이지를 표시할 … “모바일의 가로세로에 따라 달라지는 CSS 만들기” 더 읽기
이 포스트에서는 반응형 웹 페이지를 만들기 위한 CSS에 대해 서술합니다. CSS에 미디어쿼리 기능이 있습니다. 같은 웹 페이지라도 인쇄하기 위한 레이아웃은 화면에 표시하기 위한 레이아웃과 다르게 해야 할 필요가 있고, 화면도 기기에 따라 해상도가 천차만별이기 때문에 다양한 해상도에서 레이아웃을 다르게 하기 위해 다양한 환경 조건에 따라 모양을 다르게 할 수 있는 기능을 제공합니다. CSS에 미디어쿼리를 적용하는 … “반응형 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” 더 읽기
플래시 없이 HTML5와 SVG, CSS와 자바스크립트를 이용하여 구현해 본 라듐시계(원본 포스트)의 로마 숫자 버전입니다. 라듐 특유의 푸른 야광빛을 구현하였습니다. 시각 숫자는 로마 숫자로 표현하였으며, 시각에 따라 회전되게 구현하였습니다. 본래 4에 해당하는 로마 숫자는 IV이지만 시계에서는 전통적으로 IIII를 사용한다는 점을 고려하여 여기서도 IIII로 표현하였습니다. 링크는 다음과 같습니다: https://pjw48.net/webapp/radiumclock/roman.html
플래시 없이 HTML5와 SVG, CSS와 자바스크립트를 이용하여 구현해 본 라듐시계(원본 포스트)의 바이너리 버전입니다. 라듐 특유의 푸른 야광빛을 구현하였습니다. 또한, 연도와 월, 일, 요일을 위쪽에 표시하고 시, 분, 초를 아래쪽에 표시합니다. 링크는 다음과 같습니다: https://pjw48.net/webapp/radiumclock/binary.html