whatisthis?

ARIA (Accessible Rich Internet Applications) = 장애를 가진 사용자가 웹 콘텐츠와 웹 어플리케이션(특히 JavaScript를 사용하여 개발한 경우) 에 더 쉽게 접근할 수 있는 방법을 정의하는 여러 특성 ARIA는 HTML을 보충해, 일반적으로 보조 기술이 알 수 없는 상호작용 및 흔히 쓰이는 어플리케이션 위젯에 필요한 정보를 제공. ** role(역할): 특정 요소에 역할정의, 사용자에게 정보제공, 부여한 역할 동적변경 불가 ** WAI-ARIA ======================= WAI-ARIA(Web Accessibility Initiative – Accessible Rich Internet Applications)는 웹 페이지, 특히 동적 콘텐츠, 그리고..

CSS position attribute = 문서 상에 요소를 배치하는 방법을 지정. static 요소를 일반적인 문서 흐름에 따라 배치 relative 요소를 일반적인 문서 흐름에 따라 배치하고, 자기 자신을 기준으로 top, right, bottom, left의 값에 따라 오프셋을 적용. absolute 요소를 일반적인 문서 흐름에서 제거하고, 페이지 레이아웃에 공간도 배정하지 않음. 대신 가장 가까운(위치) 부모요소에 대해 상대적으로 배치 fixed 요소를 일반적인 문서 흐름에서 제거하고, 페이지 레이아웃에 공간도 배정하지 않음. 대신 뷰포트의 초기 컨테이닝블록을 기준으로 삼아 배치 sticky 스크롤 동작(overflow가 hidden, scroll, auto 혹은 overlay) 이 존재하는 가..

Product card 혼자가 혼자에게 오늘의 책 우선 img태그를 이용하여 이미지를 불러오고, alt 대신 h1태그로 제목격인 책이름을 작성한다. 또한, 오늘의 책 < 은 strong으로 의미를 강조해준다. +) 지난 예제에서 사용했던 aria-label을 이용해서 정확한 의미전달을 해준다. ** WAI-ARIA ======================= WAI-ARIA(Web Accessibility Initiative – Accessible Rich Internet Applications)는 웹 페이지, 특히 동적 콘텐츠, 그리고 Ajax, HTML, 자바스크립트 및 관련 기술로 개발된 사용자 인터페이스 구성 요소의 접근성을 증가시키는 방법에 대해 규정한 W3C가 출판한 기술 사양임. aria-la..

BreadCrumb & Pagination breadcrumbs란? 브레드크럼(빵부스러기로 표시한 길)이란 핸젤과 그레텔에서 따온 용어로, 사이트나 웹 앱에서 유저의 위치를 보여주는 부차적인 내비게이션 시스템을 뜻한다. 페이지네이션(pagination)이란? Pagination(Paging)기능. 백엔드에서 가지고 있는 데이터는 많고, 그 데이터를 한 화면에 전부 보여줄 수 없는 경우에 사용. (일정 길이로 끊어서 전달한다.) 블록단위로 나눠서 마크업해주자. rohjs bugless-101 html로 마크업할 부분은 a태그 말고는 없으므로 위 코드를 div로 감싸주자. +) 이미지(왼쪽 로고)는 정보,즉 의미가 없으므로 img태그가 아니라 css로 넣어주자. 이로써 breadcrumb 부분은 완성되었다...

header에 로고를 만들고, 클릭시 url로 이동하도록 해주는 예제를 만들어보자. (goormedu의 nav 바 - navigation) 우선, 가장 먼저 해당 예제를 블록단위로 나눠서 마크업해보자. 위에서 goormedu라는 것은 '텍스트'가 아니라 로고이므로 img태그를 이용하는것이 바람직하다. 대신, 검색엔진을 통해 검색할 수 있도록 해주려면 h1태그로 goormedu라고 작성해주는게 좋을듯. -> ,즉 헤더태그 안에는 다른 요소가 들어가도 된다. h1태그 안에 img태그를 이용해서 로고를 나타내자. 또한, 우측에 Q&A라는 것을 클릭하면 해당 URL로 이동할 수 있도록 anchor 태그를 사용해주는게 좋을 것 같다. Goorm Edu 위와 같이 h1태그와 img태그를 같이 써주면, 문제가 발생하..

