전체 글10 딤드 레이어 팝업 만들기 이번엔 딤드 배경 + 레이어 팝업과 개발하면서 언제든 팝업창을 열어 볼 수 있도록 테스트용 임시 버튼을 만들어 볼 것이다 축하드립니다! 이벤트에 당첨되었습니다. 닫기 아쉽게도 이벤트에 당첨되지 않았습니다. 닫기 우선 html 제일 상단에 팝업창을 입력해준다 팝업창이 하루 종일 콘텐츠 상단에 떠있으면 안 되므로 display:none; 처리 컨텐츠1 컨텐츠2 컨텐츠3 컨텐츠4 그리고 그 밑에는 평상시와 같이 페이지를 만들어주면 된다 팝업1 팝업2 그리고 마지막엔 팝업창 테스트용 임시 버튼들까지 만들어주면 끝 .dimmed { position: fixed; top: 0; right: 0; bottom: 0; left: 0; background: rgba(0, 0, 0, 0.5); z-index: 99999;.. 2022. 6. 7. slick을 사용하여 콘텐츠와 텍스트가 변경되는 슬라이드 만들기 슬라이드가 넘어오면서 텍스트 등 콘텐츠들이 같이 넘어오는 게 아니라 텍스트 영역은 움직이지 않으면서 그 안의 텍스트만 슬라에드에 맞게 변경되는 슬라이드를 만들어보려고 했는데 생각보다 복잡했다 ㅠ.ㅠ 하지만 어쨌든 완성해냄 가이아 네메시스 니케 디오니소스 레테 메티스 브로미우스 기본적인 레이아웃 구성은 이렇다 텍스트들만 따로 위에 모아둬야 슬라이드와 함께 움직이지 않고 독자적으로 움직인다 /* Slider */ .slick-slider { position: relative; display: block; box-sizing: border-box; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none.. 2022. 6. 7. 스크롤을 내리면 부드럽게 콘텐츠가 나타나는 애니메이션 스크롤에 맞춰서 콘텐츠들이 슥, 삭 하고 나타나는 페이지는 똑같은 디자인에 정적인 페이지보다 더 전문적이고 고급적인 느낌을 주기에 여기저기 적당히 잘 써먹기 좋다 :) 생각보다 방법도 매우매우 간단함 아래로 스크롤해보세요 타이틀 내용 타이틀 내용 내용 내용 내용 다양한 케이스들을 보여주기위한 레이아웃을 준비 const saTriggerMargin = 150; const saElementList = document.querySelectorAll('.motion'); const saFunc = function() { $.each(saElementList, function(index, element) { if (!element.classList.contains('show')) { if (window.inner.. 2022. 6. 7. WAI-ARIA 사용하여 탭 구현하기 오늘은 WAI-ARIA를 사용하여 선택된 탭에 따라 보이는 화면이 휙휙 바뀌는 페이지를 구현해볼 것이다 탭1 탭2 탭3 우선 이렇게 탭 레이아웃을 짜주고 탭1 컨텐츠 영역 탭2 컨텐츠 영역 탭3 컨텐츠 영역 이어서 콘텐츠 영역 레이아웃을 짜준다 탭이 3개니까 컨텐츠 영역도 3개 각 영역에 맞는 role값을 주고, 탭 aria-controls = 컨텐츠 id 탭 id = 컨텐츠 aria-labelledby 이렇게 맞춰줘야 제대로 동작한다 css는 역시 자유롭게 커스텀하되 .tab_list li a { display: block; height: 40px; padding: 10px 0; text-decoration: none; background: #FFC3C3; box-sizing: border-box; c.. 2022. 6. 2. 접혔다 펼쳐지는 토글 메뉴 만들기 한번 알아두면 굉장히 쓸 곳이 많은 코드 간단하면서도 화면이 엄청나게 깔끔해진다 내용 주의사항 주의사항1 주의사항2 주의사항3 주의사항4 내용 주의사항 주의사항1 주의사항2 주의사항3 주의사항4 기본적인 html 레이아웃 뼈대 여기서 버튼에 on 클래스가 붙으면 숨겨져 있던 div가 display:block;으로 바뀌어서 뿅 하고 나타나는 설정이다 css는 취향껏 커스텀하되 .list_box .inner_area { display: none; } 이렇게 평소에는 버튼 밑 div를 숨겨놨다가 .list_box .toggle_btn.on + .inner_area { display: block; } 버튼에 on 클래스가 붙으면 밑에 있는 div 박스가 이렇게 바뀌도록 설정해둬야 한다 .list_box .tog.. 2022. 5. 30. [HTML/CSS] 문법 검사 사이트 이 정도면 html/css 좀 한다고 생각했을 때 문법 틀렸다고 개발자분이 수정 요청을 보낸 적이 있다.. 알고 보니 div 하나를 dlv라고 쳐서....... 부끄 아무튼 사람이기에 코드를 빼먹을 수도 있고, 오타를 낼 수도 있으니 작업을 끝내면 문법 검사는 필수로 해야한다 html 문법 검사 css 문법 검사 사용법은 무척 간단하다 여기 코드 짠 거 다 집어넣고 클릭하면 됨 (파일을 넣어서 돌려도 되는데 나는 회사에서 파일 업로드가 금지되어 있어서 이렇게..) 사실 수정 건이라 문법 검사 안 돌려봤는데 이거 글 쓰려고 돌려봤더니 이렇게 귀신같이 에러가 나왔다 수정할 때 태그 지우면서 닫는 태그를 하나 안 지워줬었나 보다.. 이렇듯 문법 필수는 귀찮더라도 꼭꼭 해주자 2022. 5. 30. 이전 1 2 다음
