웹 코딩19 css에서 data 속성 접근하는 방법 ✅data 속성 HTML5에서 data 속성은 HTML 요소에 추가 정보를 저장할 수 있도록 한다. data- 로 시작하는 속성은 모두 사용 가능하다. 화면에 안보이게 글이나 추가 정보를 엘리먼트에 담아 놓을 수 있다. 🚨화면에 보여야 하고 접근 가능해야 하는 정보 → 데이터 속성에 저장하지 말기 🚨검색 크롤러가 data 속성 값을 찾을 수 없음 ✔️HTML 문법 ... ✔️CSS에서 접근하기 [data-page="1"]{ width: 50%; } [data-page="1"]::after{ content: attr(data-parent) } 🚨 이런경우 css가 인식하지 못할 수도 있어요. ❓ html1과 html2의 차이점은 무엇일까요? data-page="pg_single" data-page="pg_.. 2023. 9. 21. ScrollMagic 활용 1 https://codepen.io/tinapark1111/pen/wvYxEyM ScrollMagic ... codepen.io 2023. 5. 16. swiper 활용 레이아웃 전환 효과 https://codepen.io/tinapark1111/pen/BaqrbWa swiper_painting ... codepen.io 2023. 5. 15. [WEB] POPUP [팝업] -특정 웹사이트가 어떠한 내용을 표시하기 위해 갑자기 생성되는 새 창 -역할 새로운 정보 제공, 알림, 트래픽 증가, 온라인 광고 -팝업 차단 기능 쓸데없는 메모리 소비를 줄이기 위해서 -방법 웹사이트를 열 때, 다른 웹사이트로 이동할 때, 웹 브라우저를 종료할 때 표시 활성화된 창 뒤에 숨어있기도 함 [레이어 팝업] 페이지 위에 layer를 쌓아 보여주는 창 공지사항 노출 위해 사용하는 경우가 많다. 모바일에서 자주 볼 수 있다. [모달 팝업] -modal window 자식 윈도에서 부모 윈도로 돌아가기 전에 사용자의 상호작용을 요구하는 창 -역할 사용자의 명령 인식, 긴급 상황 알림 -강제성 선택 하지 않는 경우 팝업에서 이탈하지 못하도록 하기도 함 -명확한 행동이 필요한 경우 사용하면 좋다.. 2021. 11. 16. [HTML] XHTML XHTML Extensible Hypertext Markup Language XML + HTML XML 기반으로 작성된 HTML HTML 단점 보완 XHTML DOCTYPE 반드시 명시 html, head, title, body 반드시 사용 모든 태그는 반드시 닫혀야한다. 종료 태그가 없는 태그는 공백과 함께 슬래시를 붙여야한다. 태그, 속성 이름 반드시 소문자, 반드시 속성값 명시 모든 텍스트는 반드시 태그로 감싸져야 한다. [참고] https://velog.io/@ryalya/Android-XHTML이란-문법-HTML차이-요소-리스트-정리 2021. 7. 16. [jQuery] audio Audio HTML javaScript selector = $('#effect'); adoPlay(selector); adoReset(selector); //효과음 실행 function adoPlay(sound){ adoReset(sound); sound[0].play(); } // 효과음 초기화 function adoReset(sound){ sound[0].pause(); if(sound[0]>0){ sound[0].currentTime = 0; } } // 오디오 재생 sound[0].play(); // 오디오 중지 sound[0].pause(); // 오디오 종료 이벤트 sound[0].on('ended', function(){ userFunction(); }) // 오디오 플레이 시간 sound[.. 2021. 3. 30. [JavaScript] 동치연산자 동치 연산자 Equlity Identity ==, != ===, !== abstract 추상적인, 느슨한 같음 비교 형변환 후 연산함 하나 또는 양쪽이 변환 할 수 있다 최종으로 === 수행 strict 엄격한 같음 비교 형변환을 하지 않고 연산한다 [참고] 동치연산자 차이점(블로그) MDN-동치 비교 및 동일성 2021. 3. 30. [JavaScript] Math Math Math 객체생성자가 존재하지 않는다. 따로 인스턴스 생성하지 않아도 Math 객체의 모든 메소드, 프로퍼티 사용 가능 수학에서 자주 사용하는 상수, 함수 미리 구현해 놓은 자바스크립트 표준 내장 객체 Math 메소드웹브라우저 마다 다른 결과값을 얻을 가능성 있음정확한 결과값 필요한 작업에는 사용하지 않는 것을 추천한다. 운영체제 다르면 다른 결과값을 반환할 수도 있다. 쉬운 수학적 작업을 위한 메소드 제공 종류 Math.min()인수 전달되지 않으면: Infinity 비교할 수 없는 값 포함: NaN 인수로 전달받은 값 중에 가장 작은 값 Math.max() 인수로 전달받은 값 중에서 가장 큰 수 Math.random() 0보다 크거나 같고 1보다 작은 무작위 숫자(random number)를.. 2021. 3. 23. [웹코딩_html_css_jQuery] project_그림퀴즈 이미지 로딩이 너무 길어서 html파일에 img태그로 이미지를 먼저 로딩하도록 했습니당. 이미지를 미리 로딩하고 캐시로 가져오게 하는 프리로딩을 구현하여 사용하는 방법도 있다고 합니다. 참고: mygumi.tistory.com/277 이미지 미리 불러오기(image preload) :: 마이구미 이 글은 이미지를 미리 로딩하는 법에 대해 다룬다. 흔히 이미지 프리로딩(Image Preloading) 이라고 불린다. 참고 - https://www.photo-mark.com/notes/image-preloading/ 웹 사이트에는 많은 이미지가 존재한다.. mygumi.tistory.com 이미지 로딩이 끝난 후 작동됩니당! 2021. 3. 15. 이전 1 2 3 다음
