StyleSheet/CSS 검색 결과

해당 글 142건

Responsive Web Design - 반응형 웹 적용하기

Responsive Web 반응형 웹 디자인은 모바일 혹은 데스트탑의 모든 기기와 크고 작은 모든 스크린 사이즈에서 적절하게 작동하는 웹사이트를 만드는 것입니다. 반응형 웹 디자인은 모든 사람에게 직관적이고 만족스런 경험을 제공하는 것에 초점을 두며, 데스크탑 유저와 폰 유저 모두에게 같은 이익을 제공하게 하는 것입니다. 반응형 웹 디자인 responsive web design 용어는 Ethan Marcotte가 만들어냈습니다. Food Sense는 아름다운 웹사이트이며, 모든 다른 뷰포트 사이즈에 반응합니다. 크건 작건 뷰포트에 웹사이트가 조절되어 자연스런 사용자 경험을 만듭니다. 이 Food Sense 웹을 참고해 보시기 바랍니다. Responsive vs. Adaptive vs. Mobile Res..
StyleSheet/CSS 2016. 9. 30. 08:05

Horizontal Scroll UI Style (수평,가로 스크롤 UI)

Overflow Scroll UI overflow 속성을 이용하여 스크롤을 생성하는 방법은 간단하지만 일반적으로 스크롤되는 콘텐츠의 전체 너비값을 부여하여 자식요소를 스크롤시키곤 합니다. 하지만 스크롤 되는 콘텐츠의 전체 너비값이 정해져 있지 않을 경우엔 어떻게 해야할까요? 예를 들어 스크롤되는 콘텐츠 내 박스의 내용이 짧아질 수도 길어질 수도 있는 UI 라면 전체 너비값을 선언하는 것이 무의미할 것입니다. 이를 스크립트로 처리하는 방법이 있겠지만 CSS 만으로도 간단히 해결할 수 있습니다. white-space: nowrap 위에서 언급한 스크롤 UI 에 대한 요구사항을 만족시키기 위해서 white-space: nowrap; CSS 속성값을 사용할 수 있습니다. 다음의 소스를 통해 살펴보시기 바랍니다...
StyleSheet/CSS 2016. 9. 29. 08:37

vertical align & center box(수직 중앙 정렬)

요소 중앙 정렬(수직정렬)요소를 중앙(센터) 정렬하는 방법에는 여러가지가 있습니다.가령, 가장 잘 알려진 line-height 로 중앙정렬을 시키는 방법은 text/image 가 single line 일 경우에만 가능하다는 단점이 있습니다. 그리고 위의 그림과 같은 position: absolute 를 이용하는 방법(demo)과 display: table-cell 을 이용하는 방법이 있습니다. table-cell 은 다음과 같이 많이 사용합니다. Unknown stuff to be centered. .something-semantic { display: table; width: 100%; } .something-else-semantic { display: table-cell; text-align: cen..
StyleSheet/CSS 2016. 9. 29. 08:36

select box CSS

CSS effect - Select Box 폼 필드 중에서 가장 커스텀(디자인)하기 까다로운 것 중의 하나가 셀렉트 박스입니다. 네이티브 select box 의 디자인상의 한계로 인해 CSS 로만으로는 해결하기 쉽지 않습니다. 이에 대한 대체방안을 살펴 보도록 하겠습니다. 네이티브 셀렉트 박스의 디자인상 한계로 인해 여러 플러그인에서는 select 박스의 구조를 div 와 ul 요소등으로 치환하여 사용합니다. 하지만 이 플러그인들은 구버전의 IE 지원률이 부족합니다. 또한, div 와 ul 요소로 치환하는 방법을 사용한 플러그인은 모바일상에서 각각의 기기들이 네이티브로 지원하는 효과를 받을 수 없게 되고 대단히 유쾌하지 못한 사용자 경험을 체험하게 될 것입니다. 아래에서 플러그인의 사용없이 CSS 와 간..
StyleSheet/CSS 2016. 9. 29. 08:35

CSS Button Transitions

CSS3 트랜지션 효과 이 글에서는 CSS3 Transitions을 이용한 버튼 효과 방법을 소개합니다. 버튼 마크업 참고로 BEM 방법론을 이용합니다. Html CSS Button Transitions Box In Box Out From Bottom From Top From Left From Right Filled Box In Filled Box Out Filled From Bottom Filled From Top Filled From Left Filled From Right CSS css * { box-sizing: border-box; } h1 { color: #37392e; font-size: 3.5em; } body { background: #F1F4F1; font-family: "Roboto ..
StyleSheet/CSS 2016. 9. 29. 08:34

Close button Animation

닫기 버튼 애니메이션 이 포스팅에서는 애니메이션 효과가 적용된 닫기 버튼에 대해 소개합니다. Close button Animation DEMO html Back css * { padding: 0; margin: 0; box-sizing: border-box; } body { background: #141926; font-family: Helvetica, Arial, sans-serif; } .outer { position: relative; margin: auto; width: 70px; margin-top: 200px; cursor: pointer; } .inner { width: inherit; text-align: center; } label { font-size: .8em; line-height:..
StyleSheet/CSS 2016. 9. 29. 08:34

CSS3 Animation(key frame)

CSS3 애니메이션 효과 지정하기 transition, transform 처럼 변형, 전환(화면이동) 효과도 멋진 기술이지만 CSS3에서 가장 눈에 띄는 변화 중의 하나는 바로 애니메이션 효과를 지정할 수 있다는 것입니다. 기존에는 변형, 전환인 2D, 3D의 효과를 주는 동안 시간을 주면 점차 모양이 바뀌는 것을 구현할 수는 있지만 이러한 효과를 주는 데 있어서 가장 제한이 되는 사항은 다음과 같은 것이 있습니다.전환 효과의 시작과 끝만을 지정할 수 있다.즉, CSS3 효과는 CSS의 특정 클래스나 구문을 지정하고 제거하는 방식으로 구현되기 때문에, 중간 모습(과정)에 대한 설명이 없습니다. 단순히 시작과 끝만을 지정할 수 있다는 의미입니다. 순차적인 효과를 적용하기 힘들다.중간 단계를 지정할 수 없기..
StyleSheet/CSS 2016. 9. 29. 08:30