aPOST

키프레임 애니메이션을 정의한 후 요소에 애니메이션을 적용하려면 "animation" 속성을 이용해 키프레임 애니메이션을 연결해야합니다. "animation" 속성은 아주 많은 옵션 값을 가지고 있기 때문에, 다양한 애니메이션 효과를 만들 수 있습니다. CSS 애니메이션에서 사용할 수 있는 키프레임 애니메이션 속성은 다음 8개가 있습니다. 키프레임 애니메이션 전용 속성이므로 키프레임 애니메이션이 연결되지 않은 경우 적용되지 않습니다.

모든 웹사이트에 기본적으로 하나씩은 있는 풀다운 메뉴 구조를 CSS로 만들어 보겠습니다. 가로로 길게 펼쳐진 1단 메뉴는 목록 태그(

)로 간단하게 만들 수 있지만, 2단, 또는 3단으로 펼쳐지는 메뉴를 만들려면 사용자가 메뉴를 펼치는 동작을 통해 메뉴 항목을 최종적으로 선택하는 과정을 필요로 합니다. 사용자가 하위 메뉴를 펼치는 과정은 마우스 호버, 또는 클릭을

라디오버튼은 하나의 그룹으로 묶은 버튼들 중에서 1개만 선택(체크) 상태가 되는 특징이 있습니다. 이런 특징을 활용하면 목록으로 표현되는 컨텐츠를 작은 영역 안에서 탭(Tab)으로 전환해가면서 볼 수 있는 UI를 만들 수 있습니다. 탭 인터페이스는 현재 선택된 탭 1개의 컨텐츠만 보이는 구조이기 때문에 라디오버튼의 특징을 활용하면 자바스크립트 없이도 탭 인터페이스를

체크박스를 활용하면 자바스크립트 없이도 FAQ, 또는 Q&A 상세 내용 보기를 펼쳐서 보는 사용자 인터페이스를 만들 수 있습니다. 체크박스, 또는 라디오버튼을 활용하는 기본 구조인 "input + label + content" 를 1개의 FAQ 아이템으로 구성해서 순서 없는 목록(

) 태그로 전체 FAQ 리스트를 완성합니다. HTML 내용은 같은 아이템 구조의 반복이므로 아이템 1개만 이해하면 됩니다.

체크박스와 라디오버튼은 사용자가 선택할 수 있는 대상을 표현하는 폼 요소입니다. 선택적인 값을 표시하고, 선택된 값을 서버로 전송할 수 있는 단순한 기능을 하는 요소입니다. 그리고 이 선택된 값을 표시하는 상태를 "checked" 속성으로 표현을 합니다. 체크박스는 1개 이상의 선택된 항목을, 라디오버튼은 그룹에서 1개의 선택된 항목을 "checked" 속성으로 표현합니다. 중요한 것은 HTML 요소의

기본적으로 모바일 웹 브라우저는 특별히 제한하지 않은 이상 핀치줌, 더블탭 줌 등 다양한 화면 줌인아웃 기능을 제공합니다. 모바일 웹 브라우저에서 보이는 웹페이지가 모바일 대응 웹페이지, 또는 반응형 웹 페이지여서 추가의 줌인아웃이 필요없는 경우 줌인아웃을 제한하기도 하지만, 모바일 기기, 또는 모바일 웹 브라우저에 따라 제한을 하는 방식이 조금씩 다릅니다. 모바일 웹

인쇄용 기본 설정 웹페이지를 프린트 출력용으로 구성하려면 다음처럼 미디어쿼리로 크기와 여백을 설정할 수 있습니다. 다음 프린트용 미디어쿼리는 A4용지용 세로 출력을 위한 일반 설정입니다. 여백 값은 적절히 조정해서 사용하면 됩니다. @media print { body{ width: 210mm; height: 297mm; margin: 30mm 45mm 30mm 45mm; /* margin: auto auto; 로 자동 여백 설정도 가능 */ } } 프린트용

CSS 로 그림자 효과를 만들면 생각보다 보기좋고 적절한 그림자 효과를 만드는게 그렇게 만만하지 않습니다. 그래서 보통은 잘 만들어진 그림자 효과를 복사해 와서 사용하는 경우가 많습니다. 잘 만들어진 쓸만한 그림자 효과 몇가지를 소개합니다. 복붙해서 사용하면 됩니다. .shadow{ box-shadow: 0 4px 2px -2px rgba(0,0,0,0.7); } .shadow{ box-shadow: 0

CSS를 처음 다루기 시작할 때 가장 많이 부딛히는 문제이며, 문제의 원인에 대한 이해가 없이 요행으로 문제가 해결되고 넘어가면서 같은 문제가 반복됩니다. 다음과 같이 이미지가 들어있는 단순한 블록 태그를 웹 페이지에 표시하면 하단에 다음처럼 여백이 남게 됩니다. 일단 이유를 모르고 이런 저런 속성을 추가하다보면 여백이 사라지고, 다음 번에 같은 문제가 또