The HamSter Developer

웹 접근성과, 웹 표준이란 무슨 말일까?웹 접근성은 모든 사용자가 웹 콘텐츠에 동등하게 접근할 수 있도록 보장하는 것이고, 웹 표준은 이러한 접근성을 포함한 일관된 웹 콘텐츠 개발을 위한 규칙과 지침이다.해당 포스트는 웹 표준에 기본적으로 지켜야 할 예시들을 정리하여 작성하였다.alt이미지에는 반드시 alt로 대체 텍스트를 만들어주어야 한다.이러면 네트워크 대역폭이 낮은 유저나 장애를 가져 스크린리더를 사용하는 사람의 화면 인식에 도움을준다.적절한 aria 사용하기1.aria-label화면에는 보이지 않는 텍스트를 만들 때 사용한다.X평범한 사람은 X로 읽지만, 스크린 리더는 button을 닫기로 읽어 사용자에게 제공해준다.2.aria-labelledby 및 입력(폼)에 label 붙이기스크린리더가 읽을..

option과 input에는 value라는 데이터를 설정할 수 있고 ,label은 for 같이 지정된 데이터를 집어넣을 수 있다.다만, 이건 각각의 Elem이 가지고있는 일종의 사용법이고, 이번 포스트에서는 우리가 공통으로 사용할 수 있는 데이터들에 대해서 설명하겠다.왜 공통 데이터를 설명하는가?div에는 value가 없지만input에는 value가 있다.이런 특수한 경우는 대부분 해당 Elem의 사용법이기에 이런게 필요하다고 느껴졌을 때는 스스로 찾아보게 되어있다.만약 처음 배우게 된다면 여기서는 사용법의 기초를 제대로 다지고 가는게 중요하다고 생각한다.Element에는 어떤 데이터를 공통으로 넣을 수 있는가?가장 많이 사용하는 3가지가 기본이다.classiddata-class와 id란?처음 HTML을..

Element hello World !처럼 body안에 div 같은 Element 들로 영역을 나눌 수 있다.html에서 사용할 수 있는 element는 굉장히 많다.전부 알 필요는 없고 해당 포스트는 자주 사용하는 Element들을 설명하도록 하겠다.그러나 전부 궁금한 사람은 아래 사이트를 참고하자Element 모음 사이트link와 script html에 style에 관련된 것들을 연결할 때 주로 사용한다. 대표적인 예로 favicon과 css가 있다. javaScript를 연결하기 위해 사용하기도 하지만, 해당 Element 안에 작성한 파일은 js로서 인식한다.console.log("hello")a클릭 시 href의 링크를 열어준다.주된 사용법은 아래와 같다. 네이버 ; 네이버 ; ..

글을 쓰기 앞서 유용한 사이트를 소개하겠다.메인 아이콘 배경제거이미지 배경 제거 사이트메인 아이콘 크기 조절파일 크기변환 사이트이미지를 동그랗게 만들기이미지를 동그랗게 만들어주는 사이트특수문자html 특수문자 코드 모음 사이트html에서 가끔 특수문자가 오류를 일으킨다.특수문자의 경우, string이 아닌 코드로 인식하는 경우가 있기 때문에 그런 불필요한 충돌을 피하려면 위 링크에서 특수문자를 찾아 사용하면 된다.사용 방법은 매우 간단한데 Code 부분을 붙여넣으면 특수문자로 화면에 출력된다.hello World ! hello World ! 가 출력된다.검색 사이트에 노출시키기눈으로 확인할 수는 없지만, 우리가 나중에 웹 페이지를 배포할 시 content 부분을 검색 사이트에서 인식한다.즉, 자기..

html웹페이지의 최상위 root다. lang="en" 이 웹 페이지에서는 영어를 기본적으로 사용하겠다는 뜻이며, 우리가 어떤 언어를 페이지의 기본으로 설정할 수 있는지는 아래 사이트에 들어가면 볼 수 있다.HTML 설정 언어headHTML의 표지와 여러 설정들을 담당한다. 우리가 웹 페이지에 들어가기 전, 보이는 이미지, 탭이나 즐겨찾기 시 자동으로 설정되는 문구 등의 설정을 여기서 담당한다.metameta는 웹 페이지에 대한 메타데이터를 제공하는 데 사용된다.UTF-8전 세계의 거의 모든 문자를 인코딩할 수 있는 문자 인코딩 표준을 뜻한다.viewport영어 그대로 보는것에 관여하는 코드이다.content="width = device-width html의 width(양 옆 너비)를 device(사용자..