WAI-ARIA, 웹 표준과 웹 접근성에 대하여 위로 가는 버튼을 구현하려다 웹표준과 접근성에 대해 공부하게 되었다 발단은 2013년에 올라온 이 글 "원래 HTML 코딩할 때 주던 방식은 맨 위로 간단히 이렇게 했었다. 그러나, 저렇게 써 주면 접근성 오류는 물론이고 웹표준 프로그램 돌리면 링크 오류 뜬다. 태그에 #기호를 쓰기 때문에 웹표준 오류!" 와 은 기본 동작과 기능 뿐 아니라 키보드 인터랙션도 다르므로 키보드 사용자와 스크린리더 사용자에게 혼동을 가져온다. 링크와 버튼은 다른 요소로 마크업을 해야 하고, 같은 기능은 동일한 요소로 시맨틱하게 마크업해야 한다. 버튼은 사용자가 양식을 제출해야 하거나, 팝업을 열거나, 동작을 실행 또는 취소 등 이벤트를 트리거할 때 사용하는 위젯으로 엔터키와 스..
const player = { name: "enerG", points: 10, fat: true, }; console.log(player.name); // 1번째 방식 console.log(player["name"]); // 2번째 방식 Object에 존재하는 항목 추가 및 업데이트가 가능하다.
Function function sayHello() { console("Hey enerG! Cheer Up!"); // 이 안에 있는 요소를 반복해서 실행할 수 있다. } sayHello(); function에 data 보내기 function sayCheerUp(cheerName) { console.log("Hey " + cheerName + "! Cheer Up!"); } sayCheerUp("enerG"); // Hey enerG! Cheer Up! console.log(cheerName); // Undefined Place holder function plus(a, b) { console.log(a + b); } plus(8, 10); // 18 (a=8, b=10) function divide(f..
JavaScrispt에서 작업할 대부분의 일은, event를 listen하는 것이다. Event Basic element를 찾아라. event를 listen하라. event 발생 시 반응하라. event란? 예를 들어 click, mouse over, 입력을 끝냄, 내 이름을 적고 enter를 누름, wifi에서 접속이 해제됨 등 listen하고 싶은 event 찾는 방법 찾고싶은 element의 이름을 Web APIs MDN(Mozilla Developer Network)에 검색 JS 관점의 HTMLHeadingElement라는 의미 ex. h1 html element mdn console.dir로 입력해보기 : element의 내부를 보고싶을 때 사용 가능한 event들을 알려준다. 앞에 on이 붙은..
if (true) { //body } else { //else body } ()안의 조건이 true면 body를 실행한다. false라면 else body를 실행한다. operater && : and || : or === : equal (유형 및 값까지 전부 같다) = : a = b는 하나의 value를 할당한다는 뜻이다. == : 서로 다른 유형의 두 변수의 값을 비교할 수 있다 !== : not equal (유형 및 값까지 전부 다르다) != : == 처럼 유형이 달라도 비교할 수 있다. example const age = parseInt(prompt("how old are you?")); if (isNaN(age) || age < 0) { console.log("Please enter a real ..
검색해본 결과 hex값은 안된다고 해서 우선 hex값을 전부 rgb 값으로 변환했다. 그러나.. 실패한 방법 :root { --bg-color: rgba(240, 240, 240); --bg-color-header: rgba(240, 240, 240, 0.8); } .notion-header { background-color: rgba(var(--bg-color), 0.8); } 위의 방법으로는 작동하지 않았다. 성공한 방법 :root { --bg-color: rgba(240, 240, 240); --bg-color-header: rgba(240, 240, 240, 0.8); } .notion-header { background-color: var(--bg-color-header); } 즉 오퍼시티까지 ..
DIV 영역 자체에 링크 거는 방법 DIV 영역을 클릭 시, 지정된 주소(URL)로 이동한다. onclick="location.href='이동할 링크주소 입력'" 이렇게 하는 경우에는 ctrl 키를 누른 상태로 클릭해도 새 탭으로 열리지 않는다는 점에 주의. 기본적으로 새 창에서 열기 onclick="window.open('이동할 링크 주소 입력')" 마우스 커서 모양 바꾸기 div 영역 부분에 마우스 커서를 올리면 손가락 표시로 바꾸게 하려면 style에 cursor : pointer 를 추가해야 한다. HTML 삽입 미리보기할 수 없는 소스 https://hajoung56.tistory.com/53 HTML 삽입 미리보기할 수 없는 소스
Shadow 빛 방향 통일. 수평에 비해 수직이 2배가 되도록 설정하기. 항상 같은 비율로. 그림 그릴 때의 기본 이론과 동일. 겹겹이 쌓는 게 더 자연스럽다 .traditional.box { box-shadow: 0 6px 6px hsl(0deg 0% 0% / 0.3); } 위의 예제보다 아래의 예제가 훨씬 결과값이 자연스럽다. 단, 오래된 디바이스에서는 렌더링이 느려지는 문제가 생길 수 있으므로 테스트 필수. .layered.box { box-shadow: 0 1px 1px hsl(0deg 0% 0% / 0.075), 0 2px 2px hsl(0deg 0% 0% / 0.075), 0 4px 4px hsl(0deg 0% 0% / 0.075), 0 8px 8px hsl(0deg 0% 0% / 0.075)..
getElementById getElementById : Id를 가져올 수 있다. document.getElementById("id"); getElementsByClassName : array로 가져다준다 getElementsByName : array로 가져다준다 querySelector querySelector css selector를 명시해줘야한다. id를 가져오는 경우에는 ("#id") 라고 입력한다. 단 하나의 element만 return 해준다. querySelectorAll 여러 element를 array로 가져오는 방법. document.querySelector(“.hello h1:first-child”) document.getElementsByClassName(”hello”)
