CSS

웹페이지 레이아웃에 적용하는 CSS 애니메이션이나, 배너, 또는 아이콘 애니메이션은 그것만으로도 풍부한 웹페이지를 만드는데 도움을 줍니다. 그리고, 사용자 액션에 반응해서 애니메이션이 동작하도록 하는 것 정도는 체크박스나 마우스호버 속성 등을 이용하면 CSS 만으로 구현을 할 수 있습니다. 그러나, 애니메이션이 시작되거나, 애니메이션이 종료되는 시점에 특정 액션이 동작하도록 하거나 새로운 애니메이션, 또는 UI가 동작하도록

체크박스의 체크 상태를 활용하면 사용자 선택에 의한 다양한 레이아웃 변경을 구현할 수 있습니다. 보통은 자바스크립트를 사용해 클릭 이벤트 리스너를 등록하는 방식으로 처리를 하기도 하지만, CSS와 체크박스만으로도 기본적인 기능들은 모두 구현이 가능합니다. 먼저 플렉스박스를 이용해 기본적인 레이아웃을 작성합니다. 메인 컨텐츠를 표시하는 "

" 태그 영역과 메뉴를 표시하는 사이드바 표시에 "

CSS 변수를 잘 활용하면 반복해서 정의해야 하는 애니메이션 작업을 작은 CSS 코드로 줄일 수 있습니다. 키프레임 애니메이션 안에서도 CSS 변수를 사용할 수 있기 때문에 여러 개의 유사한 키프레임 애니메이션을 만들지 않고 한개의 애니메이션 정의를 재활용할 수 있습니다. 하트 모양이 여러개 겹쳐서 입체 느낌이 나면서 퍼져나가는 다음과 같은 애니메이션을 만들어 보겠습니다.

키프레임 애니메이션을 정의한 후 요소에 애니메이션을 적용하려면 "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; 로 자동 여백 설정도 가능 */ } } 프린트용