반응형

HTML5 16

[HTML] label/input 태그 정리 (웹 접근성)

label 태그 label 태그는 양식 입력 창의 요소들을 위한 캡션을 나타냅니다. 코드 작성 방식에는 명시적(explicit)과 암시적(implicit)으로 분류됩니다. label 태그를 쓰는 가장 큰 이유는 웹 접근성을 위함입니다. 먼저 명시적 작성 방식과 암시적 작성 방식에 대해 알아보겠습니다. 1. 명시적 작성 방식 명시적 작성 방식은 label 의 for 속성과 input의 id 속성을 명시함으로써 연결해주는 방식입니다. 2. 암시적 작성 방식 암시적 작성 방식은 label 태그 안에 input 태그를 넣음으로써 for 속성을 명시하지 않더라도 암묵적으로 연결하는 방식입니다. 대부분은 명시적 방식을 선호하고 있습니다. 이유는 오래된 통신 기기는 아직 암시적 방식을 지원하지 않기 때문입니다. # ..

HTML5 2021.10.26

첨부파일에 특정 확장자만 첨부하기

첨부파일에 특정 확장자만 첨부하려고 할 때 먼저 첨부파일을 첨부하려고 하면 모든 확장자가 조회되는 것이 아니라 일부만 보이는 것을 본적이 있을 것이다. 그것이 바로 input 태그의 accept 속성을 이용한 것 pdf 파일만 보이게 하기 excel 파일만 보이게 하기 두 개 이상의 타입을 지정하고 싶을 때는 , 로 연결하면 된다. 그 외의 궁금한 타입은 아래의 사이트에서 찾아보면 된다. Media Types www.iana.org

HTML5 2021.09.03

Chapter08 반응형 웹

- 미디어 쿼리가 무엇인지 살펴봅니다. - 반응형 웹을 구현하는 방법을 이해합니다. 1] 뷰포트 설정 meta 태그는 웹페이지에 추가 정보를 제공할 때 사용한다. 표 8-1 viewport meta 태그에 입력할 수 있는 값 width : 화면너비 height : 화면 높이 initial-scale : 초기 확대 비율 user-scalable : 확대 및 축소 기능 여부 minimum-scale : 최소 축소 비율 maximum-scale :최대 확대 비율 target-densitydpi : DPI 지정 2] 미디어 쿼리 설정 미디어 쿼리는 두 가지 방법을 사용할 수 있다. @media 규칙과 media 속성이다. @-규칙 @-rule이란 스타일시트 내부에서 특정한 규칙을 표현하는 데 사용하고, @로 시..

HTML5 2020.11.03

7-4 절대위치배치 7-5 요소의중앙배치 7-6 고정바배치 7-7 글자생략

예제 7-4 절대 위치를 사용해 요소 배치 "자손의 position 속성에 absolute를 적용하려면 부모의 position 속성에 relative를 적용합니다. "자손의 position 속성에 absolute를 적용하려면 부모의 height 속성을 입력합니다." Dummy Text 안녕 Dummy Text 예제 7-5 요소의 중앙배치 요소의 중앙배치a 7-6 고정바 배치 position : fixed; top : 100px; left : 40px; 감/홍시/곶감 수박/메론/참외 채소 쌀/잡곡 축산/계란 축산/계란 축산/계란 축산/계란 축산/계란 축산/계란 축산/계란 축산/계란 축산/계란 축산/계란 축산/계란 축산/계란 축산/계란 축산/계란 축산/계란 축산/계란 축산/계란 축산/계란 축산/계란 축산/계..

HTML5 2020.11.02
반응형