반응형 html 썸네일형 리스트형 [접근성] 이미지 대체텍스트(Alt Text) 노가다 없이 자동 입력하기 접근성 대응을 위한 웹 개발 중에는 대체텍스트 기입의 필요로 인한 시간 소요가 많아질 때가 있습니다. 크롬의 '구글 렌즈'를 통해 해당 업무를 부분적으로 자동화할 수 있는 방법을 소개합니다. 구글 렌즈는 모바일 앱으로 이용되는 경우가 많은데, 데스크톱 환경에서도 크롬을 활용해서 해당 기능의 이용이 가능합니다. 사용법은 웹상의 이미지를 '오른쪽 버튼 클릭'하여 '컨텍스트 메뉴'를 활성화한 후, 'Search Image with Google(구글 이미지 검색)' 기능을 실행하면 됩니다. 크롬 버전에 따라 해당 기능이 비활성화되어 있을 수 있는데 2023년 10월 기준 최신 버전 크롬에서는 정상적으로 작동하는 것을 확인했습니다. 그럼 아래와 같이 크롬 우측에 구글렌즈 패널이 추가된 것을 확인할 수 있습니다. .. HTML 테이블로 이메일용 반응형 레이아웃 구성하기 (No Media Query, 반응형 테이블) 미디어쿼리 없이 테이블로 반응형 레이아웃을 구성이 가능하다는 걸 알고 계셨나요? 아니 그것보다 왜 그런 방법을 써야 하냐고 물으실 거 같습니다. 사실 미디어쿼리를 쓰면 되기 때문에 이 방법은 딱히 효용이 없다고 느끼실 수도 있습니다. 다만 레가시한 환경에서 반응형 구성이 필요할 때 유용한 방법이 될 수 있습니다. 미디어쿼리가 적용되지 않는 예전 Ie 브라우저에 최적화를 해야 하는 웹페이지이거나, 특히 '이메일' 템플릿을 구성하는 데 있어서 여러 클라이언트와 아웃룩 등의 독특한 랜더링 환경에서 정상적으로 웹페이지를 표시하는 데에 있어서 특히 유용할 수 있습니다. 반응형 테이블: 이메일 템플릿 제작에 유용 용도에 대해 앞서 말씀드렸는데 사실 주된 용도는 바로 이 이메일 템플릿 제작에 활용하는 것이라고 볼 수.. 아이프레임(iframe) 높이 자동으로 맞추기 아이프레임은 기본적으로 로드를 호스트하는 페이지에 정적인 높이값을 지니게 됩니다. 로드되는 페이지의 높이에 맞춰 값을 조정하기 위해서는 별도의 자바스크립트 코드가 필요합니다. 다만 아래 방법들은 같은 도메인 또는 같은 서버 안에 소스들이 있을 때만 유효합니다. 다른 도메인이나 서버에 있는 소스들을 iFrame을 불러오고 이에 자바스크립트를 적용하는 과정에는 별도 리서치가 필요합니다. 방법1 : JS 코드 이 방법은 같은 서버 내에서 페이지를 로드할 때 유효한 것으로 보입니다. 자료출처 : Make iframe automatically adjust height according to the contents without using scrollbar? [duplicate] 방법2 : jQuery 플러그인 이.. [HTML] 숫자의 자동 링크화 현상 제거 위 그림과 같이 특히 iOS에서 의도하지 않은 숫자들의 전화번호 링크화는 예측하지 못한 요소로서 디자이너들과 사용자를 당황스럽게 할 수가 있다. 이를 제거하는 방법은 다음과 같다. 메타 태그를 추가함으로써 이와 같은 전화번호 변화 현상을 수정할 수 있다. 메타 태그를 설정한 이후에도 자기가 원하는 항목에 대해서는 선별적으로 '전화번호화'를 할 수 있는데 그 방법은 다음과 같다. 123-456-7890 관련 자료 Disabling the conversion of numbers into links on mobile browsers 이전 1 다음
단순함연구소 UX개발실
