FrontEnd/HTML5 & CSS & JavaScript28 웹 접근성과 시맨틱 마크업 시맨틱 마크업 시맨틱(Semantic)이란 "의미론적인"의 뜻을 가지며 마크업(Markup)이란 HTML 태그로 문서를 작성하는 것을 말한다. 따라서, 시맨틱 마크업이란 의미를 잘 전달하도록 문서를 작성하는 것을 말한다. 작성 방법 시멘틱 마크업을 하기 위해선 각 태그를 그 용도에 맞게 사용하여야 한다. 즉, 다음과 같은 것들을 말한다. 헤더/푸터에 와 사용 메인 컨텐츠에 과 사용 독립적인 컨텐츠에 사용 최상위 제목으로 사용 순서가 없는 목록으로 과 사용 내비게이션에 사용 이런 식의 태그가 가지고 있는 의미에 맞게 사용하는 것인데, 이런 점 이외에도 CSS 스타일을 명시하는 태그를 사용하지 않는 것 또한 시맨틱 마크업의 한 종류이다. 즉, 태그가 가지는 의미 자체가 스타일이라면 이는 마크업 자체가 스타일.. 2022. 1. 17. [JavaScript] 자바스크립트 비동기 처리 비동기 프로그래밍의 개념 비동기적 일반적으로 주어진 프로그램의 코드는 한 번에 한 가지만 발생하면서 곧바로 실행된다. 함수가 다른 함수의 결과에 의존하는 경우 다른 함수가 완료되고 반환될 때까지 기다려야하므로, 전체 프로그램이 중지된다. (동기적) Blocking Code 비동기 기술은 특히 웹 프로그래밍에서 매우 유용하다. 웹 앱이 브라우저에서 실행되고 브라우저에서 제어를 반환하지 않고 큰 크기의 코드를 실행하면 브라우저가 정지된 것처럼 보일 수 있다. 이것을 Blocking이라고 한다. 브라우저는 웹 앱이 프로세서의 제어를 반환할 때까지 계속해서 사용자 입력을 처리하고 다른 작업을 수행하지 못하도록 차단된다. 스레드 스레드는 기본적으로 프로그램이 작업을 완료하는데 사용할 수 있는 하나의 과정으로, 각.. 2022. 1. 5. [JavaScript] 이벤트 버블링과 캡처링, 그리고 이벤트 위임 버블링(Bubbling) 한 요소에 이벤트가 발생하면, 이 요소에 할당된 핸들러가 동작하고, 이어서 부모 요소의 핸들러가 동작한다. 가장 최상단의 조상 요소를 만날 때까지 이 과정이 반복되면서 요소 각각에 할당된 핸들러가 동작한다. FORM DIV P 가장 안쪽의 를 클릭하면 p -> div -> form 순서로 alert창이 뜬다. 이런 흐름을 "이벤트 버블링"이라고 부른다. 이벤트가 제일 깊은 곳에 있는 요소에서 시작해 부모 요소를 거슬러 올라가며 발생하는 모양이 마치 물속 거품(bubble)과 닮았기 때문이다. 거의 모든 이벤트는 버블링된다. focus 이벤트와 같이 버블링 되지 않는 이벤트도 있다. 버블링 되지 않는 이벤트의 종류에 대해서는 아래에서 설명한다. 몇몇 이벤트를 제외하곤 대부분의 이벤.. 2022. 1. 4. [JavaScript] 4가지의 바인딩과 화살표 함수 JavaScript에서의 this JavaScript에서 this는 자기 자신을 가리키지 않는다. JavaScript에서 함수는 모두 객체이기 때문에 내장된 프로퍼티, 메서드를 가질 수 있다. 따라서 특정 상태값을 유지/접근하기 위해 함수 내부에서 this를 사용할 것이다. 이러한 방법도 가능하지만, this를 이해하지 못하고 사용하면 잘못된 결과를 얻을 수 있다. 아래 예시를 참고하자. function foo(num) { console.log("foo: " + num); this.count++; } foo.count = 0; for(let i = 0; i < 10; i++) { if(i < 5) { foo(i); } } console.log(foo.count); console.log(count); //.. 2022. 1. 4. 쿠키 vs 세션 vs 웹 스토리지(로컬 스토리지, 세션 스토리지) HTTP 프로토콜의 한계를 보안하기 위해 쿠키 또는 세션을 사용한다. 기본적으로 HTTP 프로토콜 환경은 비연결지향(connectionless), 무상태(stateless)한 특성을 가지기 때문에 요청만으로 서버는 클라이언트를 구별할 수 없다. 비연결성지향(connectionless) HTTP는 먼저 클라이언트가 요청을 서버에 보내면, 서버는 클라이언트에게 요청에 맞는 응답을 보내고 TCP/IP 연결을 끊는 특성이다. HTTP 1.1에서는 헤더에 keep-alive라는 값을 줘서 커넥션을 재활용한다. 무상태(stateless) 연결을 끊는 순간 클라이언트와 서버의 통신이 끝나며 상태 정보를 유지하지 않는 특성이다. 쿠키(Cookie) 클라이언트(브라우저)에 저장되는 키와 같이 들어있는 작은 파일이다. 클.. 2022. 1. 2. [jQuery] 반응형 슬라이드 배너 만들기 슬라이드 배너를 구현하던 중 반응형 UI를 적용하기 위해 여러가지 방법을 시도했지만, 창의 크기 변화에 즉각적으로 반응하도록 구현하는 것이 쉽지 않았다. 해결을 위해 서치를 하던 중 좋은 방법을 찾았는데, 바로 css animation keyframe을 이용하는 방법이다. @keyframes을 이용해 진행율 별 animation을 다르게 지정한다. 전체를 10초 동안 진행하되 무한반복 옵션에서(10s infinite) 배너로 추가할 이미지가 4개인 경우, 이미지를 2초동안 보여주며, 다음 이미지로 넘어가는 시간은 0.5초로 잡을 수 있다. 이 경우, 0%~20% margin-left:0 [이미지 1을 2초간 보여준다.] 20%~25% margin-left:-100% [이미지 1에서 2로 넘어간다(0.5초.. 2021. 10. 8. 이전 1 2 3 4 5 다음 반응형
