이미지 📌 src(source) 이미지 링크 alt(alternative text) 스크린 리더 등을 이용하는 사용자 또는 이미지를 제대로 이해하지 못하는 검색 엔진을 위한 대체 텍스트이다. 해당 이미지를 묘사해주는 내용이 150자 이내로 들어가야 한다. 텍스트 이미지의 경우 해당 텍스트를 반드시 포함해야 한다. 리스트 앞에 나오는 불릿같이 아무 의미 없이 꾸미는 이미지일 경우, 오히려 alt의 속성 값을 비워두는 것이 좋다. 이때, alt의 속성 자체를 사용하지 않으면 비 표준이다! 이미지 alt값이 이미 나온 텍스트와 완전히 동일한 텍스트를 넣는 것은 지양해야 한다. 스크린 리더로 읽을 때 이전 텍스트와 같은 말을 반복하기 때문이다. title 속성은 절대 alt 속성을 대체할 수 없다. title은..
📌 a 태그에는 href attribute를 반드시 명시해야 한다! href = hypertext(HTML 문서, 웹 페이지) reference (주소값, 참조) 👉🏼 어디로 이동할지에 대한 상세 속성을 정의한다. href 주소값 표기 방법 1. 웹 URL 웹 페이지 주소 또는 상대경로 2. 페이지 내 이동 [참고] 현재 페이지의 최상단으로 이동하는 링크 📌 href="#top" 또는 href="#" 3. 메일 쓰기 📌 4. 전화 걸기 (모바일) 📌 [참고] 가까운 HTML 요소의 사람, 단체, 조직 등에 대한 연락처 정보를 나타낸다. address 요소의 콘텐츠가 제공하는 연락처 정보는 현재 맥락에 적절한 아무 형태나 취할 수 있으며, 물리적 주소, URL, 이메일 주소, 전화번호, SNS 식별자, 좌..
em 📌 주위 텍스트에 비해 강조된 부분을 나타내며, 주로 기울임꼴을 적용해 표현한다. 이때, 단순히 기울임꼴이 필요해서 을 사용하면 안된다! 이 경우에는 CSS의 속성으로 효과를 부여해야 한다. 과 콘텐츠를 강조할 때 사용한다. ex. Just do it already! / We had do someting about it! 👉🏼 이 문장을 읽는 사람이나 소프트웨어는 기울임꼴 부분에 강세를 두고 말하게 된다. 외국어나 등장인물의 생각 등 일반적인 산문에서 벗어난 경우 사용한다. ex. The Queen Mary sailed last night. 👉🏼 Queen Mary를 강조한다거나 중요하게 취급하는게 아니다. 다만 Mary가 여왕의 이름이 아닌 Queen Mary라는 이름의 선박을 나타내기 위해 기울..
제목 (Headings) 📌 , , , ..., 접근성 고려사항 1. 탐색 스크린 리더 사용자가 흔히 사용하는 탐색 기법은 제목에서 제목으로 뛰어 넘으며 페이지 콘텐츠를 빠르게 파악하는 것이다. 따라서 제목 순서를 뛰어 넘으면 ( 다음으로 사용 등) 중간에 빠진 제목이 어디있는지 알 수 없으므로 사용자의 혼란을 야기할 수 있다. 2. 중첩 하위 구획으로 제목을 중첩해 콘텐츠의 구조를 나타낼 수 있다. 대부분의 스크린 리더는 페이지의 제목을 정렬한 목록도 생성해 제공하므로, 사용자가 빠르게 콘텐츠 구조를 파악할 수 있도록 돕는다. 이때, 중첩 제목에서 하위 구획을 닫을 땐 제목 단계를 위로 건너뛸 수 있다. 3. 구획 콘텐츠 레이블 스크린 리더 사용자가 자주 사용하는 다른 기술은 콘텐츠 구획의 목록을 생성..
HTML이란? 정의 프로그래밍 언어가 아닌 컨텐츠의 구조를 정의하는 마크업 언어이다. 웹페이지를 이루는 가장 기본적인 building block이다. CSS와 JavaScript는 추가적인 부분이며, HTML이 기본이다. HTML이 중요한 이유 웹페이지의 시작은 HTML에서 비롯된다. (웹 브라우저 환경의 베이스!) 웹페이지에 보이는 모든 것들은 HTML 태그의 결과물이다. 👉🏼 따라서 문서의 구조와 정보 위계가 명확히 보이는 HTML 코드를 작성해야 한다. 시맨틱 마크업 (Semantic Markup) 정의 Semantic 시맨틱 == 의미론적인 Markup 마크업 == HTML 태그로 문서를 작성하는 것 👉🏼 따라서 시맨틱 마크업이란, 의미를 잘 전달하도록 문서를 작성하는 것을 말한다. 어떻게 작성할..
JSON(JavaScript Object Notation)이란? 경량의 데이터 교환 형식이다. 텍스트 기반의 형식으로, 인터넷에서 데이터를 주고받을 때 많이 사용된다. JSON은 JavaScript에서 객체를 만들 때 사용하는 문법을 기반으로 만들어졌다. 👉🏼 즉, 자바스크립트 객체 문법에 토대를 둔 문자 기반의 데이터 교환 형식이다. JSON 구조 { "name": "Alice", "age": 25, "isStudent": true, "courses": ["Math", "Science", "History"], "address": { "city": "New York", "state": "NY" } } 일반적인 JSON 구조는 자바스크립트 객체 리터럴 작성법을 따른다. (key-value 쌍의 집합) 자바..
모던 자바스크립트란? 모던 자바스크립트 딥 다이브, 모던 자바스크립트 입문.. 모던 자바스크립트라는 말을 많이 접하게 되는데, 모던 자바스크립트가 의미하는 게 대체 뭔지? 가 궁금해져서 이번 주차 스터디 주제를 정하게 되었다. 모던 자바스크립트에서 언제를 기준으로 모던으로 봐야 하는 지에 대한 정확한 기준은 없으나, 일반적으로 모던 자바스크립트라고 말할 때는 다음과 같은 특징을 꼽는다. 리액트, 뷰, 앵귤러 등 가상 DOM을 이용하는 라이브러리나 프레임워크를 사용한다. npm이나 yarn 등 패키지 관리자를 사용한다. 주로 ES6 이후의 표기법을 사용한다. 웹팩 등 모듈 핸들러를 사용한다. 바벨 등 트랜스 파일러를 사용한다. SPA(Single Page Application)으로 작성되어 있다. 그렇다면..
Flux 패턴의 등장 배경 Flux 패턴은 페이스북(현 메타)에서 MVC 모델의 단점을 보완하기 위해 발표한 애플리케이션 아키텍처이다. 페이스북은 기존에 MVC 모델을 사용하였다. MVC 모델에서는 View가 다양한 상호작용을 위해 여러 개의 Model을 동시에 업데이트하고 Model 역시 여러 개의 View를 업데이트할 수 있는데, 새로운 기능이 추가되거나 규모가 커질수록 복잡한 데이터 흐름을 가지게 되어 예측 불가능한 코드를 만들게 되고 버그가 발생하게 되었다. 따라서 페이스북은 대규모 애플리케이션에서 데이터의 흐름을 일관성 있게 관리하여 프로그램의 예측 가능성을 높일 수 있도록, 단방향 데이터 흐름을 가진 Flux를 고안하게 된다. Flux 패턴이란? Flux 패턴은 단방향 데이터 흐름을 유지하는 ..
SPA와 MPA 표로 간단하게 정리하기 구분 SPA (Single Page Application) MPA (Multi Page Application) 정의 한 개의 페이지로 구성된 어플리케이션 여러 개의 페이지로 구성된 어플리케이션 특징 웹 어플리케이션에 필요한 모든 정적 리소스를 최초 한 번에 다운로드 한다. 새로운 페이지를 요청할 때마다 정적 리소스가 다운된다. 렌더링 CSR (Client Side Rendering) 방식 👉🏼 클라이언트 단에서 렌더링 진행 SSR (Server Side Rendering) 방식 👉🏼 서버 단에서 렌더링을 마치고 클라이언트는 받아서 실행 장점 리렌더링으로 인한 깜빡임이 없어 유연한 UI, 자연스러운 UX 구현이 가능하다. 유저가 보는 화면 방식이 웹 크롤러가 보는 방..
데이터 바인딩이란? 화면에 보이는 데이터와 브라우저 메모리에 있는 데이터(여러 개의 JS 객체)를 일치시키는 것을 말한다. 즉, HTML에서 변경된 내용이 데이터에 영향을 미치는 가를 말하는데, 이에 대한 차이를 기준으로 '양방향', '단방향' 바인딩으로 나눌 수 있다. 양방향 바인딩 양방향 데이터 바인딩의 대표인 AngularJS는 엘리먼트에 데이터를 바인딩하면 JS 코드로 데이터를 변경할 수도 있고, 엘리먼트의 값(input)을 수정해서 데이터를 변경할 수도 있다. 단방향 바인딩 React와 같은 단방향 바인딩은 JavaScript에서 HTML로만 데이터 바인딩이 가능하다. 즉, HTML에 바인딩한 데이터를 JS에서 수정할 경우 화면에는 반영되지만, 화면에서 직접 해당 엘리먼트의 값을 바꿨을 때 JS..
