CSS8 CSS3 확장 CSS3 버튼 CSS3 버튼(button) CSS를 이용하면 다양한 모양의 버튼을 여러 방식으로 만들 수 있습니다. CSS에서 버튼은 태그 뿐만 아니라 태그와 태그로도 만들 수 있습니다. 예) button 태그 a 태그 button 타입의 input 요소에서 내부에 표시될 문자열은 value 속성값으로 설정할 수 있습니다. 다음 예제는 마우스를 올리면 배경색이 변하는 버튼 예제입니다. 예) 위의 예제처럼 transition-duration 속성을 이용하면, 배경색 뿐만 아니라 글자의 색상까지 변경되게 할 수 있습니다. 다음 예제는 그림자 효과를 설정한 버튼 예제입니다. 예) 위의 예제처럼 box-shadow 속성을 이용하면, 버튼에 실제와 같은 그림자 효과를 간단히 설정할 수 있습니다. 다음 예제는 버튼.. 2020. 7. 1. CSS3 변형 2D Transform 변형(Transform) CSS3에서는 transform 속성을 사용하여 HTML 요소의 모양, 크기, 위치 등을 자유롭게 바꿀 수 있습니다. transform 속성은 HTML 요소에 대해 다음과 같은 동작을 제공합니다. - 해당 요소를 움직입니다. - 해당 요소를 회전시킵니다. - 해당 요소의 크기를 변경합니다. - 해당 요소를 기울입니다. - 해당 요소에 위의 네 가지 동작 중 원하는 동작들을 한 번에 적용시킵니다. CSS3에서는 transform 속성을 사용하여 2D 변형(transform)과 3D 변형(transform)을 모두 제공합니다. CSS 좌표 체계 transform 속성에서 사용하는 x, y, z좌표는 다음 그림과 같은 좌표 체계를 따릅니다. CSS 좌표 체계에서.. 2020. 7. 1. CSS3 모듈 CSS3 개요 CSS3는 이전 버전 CSS와 완전히 호환되는 CSS의 최신 표준 권고안입니다. CSS3 변경사항 CSS3에서 새롭게 추가되거나 변경된 대표적인 기능은 다음과 같습니다. - 선택자(Selectors) Level 3 - 미디어 쿼리(Media Queries) Level 3 - 색(Color) Level 3 - 네임스페이스(Namespaces) CSS3 모듈(module) CSS3는 새롭게 정의된 기능과 함께 이전 버전의 CSS 기능까지도 함께 포함하고 있는 모듈(module)이라는 것으로 구성됩니다. CSS3를 구성하고 있는 주요 모듈은 다음과 같습니다. - 선택자(Selectors) - 박스 모델(Box Model) - 배경(Backgrounds) - 이미지(Image Values and .. 2020. 7. 1. CSS 고급 내비게이션 바(navigation bar) 사용자가 웹 사이트에서 가장 많이 클릭하는 영역 중 하나가 바로 내비게이션 바입니다. 내비게이션 바(navigation bar)는 우리가 흔히 사용하는 웹 사이트의 메뉴를 의미합니다. HTML 요소만으로 만든 단순한 메뉴에 CSS를 이용하면, 보기에도 이쁘고 쓰기도 편리한 메뉴로 손쉽게 바꿀 수 있습니다. 링크를 사용한 리스트 메뉴 내비게이션 바 중에서도 가장 기본적인 것이 바로 링크(link)를 사용한 리스트 메뉴입니다. HTML에서 링크는 태그로 표현합니다. 다음 예제는 링크를 사용하여 구현한 간단한 메뉴 예제입니다. 예) Home HTML CSS 자바스크립트 수직 내비게이션 바 링크를 사용한 리스트 메뉴에 display 속성값을 block으로 설정하면, 간.. 2020. 7. 1. CSS 선택자 선택자(selector) CSS에서는 스타일을 적용할 대상을 선택하기 위해서 선택자(selector)를 사용합니다. 지금까지 살펴본 대표적인 선택자는 다음과 같습니다. - 전체 선택자 - HTML 요소 선택자 - 아이디(id) 선택자 - 클래스(class) 선택자 - 그룹(group) 선택자 전체 선택자 CSS를 적용할 대상으로 HTML 문서 내부의 모든 요소를 선택합니다. 예) HTML 요소 선택자 CSS를 적용할 대상으로 HTML 요소의 이름을 직접 사용하여 선택할 수 있습니다. 예) ... 이 부분에 스타일을 적용합니다. 아이디(id) 선택자 아이디 선택자는 CSS를 적용할 대상으로 특정 요소를 선택할 때 사용합니다. 이 선택자는 웹 페이지에 포함된 여러 요소 중에서 특정 아이디 이름을 가지는 요소.. 2020. 7. 1. CSS 속성 display 속성 display 속성은 웹 페이지의 레이아웃(layout)을 결정하는 CSS의 중요한 속성 중 하나입니다. 이 속성은 해당 HTML 요소가 웹 브라우저에 언제 어떻게 보이는가를 결정합니다. 대부분의 HTML 요소는 display 속성의 기본값으로 다음 두 가지 값 중 하나의 값을 가집니다. 1. 블록(block) 2. 인라인(inline) 블록(block) display 속성값이 블록(block)인 요소는 언제나 새로운 라인(line)에서 시작하며, 해당 라인의 모든 너비를 차지합니다. , , , , , 요소는 대표적인 블록(block) 요소입니다. 인라인(inline) display 속성값이 인라인(inline)인 요소는 새로운 라인(line)에서 시작하지 않습니다. 또한, 요소의 너.. 2020. 7. 1. 이전 1 2 다음
