나디아 성장 일기

📌 disabled 속성 : HTML 및 React 컴포넌트에서 요소의 상호작용을 제어하는데 사용 요소가 사용자 상호작용을 받을 수 없도록 만든다.주로 버튼, 입력 필드, 선택 상자 등과 같은 사용자 인터페이스(UI) 요소에 적용한다.기능상호작용 비활성화disabled 속성이 설정된 요소는 사용자가 클릭하거나 입력할 수 없게 된다. ex) 버튼이 disabled 상태일 때, 사용자는 그 버튼을 클릭할 수 없다.스타일링브라우저는 disabled 상태인 요소에 대해 기본적으로 시각적으로 구분되도록 스타일을 적용한다.일반적으로 disabled 상태인 버튼은 흐릿해지거나 회색으로 표시된다.폼 제출 방지disabled 속성이 설정된 입력 필드는 폼이 제출될 때 해당 데이터가 전송되지 않도록 한다.➡︎ 비활성화된..

: 머리글, 줄임말title 속성을 통해 부가 설명"abbreviation(약어)"  사용 태그로 약어를 감싼다.title 속성에 약어의 의미를 명시한다.See the Pen abbr by nadia kwon (@nadia-kwon) on CodePen.   - HTML: Hypertext Markup Language | MDN" data-og-description="HTML 요소는 준말 또는 머리글자를 나타냅니다. 선택 속성인 title을 사용하면 준말의 전체 뜻이나 설명을 제공할 수 있습니다. title 속성은 전체 설명만을 가져야 하며 다른건 포함할 수 없습" data-og-host="developer.mozilla.org" data-og-source-url="https://developer.m..

Rocks!   - HTML: Hypertext Markup Language | MDN" data-og-description="HTML 요소는 페이지의 스크립트 유형을 지원하지 않거나, 브라우저가 스크립트를 비활성화한 경우 보여줄 HTML 구획을 정의합니다." data-og-host="developer.mozilla.org" data-og-source-url="https://developer.mozilla.org/ko/docs/Web/HTML/Element/noscript" data-og-url="https://developer.mozilla.org/ko/docs/Web/HTML/Element/noscript" data-og-image="https://scrap.kakaocdn.net/dn/bojftm..

📌 HTML 태그로 접근성 향상하기 * 접근성 향상을 위해서는 고유한 이름 짓는 것이 좋다. 단순히 "클릭", "더보기" 등과 같은 모호한 텍스트를 지정해서는 안됨   태그 ➡ 텍스트 삽입 상금 획득    태그 ➡ alt 속성alt 속성과 aria-label 속성은 같이 사용할 수 없음    태그 ➡ 태그의 id 속성과 태그의 for 속성을 연결시켜야 함Email    태그 ➡ 태그로 의 제목 설정 Monthly Sales Report Month Sales January $5000 February ..

📌 lang 속성: 텍스트가 사용해야 하는 언어를 정의하는 속성 * lang의 기본값은 "알 수 없음"이므로 항상 적절한 값을 지정해야 한다.   🔺 사용 이유스크린 리더가 lang 속성을 이용하여 자동으로 음성을 변환함 =>  웹 접근성 👍크롬 자동번역 인터페이스에 사용  ✨ 국가 코드(ISO Country Code)- lang 속성의 속성값 처음 두 문자 : 언어 코드(소문자)- lang 속성의 속성값 마지막 두 문자 : 국가 코드(대문자)  영어 = en(en-GB: 영국 영어, en-US: 미국 영) 중국어 = zh-CN( zh-Hant: 중국어(번체)) 프랑스어 = fe일본어 = ja 스페인어 = es(es-ES: 스페인, es-013: 중앙 아메리카) 러시아어 = ru(ru-Cyrl-BY..

📌 웹 접근성(Web Accessibility): 모든 사용자가 웹 사이트 및 웹 애플리케이션을 이해하고 이용할 수 있는 능력장애가 있는 사람, 고령자 등을 포함한 모든 사용자가 웹을 사용할 수 있도록 하는 것을 목표로 한다.웹 사이트나 애플리케이션을 설계하고 개발할 때 특정 규칙과 지침을 준수해야 한다.이러한 규칙은 W3C (World Wide Web Consortium)에서 발표한 웹 콘텐츠 접근성 지침(WCAG)에 기반한다.  📌 웹 콘텐츠 접근성 가이드라인 (Web Content Accessibility Guidelines, WCAG): W3C 웹 콘텐츠 접근성 가이드라인 표준 권고안 - 웹 사이트/애플리케이션에서 충족해야 하는 기준을 정의하여 장애가 있는 사용자가 보다 쉽게 이용할 수 있도록..

📌  DOCTYPE: 문서의 형식을 지정하는 역할웹 브라우저에게 해당 문서가 어떤 HTML 버전으로 작성되었는지 알려준다.DOCTYPE 선언에는 종종 DTD를 참조하는 URL이 포함된다.이 URL을 통해 브라우저는 해당 DTD를 가져와 문서의 구조를 검증하고 올바른지 확인할 수 있다.  📌 DTD (Document Type Definition): 문서 내에서 사용할 태그를 정의하기 위한 일련의 구문 규칙 XML 문서의 구조와 유효성을 정의하는 것DTD로 명시되는 규칙은 요소(element) 및 선언들의 집합이 포함웹 문서 등에 대해 유효 요소(element)들을 이용해 문서 구조를 정의  🔺 XHTML DTD의 3가지 타입Strict 타입 : CSS를 포함하는 정형화된 마크업이 필요할 때 사용 (엄..

📌 웹 표준(Web Standards) : HTML, CSS, Javascript, DOM 등 웹에서 표준적으로 사용되는 기술 W3C(World Wide Web Consortium)가 만들었다.  ✨ W3C(World Wide Web Consortium) : 웹 기술의 표준을 개발하고 유지하는 국제 기구 팀 버너스리(Tim Berners-Lee, 웹 창시자)가 1994년에 창설했다.웹의 발전과 표준화를 촉진하기 위해 다양한 기술적인 규격과 가이드라인을 제정한다.   📌 웹 접근성(Web Accessibility) : 모든 사용자가 웹 사이트 및 웹 애플리케이션을 이해하고 이용할 수 있는 능력 장애가 있는 사람, 고령자 등을 포함한 모든 사용자가 웹을 사용할 수 있도록 하는 것을 목표로 한다.웹 사이트..

input에 안내문구 넣기 placeholder : 텍스트 입력 칸에 안내 문구를 넣어 입력에 도움을 준다. 엔터로 submit 하기 이벤트 키 값이 13이면 searchList() 함수 실행 (엔터 키의 값은 13) 폼 안에 text 박스가 1개일 때만 가능 페이지를 새로고침하는 버튼 만들기 a 태그의 링크를 window.location.reload()로 설정하기 새로고침 태그 웹 페이지 하단의 작성자, 저작권 정보, 관련 문서에 대한 링크 등의 내용을 나타내는 영역 © 2023 웹 페이지 제작자 contact@example.com role 속성의 값은 contentinfo * role 속성 – 장애를 가진 사용자들을 위한 향상된 웹 콘텐츠의 접근성 제공하는 도구 태그 width과 height 속성을 ..