HTML include

HTML, CSS 파일로만 작업된 페이지에서 include를 하는 방법 HTML에는 include 기능이 없지만 JavaScript AJAX를 이용하여 인클루드를 할 수 있다. HTML JS window.addEventListener('load', function() { var allElements = document.getElementsByTagName('*'); Array.prototype.forEach.call(allElements, function(el) { var includePath = el.dataset.includePath; if (includePath) { var xhttp = new XMLHttpRequest(); xhttp.onreadystatechange = function () {..

2022.05.03

div 팝업 시 body scroll 비활성화

div 팝업 시 body scroll 비활성화 $("html, body").css({"overflow":"hidden"}); // body scroll 비활성화 $("html, body").css({"overflow":""}); // body scroll 활성화

2022.01.03

웹접근성 skip navi

skip navi란? 사용자 편의 및 웹 접근성향상을 위한 skip navi를 body 최상단에 넣어준다. 마우스나 키보드를 사용하지 못해 tab키를 사용해야 하는 사용자에게 사이트 최상단에 바로가기를 만들어 줌으로써 원하는 영역에 바로 갈 수 있게 도와주는 기능을 한다. 사용예제 #skipNav{position:relative; width:100%; overflow:hidden;} #skipNav a{display:block; height:1px; margin-bottom:-1px; overflow:hidden; text-align:center;} #skipNav a:hover, #skipNav a:focus, #skipNav a:active{height:auto; padding:5px 0; backg..

2021.11.19

자바스크립트 개요

자바스크립트 웹 문서를 동적으로 제어하기 위해 고안된 프로그래밍 언어 * 웹 삼총사 - HTML : 모델 담당 - CSS : 뷰 담당 - Javascript : 제어 담당 자바스크립트의 역할 1. 요소의 추가 및 삭제 2. CSS 및 HTML 요소의 스타일 변경 3. 사용자와의 상호작용 4. 폼의 유효성 검증 5. 마우스와 키보드 이벤트에 대한 스크립트 실행 6. 웹 브라우저 제어 및 쿠키 등의 설정과 조회 7. AJAX 기술을 이용한 웹 서버와 통신 자바스크립트 작성 방법 01. 대소문자를 구분하여 작성 02. 문장은 세미콜론 (;) 으로 구분 // 바른 예 var age=25 document.write("당신의 나이는"+ age +"입니다.") var age=25; document.write("당신의..

2021.10.29

HTML Entity

엔티티 (Entity)란? HTML에는 미리 예약 된 몇몇 문자가 있으며, 이러한 문자를 HTML 예약어(reserved characters)라고 부릅니다. 이러한 HTML 예약어를 HTML코드에서 사용하면, 웹 브라우저는 그것을 평소와는 다른 의미로 해석합니다. 따라서 HTML 예약어를 기존에 사용하던 의미 그대로 사용하기 위해 별도로 만든 문자셋을 엔티티(Entity)라고 합니다. Entity Code HTML에서 제공하는 대표적인 엔티티(entity)는 다음과 같습니다. 기호 HTMl코드 CSS코드 설명 공백 space > 우측 화살표 & & ⓒ © \00A9 저작권 서명 @ @ \0040 *참고사이트 https://unicode-table.com/kr/html-entities/ HTM..

2021.10.06

HTML 기본 문법

HTML 기본 문법의 특징 1. 폴더와 파일명 : 영문(대/소) + 숫자 + _ + - (시작 문자는 꼭 영문이어야 함 ex. sample_1.html) 2. html/css/javascript 영문 대소문자를 구분한다. 3. html : 무조건 영문 소문자로 마크업한다. 4. 대다수의 태그들은 열고 닫는 세트로 되어있다. (태그의 계층, DOM, 부모/자식의 관계) 5. 태그들은 계층 (부모/자식)을 표현할 수 있다. (Tab) 6. 모든 웹문서(파일명.html)는 하나의 을 최상위부모로 가진다. 주언어 정의 7. : 화면에 보여지는 부분 이외의 것을 명시(코드명시/CSS 또는 js파일을 연결) 8. : 웹페이지의 본문을 처리하는 태그(화면 UI 구현) 9. 사이트제목 10. : 본문의 코드를 처리하기..

2021.10.05