일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | ||||||
2 | 3 | 4 | 5 | 6 | 7 | 8 |
9 | 10 | 11 | 12 | 13 | 14 | 15 |
16 | 17 | 18 | 19 | 20 | 21 | 22 |
23 | 24 | 25 | 26 | 27 | 28 |
- 리액트
- web
- 웹디자인기능사
- Supabase
- CSS
- 코드공유
- PROJECT
- jQuery
- github
- 코딩독학
- 세로메뉴바
- 연산자
- git
- react
- 비전공자
- 렛츠기릿자바스크립트
- 실기
- 깃
- 웹디실기
- JavaScript
- 웹디자인기능사실기
- 타입스크립트
- 웹퍼블리셔
- HTML
- 자바스크립트
- 프론트엔드
- 생활코딩
- 정보처리기사
- 슬라이드전환
- JS
- Today
- Total
목록탭메뉴 (2)
코딩하는라민

[CSS] JS 없이 탭메뉴 만들기 JS 없이 페이지를 만드는 과제를 하다가 알게된 코드! CSS 로도 간단하게 탭메뉴를 구현할 수 있다는 걸 알게되고 바로 적용해보았습니다. 1. HTML Menu01 Menu02 Menu03 안녕하세요 1페이지입니다. 프론트엔드 공부중인 코딩하는 라민입니다. 🐥🐥🐥 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptate beatae id eius modi eveniet facere dolorum fugiat esse repellendus sunt qui dolorem laudantium nesciunt ipsum, libero blanditiis error voluptatum maxime. 마지막 페이지..

Jquery 탭 메뉴 만들기 1. 탭의 기본 구조 - tab1, tab2 는 활성화되기 위한 클래스를 따로 줘야한다. ex) ‘on’, ‘active’, ‘current’ ... - tab 에 a를 주지 않았으면 cursor: pointer; 속성을 부여해준다. - tab의 ‘on’ 클래스에는 활성화되었을 때 색상을 따로 지정. - contents 에도 활성화되기 위한 클래스를 지정해준다. ex) ‘on’, ‘active’, ‘current’ ... - contents 는 tab 이 on 이 아닐 때에는 보이지 않게 하기 위해서 display: none;을 줘야한다. - contents의 ‘on’ 클래스에 display: block; 과 너비, 높이 등등 보여질 부분의 속성을 지정. tab1 tab2 c..