웹 코딩/HTML, CSS, JS9 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. [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] 문서 렌더링 XHTML EXtensivle HTML HTML과 거의 비슷하지만 문법의 적용이 더 엄격하다 XML 문서로 문법적으로 정확하다 표준 XML 라이브러리를 이용한 자동화된 처리가 가능해진다. 구조적 측면태그의 xmlns 속성을 반드시 명시 , , , 태그를 반드시 사용 XHTML DOCTYPE을 반드시 명시 요소적 측면모든 캐그는 순서대로 닫혀야 한다XHTML 문서는 반드시 하나의 root요소를 포함해야 한다 모든 요소는 반드시 소문자로 사용되어야 한다 모든 태그는 반드시 닫혀야 한다 속성적 측면속성값은 반드시 따옴표로 감싼다 반드시 속성값을 명시해야 한다 속성 이름은 반드시 소문자로 사용되어야 한다 HTML과 XHTML 차이점 종료 태그가 없는 빈 태그는 반드시 공백과 슬래시 붙여야함 → 비어있지 않은 요.. 2021. 3. 10. [WEB] 캐싱 캐시 일시적으로 데이터 하위 집합을 저장하는 고속 데이터 스토리지 계층 해당 데이터에 대한 요청이 있을 경우 데이터의 기본 스토리지 위치에 액세스 할 때 빠르게 요청 처리 가능 더 느린 기본 스토리지 계층에 액세스해야 하는 필요를 줄인다. 데이터 검색 성능을 높인다. 이전에 검색하거나 계산한 데이터 효율적으로 재사용 가능 RAM과 같이 빠르게 액세스 할 수 있는 HW에 저장 SW구성요소와 함께 사용될 수도 있다. RAM 및 인 메모리 엔진 높은 요청 비율 또는 IOPS(성능 측정 단위, 일기 처리량) 덕분에 캐싱 사용 → 대규모 데이터 성능 향상, 비용 절감 적용 캐시는 다양한 기술 계층에 걸쳐 적용, 활용 가능 집약적인 여러 애플리케이션 워크로드의 지연 시간을 크게 줄이고 IOPS 개선 가능 캐싱되는 .. 2021. 3. 4. [웹코딩_html_css_jQuery] project_드래그드롭 업무 중 드래그 드랍을 사용할 일이 있었서 공부를 한 번 해봤습니다! 코드에 주석으로 설명 붙여놨으니 필요하신 분은 참고 하세용!! http://jsfiddle.net/tinapark/8jnztec7 드래그앤드롭 - JSFiddle - Code Playground jsfiddle.net https://github.com/pTina/self_test/blob/main/drag_drop.html pTina/self_test Contribute to pTina/self_test development by creating an account on GitHub. github.com 2020. 10. 21. 이전 1 다음
