CSS21 CSS hover transition event 위와 같은 박스에 마우스를 올리면 아래와 같은 파란 선이 왼쪽에서부터 시작하여 0.2초안에 완성되고 싶을 때 어떻게 해야할까? 결과적으로 보여질 파란선에 대한 html, css 코드를 완성을 한 후 초기 설정을 width:0 로 한다. 이 때, 가상 선택자를 사용하면 css만으로 파란선에 대한 코드를 완성할 수 있다. hover 했을 때 width:100%로 주고, 가상선택자에 transition으로 시간을 0.2s로 설정하면 완성된다. 아래 코드를 보면서 다양한 변경을 해보면 이해될 것이다. 2020. 5. 12. CSS drop down menu 평소에는 Products, Sales만 있는 상태이다가 Products에 마우스를 올리면 아래로 하위 메뉴가 나오게 하는 예제이다. 위와 같은 드롭다운 메뉴를 만들기 위해서 display, position을 활용한다. products의 자식 태그인 ul의 css 속성으로 display: none;으로 설정한다. 이후 products:hover ul{display: block} 을 하여 드롭다운 메뉴가 나타나게 한다. 드롭다운 메뉴의 position 속성은 absolute을 사용하여 나타났을 때 레이아웃에 영향을 안 미치도록 해야 한다. 위의 예제 코드는 다음과 같다. 2020. 5. 12. CSS position position은 요소의 위치를 조정하기 위해서 사용된다. 원래 배치되기로 한 곳에서 조금 조정하거나 특정한 방식으로 찾은 부모 요소를 기준으로 배치를 하거나 하는 것이다. position 사용시 z-index이라는 z축에 우선순위를 주는 속성이 있다. 한글 프로그램에서 그림이 여러 개 겹쳐있을 때 '맨 앞으로' 같은 것을 생각하면 쉽다. position을 사용하면 같은 영역안에서 다른 박스와 겹치는 부분이 생길 수 있으므로 주의해야한다. 즉, 여러 겹의 레이어가 쌓이는 상황이 발생한다. 각 속성값을 보면서 활용방법을 생각해보면 유용할 것이다. static default 값이다. 즉, 모든 요소는 static이 기본 값으로서 inline, block 박스들이 나열되는 방법들을 잘 알고 있으면 된다. in.. 2020. 5. 9. CSS text-overflow(텍스트 잘리는 부분 처리) 아래 사진처럼 공간이 부족한 경우 ... 으로 처리하는 예시이다. 단독으로 text-overflow을 사용하면 "..." 처리가 되지 않는다. 아래 두 가지 속성을 함께 사용해야 한다. overflow: hidden white-space: nowrap 또한 당연한 얘기지만 글자가 width의 좌우 넓이를 넘쳐야 한다. 2020. 5. 8. 이전 1 2 3 4 5 6 다음
