본문 바로가기
반응형

dev218

[javascript] HTML 웹 접근성 (Accessibility) 참고: https://www.codecademy.com/article/accessibility-and-html 시각 장애가 있는 대부분의 사용자는 screen reader를 사용하여 인터넷을 사용합니다. 이 포스트에서는 시각 장애가 있는 사용자가 콘텐츠에 접근할 수 있도록 하는 다양한 방법에 대해 알아보겠습니다. 들어가며 웹 페이지는 모든 사용자가 접근할 수 있도록 디자인해야 합니다. 특히, 웹 페이지의 시각적/동적인 특성이 시각 장애가 있는 사용자에게도 의미가 있는지 확인해야합니다. 대부분의 시각 장애인 또는 맹인 사용자는 screen reader의 도움으로 웹 페이지에 접근합니다. 스크린 리더는 웹 페이지의 HTML을 분석하여 콘텐츠를 큰 소리로 읽어주고 사용자의 명령에 따라 페이지를 탐색하고 링크 .. 2023. 5. 11.
[javascript] 자바스크립트 getBoundingClientRect (size, position) 참고: https://www.golinuxcloud.com/javascript-getboundingclientrect/ JavaScript의 getBoundingClientRect() 메소드는 웹페이지 요소의 위치와 크기를 알아내고자 할 때 사용합니다. 이는 뷰포트(웹 페이지의 보이는 부분)에서 요소의 위치와 크기를 가져옵니다. 리턴 값으로 다음과 같은 속성을 반환합니다. left: 뷰포트의 왼쪽에서 요소의 왼쪽 부분까지의 거리 top: 뷰포트의 위쪽에서 요소의 위쪽 까지의 거리 right: 뷰포트의 오른쪽와 요소의 오른쪽 사이 거리 bottom: 뷰포트의 아래쪽과 요소의 아래쪽 거리 width: pixel 단위의 요소의 가로 크기 height: pixel 단위 요소의 세로 크기 This is some .. 2023. 5. 10.
[javascript] 자바스크립트 요소 삽입 insertBefore 참고: https://www.golinuxcloud.com/insertbefore-javascript/ insertBefore() 라는 DOM 메소드가 있습니다. 이를 사용하면 기존 요소 앞에 새로운 요소를 삽입할 수 있고 올바르게 사용하기 위해서는 다음 세가지를 지정해야합니다. 삽입하고자 하는 새로운 요소 위치를 지정해 줄 기존 요소 두 요소의 부모 요소 JavaScript insertBefore() 문법 다음은 문법입니다: parentElement.insertBefore(newElement,targetElement) 새 요소 삽입 시 부모 요소가 뭔지 모를 때도 있지만 몰라도 괜찮습니다. 왜냐하면 타겟 요소의 parentNode 속성을 사용하면 되기 때문입니다. 모든 요소 노드의 부모는 반드시 다른 .. 2023. 5. 9.
[javascript] 자바스크립트 배열 정렬 (array sort) 참고: https://www.javascripttutorial.net/javascript-array-sort/ 이 포스트에서는 JavaScript Array의 sort() 메소드로 숫자의 배열, 문자열의 배열, 객체의 배열을 정렬하는 방법을 알아보겠습니다. JavaScript Array sort() 메소드 sort() 메소드를 사용하면 배열의 요소를 알맞은 자리에 정렬할 수 있습니다. sort() 메소드는 정렬된 배열을 리턴하기도 하지만 원본 배열의 요소 위치도 변경합니다. sort() 메소드는 기본적으로 작은 값 부터 큰 값 까지 오름차순으로 정렬하고 이 때 요소를 문자열로 캐스팅여 문자열 비교를 통해 순서를 결정합니다. 다음의 예제를 확인해 보겠습니다: let numbers = [0, 1, 2, 3,.. 2023. 5. 4.
[javascript] 자바스크립트 랜덤으로 배열 섞기 (shuffle array) 참고: https://sabe.io/blog/javascript-shuffle-array 대부분의 상황에서 배열의 순서는 중요하게 여겨지며 배열이 그렇게 나열된 데는 각자 이유가 있습니다. 하지만 어떤 경우에는 배열의 요소를 무작위로 섞어 새 위치에 나열하도록 해야할 때가 있습니다. 이 포스트에서는 JavaScript로 배열의 요소를 쉽게 섞는 방법을 알아보겠습니다. JavaScript로 배열을 섞는 방법 배열을 섞는 가장 쉬운 방법은 sort() 메소드를 사용하는 것 입니다. sort() 메소드는 콜백 함수를 매개변수로 받습니다. 이 콜백 함수는 비교할 두 개의 요소를 매개변수로 사용하고 이 콜백 함수의 결과로 순서를 결정할 수 있도록 합니다. 이 콜백 함수의 리턴 값이 음수면 첫 번째 요소가 두 번째.. 2023. 5. 3.
[javascript] 자바스크립트 카운드다운 타이머 (countdown timer) 참고: https://dev.to/code_mystery/simple-countdown-timer-using-javascript-1jab JavaScript 카운트 다운 타이머는 사이트를 최신 상태로 유지 하기 위해 다양한 전자상거래 사이트에서 사용되고 있습니다. 우리는 다양한 유형의 전자 상거래 사이트에서 제품이나 제안이 도착하기 전 일종의 카운드다운이 시작되는 것을 볼 수 있습니다. 이 포스트에서는 간단한 JavaScript 코드를 사용하여 카운트다운 타이머를 만들어보겠습니다. TL;DR 전체 소스코드와 데모는 codepen에서 확인할 수 있습니다. See the Pen countdown timer by shinyks (@shinyks) on CodePen. 디지털 시계를 만드는 방법을 알고있다면 이.. 2023. 5. 3.
[javascript] CSS responsive grid (flexbox) 참고: https://medium.com/@mignunez/how-to-create-a-responsive-image-grid-gallery-with-html-css-flexbox-1a4ea78f1ab3 이 포스트에서는 반응형 이미지 그리드를 만드는 방법을 알아보겠습니다. 개괄적인 아이디어는 내부에 세 개의 열이 있는 하나의 컨테이너를 만드는 것 입니다. 각 열에는 자체 이미지 세트를 넣습니다. 열 내부의 이미지 정렬은 flexbox로 합니다. 아래서 보다시피 이미지는 마법 처럼 정렬되는 것이 아니라 전략적으로 그렇게 보이도록 만들어진 것 입니다. TL;DR 모든 코드와 데모는 codepen에서 확인할 수 있습니다. See the Pen image gallery by shinyks (@shinyks) o.. 2023. 5. 2.
[javascript] 자바스크립트 타자기 효과로 글쓰기 참고: https://medium.com/@mignunez/how-to-easily-create-a-typewriter-effect-with-javascript-1e1d9ca05b59 TL;DR 전체 코드와 데모를 다음 codepen에서 확인할 수 있습니다. See the Pen typewriter by shinyks (@shinyks) on CodePen. HTML 타자기 효과를 내기 위해 필요한 것은 메시지를 표시할 요소만 있으면 됩니다. CSS 먼저 문장의 마지막에 보일 깜빡이 효과를 만듭니다. 필수는 아니지만 타자기 효과를 더욱 사실적으로 보이게 해주기 때문에 적극 권장합니다. 깜빡이는 0.5 초 마다 opacity를 0으로 설정하는 애니메이션을 사용합니다. span{ animation: blin.. 2023. 5. 2.
[javascript] 자바스크립트 섭씨를 화씨로 변환 참고: https://medium.com/@DylanAttal/convert-celsius-to-fahrenheit-in-javascript-b6b76b47c4f0 온도를 섭씨에서 화씨로 변환하는 것은 흔히 하는 계산입니다. 이는 알고리즘을 공부할 때 시작하기 좋은 예제입니다. 왜냐하면 섭씨에서 화씨로 변환하는 것은 매우 명확한 단계가 있기 때문입니다. 알고리즘 섭씨에서 화씨로 변환하는 알고리즘은 섭씨에 9/5를 곱하고 32를 더하는 것 입니다. 구체적으로 섭씨를 나타내는 celsius 변수가 주어지고 이 변수를 이용해 fahrenheit 변수에 섭씨에 해당하는 화씨를 할당합니다. 위에서 언급한 알고리즘을 사용하여 섭씨 온도를 화씨 온도로 변환하면 됩니다. 함수와 리턴 값에 대해서는 향후 다룰 것 이므로.. 2023. 5. 2.
[javascript] 자바스크립트 querySelector vs getElementById 참고: https://careerkarma.com/blog/javascript-queryselector-vs-getelementbyid/ querySelector나 getElementById 메소드를 사용하면 둘 다 JavaScript Document Object Model (DOM)에서 요소를 검색할 수 있습니다. 그렇지만 각각의 메소드에는 고유한 사용 방법이 따로 있습니다. 이 포스트에서는 querySelector 및 getElementById의 일반적인 사용 사례를 알아보겠습니다. 또한 이 두가지 방법을 비교하고 각각의 작동 방식에 대한 예시를 알아보겠습니다. querySelector 란? JavaScript querySelector() 메소드를 사용하면 CSS 선택자를 사용하여 DOM 또는 웹 페.. 2023. 5. 2.
[javascript] 자바스크립트 다운로드 링크 만들기 참고: https://levelup.gitconnected.com/how-to-download-with-javascript-1777ec0457eb JavaScript에서 파일을 다운로드하는 방법은 여러가지가 있습니다. 이는 단일 파일을 다운로드하거나 여러 파일을 일괄 다운로드할 수 있습니다. 이 포스트에서는 이 두가지 방법을 모두 알아보겠습니다. 다운로드 링크 만들기에는 두 가지 방법이 있습니다: 단일 파일 다운로드 하기 여러 파일 다운로드 하기 단일 파일 다운로드 링크 만들기 현재 이미지가 있고 이 이미지를 다운로드 할 수 있도록 링크를 제공하고 싶다고 가정해 보겠습니다. 이 예시를 위해 링크로 만들 이미지를 만들겠습니다. 이는 오직 예시를 위한 것이며 실제로는 필요 없을 수도 있습니다. functio.. 2023. 5. 1.
[javascript] 자바스크립트 툴팁 (tooltip) 참고: https://stackdiary.com/hover-tooltip-javascript/ 이 포스트에서는 JavaScript의 addEventListener 메소드를 활용해 선택한 요소에 대한 툴팁(hover effect)을 만드는 방법을 알아보겠습니다. 이는 attr() 속성을 사용하여 CSS로도 만들 수 있습니다. .addEventListener()는 다양한 DOM 이벤트를 모니터링한 다음 해당 이벤트 타입에 따라 작업을 수행합니다. 이 글에서는 mouseover 및 mouseleave 이벤트에 중점을 두겠습니다. 다음은 결과물 확인을 위한 codepen 입니다. See the Pen tooltip by shinyks (@shinyks) on CodePen. 코드는 상당히 간단합니다. getEl.. 2023. 4. 26.
[javascript] 자바스크립트 로딩 버튼 만들기 참고: https://dev.to/dcodeyt/create-a-button-with-a-loading-spinner-in-html-css-1c0h 이 포스트에서는 HTML과 CSS를 사용하여 클릭했을 때 로딩 이미지가 나타나는 버튼을 만들어보겠습니다. 소스코드 & 미리보기 전체 소스코드를 미리 보려면 다음 codepen에서 확인할 수 있습니다. See the Pen loading button by shinyks (@shinyks) on CodePen. HTML 버튼에 대한 HTML 작성부터 시작하겠습니다. 이는 매우 간단합니다. 먼저 클래스가 button인 요소를 만들고 그 안에 넣을 텍스트로 을 사용합니다. Save Changes 이게 HTML의 전부입니다. 이제 다음의 CSS로 넘어가겠습니다. CS.. 2023. 4. 26.
[javascript] 자바스크립트 scroll to top 버튼 만들기 참고: https://w3collective.com/scroll-to-top-button-javascript/ 이 포스트에서는 JavaScript를 사용하여 화면을 맨 위로 스크롤하는 버튼을 만들어 보겠습니다. 이 버튼을 사용하면 사용자가 아래로 스크롤 했다가 빠르게 페이지 상단으로 돌아갈 수 있으므로 콘텐츠 페이지가 긴 모바일 페이지를 만들 때 특히 유용합니다. 먼저 JavaScript 코드를 실행할 scrollTop 함수를 생성하겠습니다. const scrollTop = function () { // JavaScript 코드 위치 }; scrollTop(); 다음으로 scrollTop 함수 안에서 HTML 버튼을 생성하겠습니다. const scrollTop = function () { const sc.. 2023. 4. 25.
[javascript] 자바스크립트 SHA-256 해시 생성하기 참고: https://www.debugpointer.com/javascript/create-sha256-hash-in-javascript 암호화 및 해싱은 네트워크 보안 모듈의 기반 역할을 했습니다. 가장 많이 사용되는 해시 알고리즘은 다이제스트 크기가 256비트인 SHA(Secure Hash Algorithm) 또는 SHA 256 입니다. 다양한 변형이 있지만 SHA 256이 실제 응용 프로그램에서 가장 많이 사용되었습니다. SHA-256은 SHA 2 알고리즘 제품군의 일부이며 SHA는 Secure Hash Algorithm을 나타냅니다. 이는 보다 쉽게 크랙되는 SHA 1 제품군의 후속으로 도입하기위해 NAS와 NIST의 공동 노력이 있었습니다. SHA 2는 2001년에 발표되었으며 그 이후로 계속 .. 2023. 4. 25.
[javascript] 자바스크립트 MD5 해시 생성하기 참고: https://ourcodeworld.com/articles/read/1547/how-to-create-md5-hashes-in-javascript 이 포스트에서는 JavaScript로 MD5 해시를 쉽게 만드는 방법을 알아보겠습니다. MD5는 원래 디지털 서명 인증을 위한 보안 암호화 해시 알고리즘으로 쓰기위해 설계되었습니다. 하지만 데이터 무결성 확인, 의도치 않은 데이터 손상 감지 체크섬 이외의 다른 용도로 사용하는 것을 권장하지 않습니다. 즉 파일의 무결성 입증에 이 알고리즘을 사용하는게 일반적입니다. JavaScript에는 암호화 유틸리티가 없지만 외부 라이브러리를 사용하여 동일한 기능을 구현할 수 있습니다. 이 경우 오픈소스에 @blueimp가 작성한 MD5 라이브러리를 Github에서.. 2023. 4. 24.
[javascript] 자바스크립트 getElementById 사용방법 참고: https://www.tutorialspoint.com/how-getelementbyid-works-in-javascript 이 포스트에서는 JavaScript의 getElementById() 메소드가 어떻게 동작하는지에 대해 알아보겠습니다. JavaScript의 getElementById() 메소드는 document의 메소드 입니다. 이는 HTML 요소의 ID에 해당하는 특정 문자열을 전달하면 요소 객체를 반환합니다. 모든 HTML 요소에는 고유한 ID를 할당할 수 있습니다. 두 개 이상의 요소가 동일한 ID를 갖는 경우 getElementById() 메소드는 첫 번째 요소를 반환합니다. 또한 이는 document 내에서 HTML 요소를 조작하는데 도움을 줍니다. 만일 ID에 매치되는 요소가 없.. 2023. 4. 24.
[javascript] 에러 제어 (try, catch, throw) 참고: https://www.javatpoint.com/javascript-try-catch try...catch 일반적으로 try...catch 구문은 다양한 프로그래밍 언어에서 사용되고 있습니다. 기본적으로 오류가 발생하기 쉬운 코드의 처리를 위해 사용합니다. 할 수 있는 모든 가능한 오류를 처리 했음에도 또 다른 오류가 발생할지도 모를 때에 사용하기 좋은 구문입니다. 좋은 프로그래밍 접근 방식은 복잡한 코드를 try...catch 구문 안에 유지하는 것 입니다. 이제 각각의 구문에 대해 알아보겠습니다: try{} 구문: 여기에 오류 테스트가 필요한 코드를 넣습니다. 오류가 발생하면 적절한 조치를 취하기위해 catch{} 블록으로 실행이 전달됩니다. 오류가 발생하지 않으면 try{} 구문의 코드만 실.. 2023. 4. 18.
[javascript] 반복문 루프 (while, for, for...of, for...in, loop) 참고: https://www.codecademy.com/resources/docs/javascript/loops 루프는 연속적으로 명령을 반복하게 하는 프로그래밍 툴입니다. iterate라는 용어는 일반적으로 "반복하다"를 의미합니다. 일반적으로 stop condition이라고 하는 지정된 조건이 충족될 때까지 루프는 계속 반복됩니다. while loop while 루프는 지정된 조건이 true면 실행되는 루프를 만듭니다. 루프는 조건이 거짓이 될 때까지 계속 실행됩니다. 조건은 루프 전에 지정되며 일반적으로 루프를 중지해야할 타이밍을 결정하기 위해 while 루프 본문에서 변수를 증가시키거나 변경합니다. while (condition) { // Code block to be executed } 예제 코.. 2023. 4. 18.
[javascript] 자바스크립트 로그인 페이지 만들기 (login) 참고: https://medium.com/swlh/how-to-create-your-first-login-page-with-html-css-and-javascript-602dd71144f1 이 포스트에서는 HTML, CSS, JavaScript를 사용하여 로그인 페이지를 만드는 방법을 알아보겠습니다. 스크립트를 작성하기 전에 먼저 무엇을 만들 것인지 보겠습니다: 보다시피 페이지에는 제목, 로그인 form(사용자 이름 및 비밀번호용), 입력 값을 제출하는 로그인 버튼이 있습니다. 이 예제에서는 사용자 이름이나 암호 확인을 위해 서버로 전송하지 않고, 대신 JavaScript를 사용하여 사용자 이름이 "user"이고 암호가 "web_dev"인지 확인합니다. 만일 이름과 암호가 일치하면 얼럿박스를 표시하고 페.. 2023. 4. 16.
반응형

티스토리툴바