본문 바로가기
반응형

IT/Web106

CSS3 모듈 - 밴더 프리픽스 벤더 프리픽스(Vendor Prefix) 세계적으로 가장 많이 사용되는 웹 브라우저에는 익스플로러, 크롬, 파이어폭스, 사파리, 오페라 등이 있습니다. 벤더 프리픽스(vendor prefix)란 이러한 주요 웹 브라우저 공급자가 새로운 실험적인 기능을 제공할 때 이전 버전의 웹 브라우저에 그 사실을 알려주기 위해 사용하는 접두사(prefix)를 의미합니다. 익스플로러 11버전에서 사용하는 기능을 9버전에서도 사용할 수 있게 됩니다. 아직 CSS 권고안에 포함되지 못한 기능이나, CSS 권고안에는 포함되어 있지만 아직 완벽하게 제정된 상태가 아닌 기능을 사용하고자 할 때 벤더 프리픽스를 사용하게 됩니다. 그렇게 하면 해당 기능이 포함되어 있지 않은 이전 버전의 웹 브라우저에서도 그 기능을 사용할 수 있게 .. IT/Web 2020. 3. 26.
CSS Form 요소 및 @ 규칙 Form 요소 form 요소 CSS를 이용하면 사용자의 입력을 받는 input 요소에도 다양한 스타일을 설정할 수 있습니다. input 요소의 크기 설정 width 속성을 이용하여 input 요소의 크기를 설정할 수 있습니다. input 요소의 테두리 설정 border 속성을 이용하여 input 요소의 테두리(border) 색상과 두께를 바꿀 수 있습니다. 또한, border-radius 속성을 이용하여 input 요소의 모서리를 둥글게 만들 수도 있습니다. input 요소에 테두리 적용 사용자 : 비밀번호 : input 요소에 배경색 적용 background-color 속성을 이용하여 input 요소의 배경색을 설정할 수 있습니다. 또한, color 속성을 이용하여 input 요소의 텍스트 색상를 변경.. IT/Web 2020. 3. 24.
CSS 툴팁(tooltip) 효과 툴팁(tooltip) 툴팁(tooltip) 효과 해당 요소에 마우스를 올리면 추가적인 정보가 나타나게 하는 효과를 툴팁(tooltip) 효과라고 합니다. CSS를 이용하면 이러한 툴팁 효과를 간단히 설정할 수 있습니다. 다음 예제는 visiblility 속성을 이용하여 툴팁 효과를 구현하는 예제입니다. 툴팁 효과 여기에 마우스를 올려보세요! 마우스를 올려야 나타나는 툴팁입니다! CSS를 이용하면 툴팁(tooltip)이 나타나는 위치 설정 CSS의 상대적 위치를 나타내는 top, right, bottom, left 속성을 이용하여 툴팁의 상대 위치를 설정할 수 있습니다. 다음 예제는 툴팁이 해당 요소의 아래 쪽이 아닌 왼쪽에 나타나도록 구현한 예제입니다. 툴팁이 나타나는 위치 설정 여기에 마우스를 올려보세.. IT/Web 2020. 3. 20.
CSS 드롭다운(dropdown) 매뉴 설정 드롭다운 드롭다운(dropdown) 효과 해당 요소에 마우스를 올려서 다른 요소나 텍스트가 나타나게 하는 효과를 드롭다운(dropdown) 효과라고 합니다. CSS를 이용하면 이러한 드롭다운 효과를 간단히 설정할 수 있습니다. 다음 예제는 display 속성을 이용하여 드롭다운 효과를 구현하는 예제입니다. 드롭다운 효과 여기에 마우스를 올려보세요! 마우스를 올려야 나타나는 div 요소입니다! 드롭다운(Dropdown) 메뉴 메뉴에 마우스를 올리면 하위 메뉴가 나타나게 하는 메뉴를 드롭다운(dropdown) 메뉴라고 합니다. 드롭다운 효과를 이용하면 이러한 드롭다운 메뉴도 간단히 구현할 수 있습니다. 드롭다운 메뉴 Dropdown HTML CSS JAVA C++ IT/Web 2020. 3. 20.
CSS 네비게이션 바(navigation bar) 링크, 수직, 수평 내비게이션 바(navigation bar) 사용자가 웹 사이트에서 가장 많이 클릭하는 영역 중 하나가 바로 내비게이션 바입니다. 내비게이션 바(navigation bar)는 우리가 흔히 사용하는 웹 사이트의 메뉴를 의미합니다. HTML 요소만으로 만든 단순한 메뉴에 CSS를 이용하면, 보기에도 이쁘고 쓰기도 편리한 메뉴로 손쉽게 바꿀 수 있습니다. 링크를 사용한 리스트 메뉴 내비게이션 바 중에서도 가장 기본적인 것이 바로 링크(link)를 사용한 리스트 메뉴입니다. HTML에서 링크는 태그로 표현합니다. 다음 예제는 링크를 사용하여 구현한 간단한 메뉴 예제입니다. 링크를 사용한 리스트 메뉴 네이버 다음 네이트 구글 수직 내비게이션 바 링크를 사용한 리스트 메뉴에 display 속성값을 block으로 설정.. IT/Web 2020. 3. 20.
반응형

티스토리툴바