태그를 잘 사용하는 법. Feature Box 란 무엇인지? -제품의 특징 등을 이미지로 나타낸 것. step1. 크게 블록단위로 나눠서 마크업 과 부분, 그리고 상단에 부분으로 나뉜다. Free unlimited private repositories Free for small teams under 5 and priced to scale with Standard ($3/user/mo) or Premium ($6/user/mo) plans. ** 주의 ** - img 태그의 필수 속성은 src와 alt 두가지이다. - 이 예제같은 경우 이미지가 '정보'를 포함하지는 않으므로 alt에 대체텍스트를 작성하기 애매함. -> 이럴때는 alt="" 와 같이 빈칸으로 남겨두자. (아예 alt 속성을 지워버리는것은 X..

위와 같은 구글 검색 결과창을 마크업해보자. 우선, 마크업의 기본은 파트를 크게 나눠보는 것이다! 위 예제같은 경우에는 크게 세가지 파트로 나눌 수 있겠다. 1. 맨 윗줄 - 태그 2. 초록색 글자 부분 - 태그 3. 나머지 부분 - 태그. 이때, h1태그를 클릭해도 링크로 이동하므로 h1태그에 a태그도 감싸줘야한다. HTML5 Semantic Elements - W3Schools https://www.w3schools.com › html › html5_semantic_elements Oct 27, 2019 - Examples of non-semantic elements: and - Tells nothing about its content. ... HTML5 semantic elements are sup..

가상 요소(Pseudo-Element) 가상요소(Pseudo-Element)는, 가상클래스처럼 선택자(selector)에 추가되며, 존재하지 않는 요소를 존재하는 것처럼 부여하여 문서의 특정 부분 선택이 가능함. ::first-line 요소의 텍스트 중 첫 줄 ::first-letter 요소의 첫번째 글자 ::before 요소의 컨텐츠 시작부분 ::after 요소의 컨텐츠 끝부분 ::selection 요소의 텍스트 중 선택된 영역(drag) ::placeholder input 필드 힌트 텍스트인 placeholder cf> 가상 클래스는 가상 요소와 달리 요소의 특정 상태에 스타일을 적용할 때 사용한다. selector::pseudo-element { property: value; } -> 단일 콜론(:..

href="#"의 용도 1. 클릭 이벤트 발생시 페이지 전환 x 2. 화면 최상단으로 이동하도록 -> 이 경우에는 href="#"보다는 아래 코드를 쓰는 것이 낫다. JavaScript의 window.scrollTo() 함수를 이용하자. window.scrollTo() window.scrollTo(x-좌표, y-좌표) ** 참고 js에서 Window 인터페이스는 DOM 문서를 담은 창을 나타냄. document 속성이 창에 불러온 DOM 문서를 가리킴. Window - Web API | MDN Window 인터페이스는 DOM 문서를 담은 창을 나타냅니다. developer.mozilla.org 3. 만약에, 최상단으로 이동하지 않도록 하기 위해서는 세미콜론을 붙여준다. href="#;" href="#"은..

위와 같은 광고 배너를 만들어보자. 우선 예제 이미지를 보고 각 파트로 나눠보면 총 3개의 파트로 나눌 수 있다. - button을 누르면 URL로 이동하도록 하면 될 것 같다. __ 코드 작성 __ Unlimited downloads. Our best content. No attribution. As low as $9/mo Buy description or credit packs Join Pro - 위와 같이 디자인상으로 줄을 띄고싶을 때에는 태그를 이용하자. 단, 문맥상 나누어져있는 'paragraph'의 경우에는 태그로 구분! - a 태그의 필수 속성인 href에는 URL을 입력해야한다. 예제의 경우 URL은 모르므로 그냥 임의로 #을 입력해주었다. - a태그의 속성인 target의 value를 _..