본문 바로가기

728x90
반응형

JAVA HTML JAVASCRIPT

(83)
웹접근성을 향상시키기 위한 태그 속성을 알아보자~ alt과 title의 차이점 alt 속성이란? 이미지를 볼 수 없는 환경에서도 내용을 확인할 수 있게 합니다. 즉, 대체 텍스트라고 합니다. title 속성이란? 해당 객제에 대한 제목이나 특성을 설명하기 위한 것(참고의 의미) title 속성과 alt 속성의 의미는 전혀 다르므로 의미에 맞게 사용하셔야 합니다. 또한, title 속성을 alt 속성 대신 사용해선 안됩니다. alt 속성 alt 속성을 사용할 수 있는 태그 , , alt 속성 사용시 유의사항 명쾌하고 짧은 대체 텍스트를 제공 파일명을 대체 텍스트로 제공 지양 이미지 맵에 대한 대체 텍스트 제공 의미없는 이미지에는 공백으로 대체 의미를 제대로 파악할 수 없는 대체 텍스트 지양 의미있는 이미지에 무의미한 대체 텍스트 제공 지양 '~ 하십시오...
alt속성과 title 속성 비교 안녕하세요? 오늘은 title과 alt의 차이점에 대해 설명해 보겠습니다. alt와 title 모두 이미지에서 말풍선을 보여주기 때문에, 다수의 사람들이 차이점을 모르는 경우가 많습니다.(저만 그런건 아니겠죠..?) 그래서 정리를 해보려고 합니다. 1. alt(alternative) : '이미지의 대안, 이미지에 대한 설명'이라고 보시면 됩니다. 용도는 ① 인터넷 속도, 또는 컴퓨터 사양 문제로 웹브라우저 설정을 '이미지 출력 안 함'으로 한 사용자에게 이미지에 대한 간략한 설명을 볼 수 있음. (데스크탑이 아닌 모바일기기로 접속시에도 유용함.) ② 시각장애인의 웹서핑시 사용하는 리더(reader) 프로그램이 텍스트는 읽어주나, 이미지는 읽을 수 없으므로 alt태그 안의 설명을 읽어줌. ③ 일반인 웹서핑..
HTML 이미지에 ALT 태그 속성값을 반드시 넣어줘야 하는 이유 이번 시간에는 사소하지만 정말 중요한것을 알아보겠습니다. 이건 네이버 웹마스터에 있는 링크구조에 대한 오류와도 관련있는 문제일 수 있습니다. 더 나아가자면, 자신의 검색엔진에 노출되는 영향과도 관련이 있을 수 있습니다. 바로 이미지를 대처하는 alt 태그에 대한 내용 입니다. 일반적인 이미지 태그는 다음과 같습니다. 여기에서 저 alt 태그가 정말 정말 중요합니다. 꼭 이미지에는 alt 태그를 넣어주셔야 합니다. 왜 그런지 이유를 파악해 보겠습니다. 먼저 늘 하던대로 이미지 폴더를 html이 위치한 루트 폴더에 생성합니다. 저는 image 라고 이름을 적었습니다. image 폴더 안에 googlelogo.png 파일을 넣었습니다. 이것을 웹에 띄워보겠습니다. html 코딩을 구성합니다. width와 he..
HashSet이란? HashSet이란? HashSet은 Set 인터페이스의 구현 클래스입니다. 그렇기에 Set의 성질을 그대로 상속받습니다. Set은 객체를 중복해서 저장할 수 없고 하나의 null 값만 저장할 수 있습니다. 또한 저장 순서가 유지되지 않습니다. 만약 요소의 저장 순서를 유지해야 한다면 JDK 1.4부터 제공하는 LinkedHashSet 클래스를 사용하면 됩니다. Set 인터페이스를 구현한 클래스로는 HashSet과 TreeSet이 있는데 HashSet의 경우 정렬을 해주지 않고 TreeSet의 경우 자동정렬을 해준다는 차이점이 있습니다. Set의 가장 큰 장점은 중복을 자동으로 제거해준다는 점입니다. 만약 한 편의점에서 오늘 방문한 손님의 총숫자를 계산하고 싶을 경우도 있을 것입니다. 이럴 경우 오늘 하루..
padStart / padEnd padStart and padEnd padStart MDN 문서 : https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/String/padStart padEnd MDN 문서 : https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/String/padEnd String.prototype.padStart() 날짜나 시간 등을 만들 때 유용하다. 예를 들어 더보기 let hours = 12; let minutes = 3; let seconds = 15; console.log(`${hours}h:${minutes}m:${seconds}s`)..
_.filter( ) 함수 underscore.js의 collection 중에서 _.filter( ) 함수에 대해 알아보자. filter _.filter(list, predicate, [context])list: colletion으로써, 배열이나 객체가 될 수 있다. predicate: list의 각 element(value)의 결과값이 truth인지 확인하는 test 함수이다. [context]: predicate 함수에서 this로 바인딩 되는 것이다.(생략가능)--> list의 각 element(value)를 predicate 함수를 돌려, 값이 truth인 것만 배열의 element로 리턴한다. [예제] [context]가 생략될 경우 var evens = _.filter([1, 2, 3, 4, 5, 6], function..
javascript - fullcalendar eventRender fullCalendar 개요 인터페이스를 사용하고 있습니다. 사용 : 서버의 Flask-python 및 클라이언트 측의 HTML jinja2 js 지금은 호버에서 툴팁을 만들거나 tooltip.js를 사용하여 클릭하려고합니다. popper.js 색인으로 이동시키는 버그가 있습니다. 내 기본 js는 다음과 같습니다. document.addEventListener('DOMContentLoaded', function() { var calendarEl = document.getElementById('calendar'); var calendar = new FullCalendar.Calendar(calendarEl, { plugins: ['dayGrid'], defaultView: 'dayGridMonth', ev..
Spring에서 FullCalendar(풀 캘린더)로 Google(구글) 캘린더 DB 연동하기 안녕하세요? 처음 인사드립니다. codingTrip입니다. 오늘은 제가 작업했던 Spring에서 FullCalendar로 구글 캘린더 데이터를 연동해서 사용하기에 대해 자세히 설명하도록 하겠습니다. 구글 캘린더 연동에 대해서 잘 설명해준 글이 적어서 제가 설명하기로 마음 먹었어요. ​ 본 글은 Spring 프로그램을 다룰 줄 아시는 분에 한해서 매우 쉽고, 친절하게 말씀드릴 것을 약속드립니다. ㅎㅅㅎ ​ 그럼 시작합니다. ​ 1. FullCalendar 사이트 들어가서 파일 다운 받기 https://fullcalendar.io/docs/getting-started Getting Started - Docs | FullCalendar edit doc v5 v4 v3 v2 v1 Getting Started T..

728x90
반응형