목록WEB/강의 메모 (2)

개발나라 스용공주

[실습] JQuery를 활용한 탭메뉴 - 사용자정의 속성과 attr()을 이용한 데이터 불러오기

이번 글은 아래 영상에 나온 탭메뉴를 만드는 코드 리뷰이다.해당 탭메뉴는 이미지를 버튼으로 사용하여 이미지를 누르게 되면 텍스트 내용이 변경되는 코드이다.    [ 개발 과정 ]첫번째로 아래 사진과 같이 아무것도 효과도 적용되어있지않는 아래 화면을 만들어준다. 그리고 맨 첫번째 이미지에 해당하는 텍스트를 제외한 나머지 텍스트들은 안보이도록 처리해준다.(맨 첫번째 나오는 이미지와 텍스트에는 추가적으로 클래스명을 따로 부여해 해당 클래스명의 기능으로 이미지가 색상이 있고 둥근 형태이고 텍스트가 보여지는 형태가 되도록 해준다. => 그리고 클릭 시 클릭한 이미지에 추가적으로 부여한 클래스명이 옮겨가는 구조 => 옮겨가면 위에서 만든 클래스의 기능이 옮겨가지는 것 => 옮기는 것은 제이쿼리로 해준다)    두번..
WEB/강의 메모 2024. 11. 20. 15:06
[실습] 보더 애니메이션

이번 글은 border를 활용한 탭 메뉴 애니메이션 실습에 대한 글이다.  * border는 늘어날 수 없으므로 가상클래스로 만들어줘야함  자기자신의 X축에서 크기값을 50% 빼줘야함 (정중앙 배치)left:50%;transform: translateX(-50%); [ html ] HOME ABOUT SERVICE PORTFOLIO CONTACT  [ css ]body { margin : 0; display: flex; justify-content: center; align-items: center; height: 100vh; background-color: #f4f4f4;}a..
WEB/강의 메모 2024. 11. 17. 23:07
Prev 1 Next