밀 종합 ٩(`╹ω╹´)و

문법 array.splice(start[, deleteCount[, item1[, item2[, ...]]]]) [start] - 배열의 변경을 시작할 인덱스이다. - 배열의 길이보다 큰 값이라면 실제 시작 인덱스는 배열의 길이로 설정된다. - 음수인 경우 배열의 끝에서부터 요소를 세어나간다. [deleteCount] - 배열에서 제거할 요소의 수 - 값을 생략하거나 배열의 갯수보다 많거나 같으면 모든 요소를 제거한다. - deleteCount가 0 이하라면 어떤 요소도 제거하지 않는다. 이 때는 최소한 하나의 새로운 요소를 지정해야 합니다. [item1, item2, ...] - 배열에 추가할 요소 - 아무 요소도 지정하지 않으면 splice()는 요소를 제거하기만 한다. [반환 값] - 제거한 요소를..

className 속성 무언가를 대입하면 클래스 문자열 전체가 바뀐다. classList 메서드 add: class 추가 remove: class 제거 toggle: class가 존재할 경우 class를 제거하고, 그렇지 않으면 추가 contains: class 존재 여부에 따라 true / fasle를 반환 *메서드의 값은 "문자열"이다. * node.contains와 classList.contains는 다르다. 예제 div.className = 'test'; //className은 개별로 수정이 안됨. div.className = 'page menu'; div.classList.add('add'); div.classList.remove('add'); div.classList.toggle('toggle..

설명 this 핸들러가 실제 할당된 요소 event.currentTarget 핸들러가 실제 할당된 요소 event.target 이벤트가 실행된 대상 * this와 event.currentTarget은 같다. [예제] codepen.io/millfeel/pen/LYZNJPE [공부 좌표] 인터랙티브 웹 개발 제대로 시작하기 - 자바스크립트 이벤트 다루기 - this와 이벤트 객체 버블링, 캡처링

속성 설명 버블링(bubbling) - 기본값 - 이벤트가 발생하면, 가장 최상단의 조상 요소를 만날 때까지 요소 각각에 할당된 핸들러가 동작한다. (안쪽 => 바깥쪽) 캡처링(capturing) - 버블링의 반대되는 개념 (바깥쪽 => 안쪽) // 버블링 elem.addEventListener('이벤트타입', handler) //false가 기본값이다. // 캡처링 elem.addEventListener('이벤트타입', handler, true) 캡처링 # 03:13 이벤트 1개 호출 document.getElementById('target').addEventListener('click', handler, true); # 03:42 이벤트 2개 호출 document.getElementById('targ..

landmark란? 구역을 나타내는 요소(=시멘틱 태그)들을 landmark라고 한다. role role이라는 속성으로 landmark를 정의한다. role 속성 중에 role 값으로 landmark가 존재하기 때문이다. (그러므로 role을 사용한다고 무조건 landmark가 되는 것은 아님) role은 어떤 곳에 사용하느냐에 따라 aria속성이 추가 될 수 있으므로 MDN role를 보고 참고해서 사용하도록 하자. [주의] 내비게이션 내비게이션 혼용해서 사용해서는 안된다. 구역을 나타내는 요소를 사용할 수 있으면 사용하는게 좋다. [공부 좌표] WAI-ARIA Roles

See the Pen [인터랙션 CSS] 햄버거 메뉴 만들기 by mill (@millfeel) on CodePen. 접근성 이슈 tab 사용시 포커스 되지 않는 이슈를 해결하기 위해서 "tabindex"를 사용해야 하고, role과 aria-label을 선언하여 해당 ‘div’ 영역에 대한 설명을 제공해야한다. label의 기본 속성은 포커스가 되지 않는다. input[id='menuicon'] {display: none;} input[id='menuicon'] + label { position: relative; display: block; width: 60px; height: 40px; cursor: pointer; /* 포인터가 label에 설정돼 있다. */ background-color: #d..

font 축약 CSS 속성 font-family (필수) font-size (필수) font-stretch (선택) font-style (선택) font-variant (선택) font-weight (선택) line-height (선택) 사용 방법 body { font: 1.6rem/1.5 '맑은 고딕', 'malgun gothic', sans-serif; } - 속성은 띄어쓰기로 구분한다. - line-height는 font-size 바로 다음에 와야하고, "/"로 구분해야한다. (ex. 16px/3) - font-family는 마지막 값이어야한다. [공부 좌표] MDN [참고] font-family Q. font-family 기본 폰트는 어떤 것을 설정해야 할까? Q. line-height는 어떤 단..

용도 font-family속성은 가장 높은 우선 순위에서 가장 낮은 우선 순위까지 ​​글꼴 목록을 지정한다. (앞에서 => 뒤로) 기본 설정 사용한 폰트 스타일에 맞게 sans-serif, serif는 반드시 기본적으로 사용해줘야 한다. font-family: sans-serif; (고딕) font-family: serif; (명조) *sans는 없다라는 뜻을 가지고 있다. 즉, 명조의 꼬리 부분이 없기 때문에 고딕이다. Q. 한글 폰트만 작성하면 안되나요? font-family: 돋움, sans-serif (X) 비한국어 Windows (최소한 9x/ME)에서는 MS IE조차도 ‘돋음’을 인식하지 못하기 때문이다. 그래서 한글로 된 폰트명은 영문으로 된 폰트명과 함께 사용해 줘야 한다. font-fam..

OS별 시스템 폰트 Windows XP : 굴림 Windows Vista, 7, 8, 10 : 맑은 고딕 OS X 라이언 (10.8) : 애플 고딕 OS X 마운틴 라이언 (10.9) : 애플 산돌 고딕 네오 Ubuntu : 나눔고딕 Android 4.4 이전 - Droid Sans fallback (고딕) Android 4.4 이후 - 나눔고딕 iOS 5.x 이하 - 애플 고딕 iOS 6.x - 애플 산돌 고딕 네오 (일반체와 볼드체) iOS 7.x - 애플 산돌 고딕 네오 (100 ~ 900) 윈도우 폰 - 마이크로소프트 네오 고딕 Q. 어떤 폰트를 사용하면 좋을까? - 아래를 읽고, 상황에 맞게 사용한다. Window - 맑은 고딕 - 다국어 윈도우 지원을 위해서 "malgun gothic" 영문 ..

속성 속성 설명 font-family 사용할 웹 폰트의 이름을 지정한다. 이 이름은 폰트 파일의 이름과 일치하지 않아도 상관없다. 하지만 비슷하게 설정하는 것이 유지 보수에 좋다. src url에 폰트 파일의 경로를 설정하고,format에 폰트 파일의 형식을 설정한다. font-style normal / italic 설정 font-weight 보통 100~400 가는 굵기, 500~600 중간 굵기, 700~900 두꺼운 굵기로 표시된다. "normal = 400"으로 중간 굵기, "bold = 700"으로 두꺼운 굵기로 표시한다. 함수 함수 설명 local() 서버에서 다운을 받지 않고, 사용자의 컴퓨터에 "NanumBarunGothic"이 있으면, 컴퓨터에 있는 폰트를 사용하라는 것 format() ..