ol 📌 Finishing places of contestants not in the winners’ circle: Speedwalk Stu Saunterin’ Sam Slowpoke Rodriguez == ordered list 순서가 중요한 목록 (ex. 요리법, 실시간 목록 등...) 보통 숫자 목록으로 표현된다. 특성 reserved : 내부에 지정한 항목이 역순으로 배열된 것인지 나타낸다. start : 항목을 셀 때 몇 번째 항목부터 시작할 것인지 나타낸다. type : 항목을 셀 때 사용할 카운터 유형을 나타낸다. 👉🏼 a, A, i, l, 1 (기본값) ul 📌 first item second item second item first subitem second item second subi..
이미지 📌 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 태그로 문서를 작성하는 것 👉🏼 따라서 시맨틱 마크업이란, 의미를 잘 전달하도록 문서를 작성하는 것을 말한다. 어떻게 작성할..
작성한 코드 및 오류 내역 .itemDesc h1 { font-size: 32px; margin-bottom: 15px; } .itemDesc p { margin: 10px 0; font-size: 14px; color: #737373; } 위 아래로 나란히 있는 h1과 p에게 각각 margin-bottom을 15px, margin top&bottom을 10px씩 부여했다. 그런데 작업한 화면을 검토해보니 코드에 작성한 margin값이 의도대로 적용되지 않고 있었다. 개발자도구로 확인해보니 h1과 p의 margin이 겹쳐져 있는 것을 확인할 수 있었다. 이유는 마진 상쇄(겹침) 현상 때문이었다. 마진 상쇄 현상이란? 마진 상쇄는 어떤 두 개 이상 블록 요소의 위 아래 마진이 겹칠 때, 어느 한쪽의 값만 ..
이해를 위한 기본 세팅 설명 [내 PC]의 [사진] 폴더 안에 [Scan], [오류] 폴더가 있으며 동등한 위치에 'capture.jpg'가 있다. [Scan] 폴더 안에는 'black.jpg'가, [오류] 폴더 안에는 '1.jpg', '2.jpg', '3.jpg'가 있다. 절대 경로 ▶ 최상위 디렉토리(=파일)를 반드시 포함하여 작성된 경로 사진에 보이는 '1.jpg'의 절대경로는 내 PC\사진\오류\1.jpg 이다. 절대경로는 직관적이어서 이해하기 쉽지만, 찾아가는 과정에서 여러 파일을 거칠 경우 경로가 길고 복잡해진다는 단점이 있다. 상대 경로 ▶ 현재 디렉토리(기준 비교 대상)를 기준으로 작성된 경로 상대경로는 '내가 기준으로 삼고 싶은 디렉토리'를 기준으로 '다른 디렉토리(또는 파일)'가 어디에..
