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; /* 커서 포..

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;/* 애니메이션 속..

이전 글 확인 하기 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://scrap.kakaocdn.net/dn/d1RlWr/hyORK1V8tn/MWnty5uVuHybWxFxDUhk1K/img.png?width=800&height=800&face=0_0_800_800,https://scrap.kakaocdn.net/dn/dAEnHc/hyOSU9Io0E/T7HRO4yKFNNFJRSipjmKBK/img.pn..

폰트어썸 링크 작성하기 (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;/*텍스트 요소..