지유의 하루

햄버거 버튼은 이런 짝대기 3자 모양으로 이루어져 햄버거와 닮았다고 해서 만들어진 이름인데. 다들 이 부분은 어떻게 처리하시나요? 이미지 첨부하기 첫 번째 방법으로는 이미지 첨부 방법이 있는데 저는 별로 좋아하지 않는 방법입니다. 햄버거 버튼을 누르고 나면 X표시를 뜨게 하려고 이미지 두 개를 사용해야 하고 이미지를 두 개를 쓰면서 용량이 늘고 속도도 저하시키며 유지보수에 좋지 않습니다 CSS 가상요소 사용하여 만들기 HTML에 아주 간단하게 태그 안에 태그를 넣어줍니다. (공통으로 묶어서 쓸 수 있는 건 묶어 작업해 주세요) 1. hambuger태그 안에 relative값을 줍니다. relative는 자신을 기준으로 위치를 지정합니다. 2. span태그와 그 가상요소에는 absolute값을 넣어줍니다...

웹디자인|웹퍼블리셔/CSS 2023. 3. 22. 13:44

2020년도에 웹디자인 기능사 자격증 취득 준비하면서 준비한 경험으로 글 남깁니다. 웹디자인기능사에서는 반응형으로 준비 시키지 않기 때문에 현재 컴퓨터 화면에서 작동이 잘되기만 하면 됩니다. 슬라이드 (왼쪽 > 오른쪽) 클릭 버튼없이 왼쪽에서 오른쪽으로 자동으로 넘어가는 슬라이드 slide-1 slide-2 slide-3 .slide{ width:1000px; height:250px; overflow:hidden; float: left; } .slide-wrap{ position:relative; width:3000px; height:250px; } .slide-image{ position:relative; width:1000px; height:250px; float:left; } .slide-image..

웹디자인|웹퍼블리셔/웹디자인기능사 2023. 3. 12. 18:24

/*scoll-style*/ ::-webkit-scrollbar{width: 17px;}/*전체의 width값*/ ::-webkit-scrollbar-thumb{ background-color: var(--primary);/*막대의 색상 지정*/ border-radius: 12px; /*thunb와 track사이의 공간 만들기(padding과 margin은 적용X)*/ background-clip: padding-box; border: 3px solid transparent; } body::-webkit-scrollbar-track { background: rgba(255, 255, 255, 1);/*배경 컬러지정*/ } ::webkit-scrollbor 스크롤바 전체 (스크롤 감싸는 전체) ::-web..

웹디자인|웹퍼블리셔/CSS 2023. 3. 10. 17:31