-
Learn Accessibility by Building a QuizFreeCodeCamp 2022. 8. 1. 15:42
nav
다른 페이지 또는 현재 페이지의 다른 부분과 연결되는 네비게이션 링크(navigation links)들의 집합을 정의할 때 사용
<nav> <a href="/html/intro">HTML</a> | <a href="/css/intro">CSS</a> | <a href="/javascript/intro">JavaScript</a> </nav> <nav> <ul> <li><a>INFO</a></li> <li><a>HTML</a></li> <li><a>CSS</a></li> </ul> </nav>aspect-ratio
이미지 비율 설정 (가장 최신 방법)
aspect-ratio: 35 / 4; > 35:4 비율로 고정[CSS] 📚 이미지 비율 고정하는 최신 방법 - aspect ratio 🎨
aspect ratio 속성 aspect ratio 속성은 이미지나 동영상을 비율대로 줄이거나 늘리는 데 사용됩니다. 과거에 css에서 비율로 조절할 수 있는 css 프로퍼티가 존재하지 않았습니다. 하지만 css에서 최신
inpa.tistory.com
style.css 폰트 색상 설정
font-color 더이상 사용 X >>> color 사용 O
style.css nav 안에 있는 ul element 지정, flexbox 사용, 자식 요소의 간격을 고르게
nav > ul{ justify-content :space-evenly; display: flex; }form 태그의 method 속성
폼 데이터(form data)가 서버로 제출될 때 사용되는 HTTP 메소드를 명시 / GET 또는 POST 선택 가능
GET POST - URL에 폼 데이터를 추가하여 서버로 전달
- HTTP 요청은 브라우저에 의해 캐시되어(cached) 저장
- 보통 쿼리 문자열(query string)에 포함되어 전송, 길이제한 O
따라서 보안상 취약점 존재 > 중요 데이터는 POST 방식 사용하여 요청- 폼 데이터를 별도로 첨부하여 서버로 전달
- HTTP 요청은 브라우저에 의해 캐시되지 않으므로, 브라우저 히스토리 기록 X
- HTTP 요청에 의한 데이터는 쿼리 문자열과는 별도로 전송
따라서 길이제한 X<form action="/examples/media/action_target.php" method="post"> 이름 : <input type="text" name="st_name"><br> 학번 : <input type="text" name="st_id"><br> 학과 : <input type="text" name="department"><br> <input type="submit"> </form>https://www.nextree.co.kr/p8428/
HTML : 폼(form) 이해
폼은 알게 모르게 웹에서 많이 사용합니다. 사용자 의견이나 정보를 알기 위해 입력할 큰 틀을 만드는 데 사용되기 때문입니다. 폼은 입력된 데이터를 한 번에 서버로 전송합니다. 전송한 데이
www.nextree.co.kr
Role
요소의 역할(목적)을 명시해주는 속성
웹 페이지 또는 문서에서 감지할 수 있는 큰 섹션으로, 작성자가 페이지 요약이나 목차에 포함될 만큼 중요하다고 생각
https://velog.io/@vrisel/%EC%A0%91%EA%B7%BC%EC%84%B1-Landmark%EC%99%80-role
[접근성] Landmark와 role
Landmark role - banner, navigation, search, form, main, complementary, contentinfo, region
velog.io
aria-labelledby
화면에 현재요소를 설명할 텍스트가 있는 경우, 해당 텍스트 영역과 현재 요소를 연결
<section role="region" aria-labelledby="student-info"><h2 id="student-info">student-info</h2></section> <section role="region" aria-labelledby="html-questions"><h2 id="html-questions">html-questions</h2></section> <section role="region" aria-labelledby="css-questions"><h2 id="css-questions">css-questions</h2></section>https://abcdqbbq.tistory.com/77
WAI-ARIA 접근성2. 영역에 대한 설명, 레이블 (aria-label, aria-labelledby)
2021.03.20 - [Frontend/Web] - WAI-ARIA 접근성1. 주의사항 및 특징, 역할 (role)의 사용 WAI-ARIA 접근성1. 소개 및 주의사항, 태그별 role의 사용 WAI-ARIA (Web Accessibility Initiative – Accessible Rich..
abcdqbbq.tistory.com
label의 for 속성
for의 값 = id의 값이면, input의 type에 맞게 연결됨
Input-Text 누르면 input 입력칸에 커서 생김
Input-Checkbox 누르면 checkbox 체크/체크 해제
<body> <p> <label for="jb-input-text">Input - Text</label> <input type="text" id="jb-input-text"> </p> <p> <label for="jb-input-checkbox">Input - Checkbox</label> <input type="checkbox" id="jb-input-checkbox"> </p> </body>TIP
Input 등의 양식을 label로 감싸면, id와 for가 없어도 같은 결과가 나옴
<body> <p> <label>Input - Text <input type="text"> </label> </p> <p> <label>Input - Checkbox <input type="checkbox"> </label> </p> </body>'FreeCodeCamp' 카테고리의 다른 글
Learn More About CSS Pseudo Selectors By Building A Balance Sheetindex (0) 2022.08.11 Learn Accessibility by Building a Quiz (0) 2022.08.03 Learn Typography by Building a Nutrition Label, Completed (0) 2022.08.01 Learn CSS Flexbox by Building a Photo Gallery (0) 2022.07.31 Learn the CSS Box Model by Building a Rothko Painting (0) 2022.07.30