본문 바로가기
728x90
반응형

html32

반응형 이미지 태그 <picture> - 화면크기에 따라 다른 이미지를 보여줄 때 사용 https://wit.nts-corp.com/2021/02/04/6293 picture elements 사용하기 | WIT블로그 프로젝트를 진행하면서 585 이하의 기기에서는 모바일 소재의 이미지(배경 이미지)가 노출되고, 586 (폴드) 이상의 기기에서는 PC 소재의 이미지가 노출되어야 하는 스펙이 있었습니다. 해당 스펙 wit.nts-corp.com 2022. 8. 25.
웹접근성 <from> 폼 요소의 제목 … 생략 … 2022. 8. 22.
웹접근성을 지키는 <table> 정리 기본 테이블 테이블에 대한 설명 제목 제목 타이틀 내용 타이틀 내용 웹 접근성을 위해 caption 은 필수 (display:none; 을 쓰지 않고 숨겨준다) th에 scope를 꼭 써준다 thead 도 필수 .table{ width: 100%; position: relative; } .table caption{ position: absolute; width:0px; height: 0px; overflow: hidden; } .table thead th{ background-color: #ccc; text-align: center; } .table thead th:not(:last-child){ border-right: 1px solid #fff; } .table th, .table td{ height.. 2022. 8. 22.
dl로 테이블 만들때 colspan 써야할 경우 1. 그냥 dl로 테이블 형태를 만들면 아래와 같이 됨 colspan 을 사용할 수 없음 See the Pen dl-table sample by gahyun (@gahyun) on CodePen. 2. absolute 를 이용해 colspan 처럼 보이도록 함 See the Pen dl-table colspan by gahyun (@gahyun) on CodePen. 3. 분리 absolute 를 이용할 경우 문제 : 내용이 길어지면 높이 조절이 힘들어짐.. See the Pen dl - colspan by gahyun (@gahyun) on CodePen. 2022. 8. 22.
728x90
반응형