3. CSS,JavaScript 간단한 아코디언(접는 콘텐츠) 만들기 (How to make CSS Collapsibles/Accordion)

RESULT HTML 삽입 미리보기할 수 없는 소스 body Section Btn1 Hello, It's Section1 Hello, It's Section1 Hello, It's Section1 Hello, It's Section1 Hello, It's Section1 Hello, It's Section1 Hello, It's Section1 Section Btn2 Hello, It's Section2 Hello, It's Section2 Hello, It's Section2 Section Btn3 Hello, It's Section3 CSS style .accordion{ background-color: whitesmoke; /* 배경색상 화이트스모크 */ cursor: pointer; /* 커서 포..

• format_list_bulleted How to(w3 study)
• · 2022. 7. 1.
• textsms

2-1. CSS, JavaScript 간단한 메뉴 버튼 만들기 (How to make Menu Button[How to make CSS Hamburger Menu])

RESULT HTML 삽입 미리보기할 수 없는 소스 body 클릭하면 메뉴 모양이 X로 변경됩니다. Click on the Menu Icon to transform it to "X" CSS style .container{ /* bar1,2,3 전체의 컨테이너 클래스 지정 */ cursor: pointer; /* 마우스 커서를 요소에 갖다 대면 클릭 모양으로 바뀜 */ } .bar1, .bar2, .bar3{ width: 35px;/* 각각의 bar들을 너비 높이 지정*/ height: 5px; background-color: #000;/* bar색상을 검정색으로 지정 */ margin: 6px 0;/* bar 여백을 상하 6px, 좌우 0px로 지정 */ transition: 0.4s;/* 애니메이션 속..

• format_list_bulleted How to(w3 study)
• · 2022. 6. 25.
• textsms

2-2 . CSS,JavaScript 간단한 메뉴 만들기 (How to make CSS Simple Menu)

이전 글 확인 하기 HTML 삽입 미리보기할 수 없는 소스 body 클릭하면 메뉴 모양이 X로 변경됩니다.." data-og-host="seop-e.tistory.com" data-og-source-url="https://seop-e.tistory.com/2" data-og-url="https://seop-e.tistory.com/2" data-og-image="https://blog.kakaocdn.net/dna/d1RlWr/hyORK1V8tn/AAAAAAAAAAAAAAAAAAAAAIhkqOwiGBdxmdOUpDQO3o4U0Wgb7X5BGvvKZpUu7saP/img.png?credential=yqXZFxpELC7KVnFOS48ylbz2pIh7yKj8&expires=1767193199&allow_ip=&allow_referer=&signature=QHnsApzlh6j3RnU%2FtUwDW4mtmxk%3D

• format_list_bulleted How to(w3 study)
• · 2022. 6. 25.
• textsms