[All] 탭 구성하기(list 내부의 탭)

-


여러 종류의 탭이 있지만,
이번 형태는 탭에 들어가는 컨텐츠가 버튼과 별도로 분리되어있지 않고, list안에 버튼과 함께 존재하여 position 값으로 위치를 잡아주는 것입니다.

설명하기가 힘드리기가 힘들어 아래의 코드를 봐주시면 됩니다.


댓글

댓글 쓰기

이 블로그의 인기 게시물

[CSS] 마우스 hover 시, transition을 이용해 배경색 채우기

-
블로그를 옮기고 첫번째 글입니다. 차근차근 코드들을 옮기고, 수정작업을 거칠 것입니다. 이번 내용은 css만으로, 움직임효과를 내는 것인데요. 마우스를 태그에 올렸을때, 왼쪽에서부터 오른쪽으로 배경색이 차는 듯한 효과를 낼 수 있습니다. 아래의 코드를 통해 자세한 사항이 확인 가능합니다. See the Pen jGxKpm by eunjun ( @eunjin10914 ) on CodePen .
자세한 내용 보기

[All] JavaScript 와 CSS를 이용해 글자크기 조절버튼 구현하기

-
이미지
관공서에 많이 쓰이는 형태면서, 돋보기 기능이라고 해야할까요. 브라우저를 줌인, 줌 아웃 시키는 기능을 JavaScript와 CSS를 이용해 구현하고자 합니다. CSS 속성중에 zoom 을 사용할 건데, 브라우저가 firefox인 경우에는 지원하지 않는 속성이기 때문에, firefox로 접속했을 경우에는 zoom 외에 transform의 scale() 를 적용해줘야합니다. 코드는 아래와 같습니다. See the Pen KZaRqJ by jemaime ( @eunjin10914 ) on CodePen .
자세한 내용 보기

[CSS] animation을 이용해 hover시 배경색 변경하기

-
마우스를 올렸을때 animation 을 이용하면, 서서히 배경색이 바뀌는 방법은 덜 까다롭지만, 위에서 부터 아래 방향으로 바뀌는 방법은 상대적으로 까다롭더라구요. 그래서 코드도 정리할 겸, 포스팅을 하게되었습니다. 가상선택자 :before 과 animation 을 이용했습니다. 코드는 아래와 같습니다. See the Pen MrpePX by jemaime ( @eunjin10914 ) on CodePen . keyframes과 animation 프로퍼티들은  ie 10버전 부터 적용됩니다.
자세한 내용 보기