𝙿𝚛𝚘𝚐𝚛𝚊𝚖𝚖𝚒𝚗𝚐 𝙻𝚊𝚗𝚐𝚞𝚊𝚐𝚎/𝙷𝚃𝙼𝙻

WAI-ARIA란?Web Accessibility Initiative’s Accessible Rich Internet Applications스크린리더가 브라우저를 읽을 때 각 요소가 어떤 역할을 하는지, 무슨 의미로 존재하는지 알 수 있도록 하기 위해 만들어진 기술이다.버튼, 링크, 드롭다운 메뉴 등의 요소에 WAI-ARIA 속성을 추가하여, 스크린리더가 해당 요소를 정확하게 인식하고, 사용자에게 적절한 정보를 제공할 수 있다. 스크린 리더란 : 브라우저를 시각적으로 읽는 것이 불편한 사용자를 위해 컴퓨터 화면을 낭독해주는 소프트웨어이다.        aria-label태그가 가지고 있는 의미를 적어주는 이름표 같은 역할을 한다.현재 요소의 기능 및 목적을 적어놓는 것이다. 오늘의 책이렇게 aria-la..

title head 안에서 필수적으로 적어야 하는 것 중 하나이다. 그리고 검색 최적화의 큰 역할을 하고 있다.   title을 잘 쓰는 방법 (Search Engine Optimization)① 키워드 단순 나열은 비추한다.② 각각의 페이지마다 맞는 타이틀을 변경해주는 게 좋다. ③ 알잘딱깔센하게~   linkcss 스타일시트를 첨부하는 태그이다.Visual Code에서 link:css를 입력한 다음 Tab 버튼을 누르면 자동 완성으로 문장이 생성된다.폰트를 가져올 때도 link 태그를 사용한다.  하이   script  html 문서 내에 JavaScript 파일을 첨부할 때 사용한다.  script는 왜 head에 안 쓰고 마지막 부분에 작성하나요?① 성능 향상HTML 문서가 로드될 때, 브라..

기본 구조는 이렇게 되어있다.   html을 작성할 때 가장 먼저 해줘야 하는 것은 DOCTYPE 선언이다. Document Type Declaration= DTD 선언= 문서 형식 선언     : '최신 버전의 html로 작성된건데 오류 없게 잘 렌더링 해줘' 라는 의미이다.  그리고 document : 문서라는 뜻인데 HTML에서 DOCUMENT는 HTML 동의어라고 생각해도 된다.     : 웹 문서에서 보여주게 될 모든 컨텐츨르 다 body에 담는 것이다.     : 사람으로 치자면 뇌에 해당하는 부분이다. 중요하지만 눈에 보이지 않는 것을 적어주는 곳이다.

abbrabbreviation : 약자, 약어  ADHD 단어에 마우스 hover시 title에 적힌 정의가 보이는 걸 볼 수 있다.   address연락처 정보를 마크업할 때 사용한다.  해버니 naver 정보에 해당하는 것들① (물리적) 주소② URL③ email 주소④ 전화번호⑤ SNS    pre & code pre미리 작성된 텍스트를 있는 그대로 표시해준다. code 프로그래밍 코드 일부 그대로 표시하고자 할 때 유용하다.  예시 코드 망고 김망고 망고 김망고  pre는 줄바꿈 간격까지 그대로 출력해준다.   망고 김망고 console.log..

audio video 오디오와 비디오 넣는 법   기본은 이렇게 작성한다. 폴더 안에 audios 파일을 넣어주고 경로를 잘 작성해준다.하지만 위처럼 작성하면 html 파일을 열었을 때 아무것도 눈에 보이는 게 없다.    플레이버튼과 음량조절이 보이는 걸 만들기 위해서는 controls 속성을 적어줘야 한다.     autoplay : 페이지 로드시 한 번 재생loop autoplay : 페이지 로드 후 무한 재생      또한 audio안에 src를 적는게 아니라 audio 태그 안에 source 태그를 적어 그 안에 src를 작성하는 방법도 있다.이 방법과 위 방법의 차이점이 있다.  위 source를 한 개만 넣을 수 있다.   밑source..

먼저 적용 전후를 보자 확실히 아이콘이 들어가져있는데 깔끔하고 페이지의 특색을 살릴 수 있다.      1. 본인의 ico 파일을 준비한다. 사이즈가 작기 때문에 ico 파일로 변환해주면 좋다.일반적으로 이미지 파일의 크기보다 ico 파일의 크기가 작기 때문이다.(어차피 크게 보지 않으니)     2. 준비한 ico파일을 프로젝트 폴더에 넣어준다.   전체적인 코드 구조     3. 사이에 코드를 적어주면 된다.   : HTML 문서에서 외부 리소스를 연결하는 태그rel="shortcut icon" : 파비콘을 나타내는 속성. 웹 브라우저에서 웹 사이트 탭이나 북마크에 표시되는 작은 아이콘을 지정하는 것이다. type="image/x-icon" : 연결된 파일의 타입을 명시한다. 필자는 ic..