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

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])

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)

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=1751295599&allow_ip=&allow_referer=&signature=9obiPBOgqK3tcMRP2ciNf7zNbBU%3D
  • format_list_bulleted How to(w3 study)
  • · 2022. 6. 25.
  • textsms
1. CSS로 아이콘 메뉴를 만드는 방법 (How to insert an icon)

1. CSS로 아이콘 메뉴를 만드는 방법 (How to insert an icon)

폰트어썸 링크 작성하기 (font-awesome link insert) 폰트어썸을 사용하기 위해선 위 링크를 작성해야 한다. body CSS style .icon_bar{ /* 각 아이콘들이 묶여있는 div 클래스를 .icon_bar로 잡는다*/ width: 100%;/* 가로길이 100% (%를 사용했으므로 화면을 아무리 늘려도 가로길이가 끝까지 찬다.*/ background-color: #000; /*배경색상 검정색*/ overflow: auto;/*요소가 넘칠경우 스크롤바가 자동으로 생성된다.*/ } .icon_bar a{ /*icon_bar에 있는 a태그*/ float: left;/* 요소를 왼쪽으로 정렬*/ width: 20%;/*넓이 20%*/ text-align: center;/*텍스트 요소..

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