웹언어/HTML5 (23) 썸네일형 리스트형 [HTML5] 23강 data-* 사용자 정의 속성 - 오쌤의 니가스터디 ** 영상으로 보고 싶은 분은 아래 주소를 클릭해주세요. https://youtu.be/xXN2jMb0eCg 1. data-* Attribute - 사용자 정의 속성 - 원래 HTML에서 태그에 제공되는 속성은 지정되어 있는 것만 사용할 수 있었습니다. - 그러다 보니 개발자들이 불편하다고 의견이 나오기 시작했죠. - 그래서 W3C는 개발자들이 사용자 정의 속성을 만들 수 있게 처리합니다. - 개발자가 임의적으로 속성을 만들어서 사용할 수 있게 하는 것입니다. - 하지만 기존 속성과 겹치면 안 되겠죠? 그렇기 때문에 앞에 [ data-영문 ]로 접두사를 반드시 붙여야 합니다. ## 문법 - [ data-* ] 속성은 전역 속성이며, 모든 HTML 요소에 사용할 수 있습니다. - 속성이름에는 대문자가 포함.. [HTML5] 22강 이미지맵(Image Map) - 오쌤의 니가스터디 ** 영상으로 보고 싶은 분은 아래 주소를 클릭해주세요. https://www.youtube.com/watch?v=nZNDgwDAYYI&t=780s 1. Image Maps - HTML에서 이미지맵을 사용하면 이미지의 일부분만 링크를 걸 수 있습니다. - 과거에는 많이 사용되었지만, 최근에는 많이 사용하지는 않습니다. - 그래도 프런트엔드 개발자라면 알고 있는 것이 좋겠죠? ## 문법 ** 이때 태그의 usemap 속성의 맵이름과 태그의 name 속성의 값은 같아야 합니다. ## map태그의 shape유형 유형 설명 rect 직사각형 영역을 정의 circle 원형 영역을 정의 poly 다각형 영역을 정의 default 전체 영역을 정의 ## 아래 예제들에서 쓸 이미지 2. rect(사각형) 유형의 이미지.. [HTML5] 21강 a태그의 download속성 1. a태그에 파일연결 - a태그에 파일을 바로 연결하면 그것을 페이지로 열려고 합니다. - 특히 pdf파일을 보도록 하겠습니다. - 예시로 제네시스 카달로그로 해보도록 하겠습니다. ## 코드 예시 제네시스 GV70 카달로그 ## 코드 결과 - 위의 움짤처럼 파일은 다운로드 받는 것이 아니라 크롬 뷰어로 열립니다. 2. a태그의 download속성 - a태그에 download속성이 있으면 링크가 가르키는 파일을 다운로드 합니다. - 마치 마우스 오른쪽버튼을 클릭하고 [다른 이름으로 링크 저장]을 실행하는 것과 같습니다. ## 코드 예시 제네시스 GV70 카달로그 ## 코드 결과 - 클릭 시 파일로 다운로드 되는 것을 확인할 수 있습니다. ** 최근 서버에 올려서 테스트하는게 아니면 다운받아지지 않더라고요.. [HTML5] 20강 playsinline - iOS비디오정책 - PC나 안드로이드에서 비디오태그를 볼때는 자동재생처리시 인라인으로 볼수 있지만, IOS인 아이폰이나 아이패드에서 보면 전체화면으로 처리됩니다. - 이번 강좌에서는 그것을 막는 속성인 [playsinline]속성을 사용해보도록 하겠습니다. 1. 아이폰에서의 비디오 재생 ## 코드 - 자동재생을 하려면 음소거(muted)와 자동재생(autoplay)를 같이 작성해야 합니다. - 무한반복(loop)는 7초밖에 안되는 영상을 테스트하기 위해 작성했습니다. - 컨트롤러(controls)를 통해 재생하도록 하겠습니다. ## 영상제공 : pixabay.com/ko/videos/%EB%91%90%EB%B8%8C-%EB%A1%9C%EB%B8%8C-%EB%8B%88%ED%81%AC-%EC%9D%BC%EB%AA%B0-%.. [HTML5강좌] 19강 tabindex태그속성 - 오쌤의 니가스터디 ** 영상으로 보고 싶은 분은 아래 주소를 클릭해주세요. https://youtu.be/o3DeYfWQMUY 1. 초점이동이란? - 키보드 접근성이란 스크린 리더 사용자가 키보드를 통해 웹 페이지의 정보에 접근하는 것을 의미한다. - 특히, 초점이동이란 [tab]키를 누르면 좌측상단부터 초점받는 요소로 부터 이동되고, [shift] + [tab]키를 누르면 반대로 올라가는 것을 의미한다. 1) 네이버 사이트의 초점이동 - 위에 보면 까만 테두리가 초점의 이동을 보여줍니다. 과거에는 파란색으로 크롬에 체크해줬으나 요즘은 저런 검은색 테두리로 처리합니다. 2) 기본적으로 초점을 받는 태그 - HTML태그가 기본적으로 초점을 받는 것들이 있습니다. - 그 태그들을 알아보도록 하겠습니다. 태그명 설명 a 클릭 .. [HTML기초문법] 18강 a태그의 링크의 종류 - 오쌤의 니가스터디 1. URL을 이용한 하이퍼링크 ## 문법 1) 절대 경로 - 파일의 탐색 경로가 파일 시스템의 루트로부터 시작해 명시된 파일의 경로 이름 - /images/common/xxx.jpg - 외부 페이지 경로 : https://tistory.com TISTORY 나를 표현하는 블로그를 만들어보세요. www.tistory.com ## 문법 티스토리 바로가기 2) 상대 경로 - 파일 시스템에서 현재 작업 디렉토리부터 찾아갈 파일에 이르는 경로 - 현재 작업 파일이 무엇이냐에 따라 상대적으로 바뀌는 경로 - ./현재폴더의 파일선택 - ../상위폴더의 파일선택 - 하위폴더명/하위폴더의 파일선택 - 자세한 경로 공부 : ossam5.tistory.com/31?category=897196 [HTML기초문법] 3강 a(.. [HTML기초문법] 17강 meta태그와 viewport - 오쌤의 니가스터디 ** 동영상으로 보고 싶으신 분은 아래 주소를 클릭해주세요. https://www.youtube.com/watch?v=4Y5GFdwq9xc&t=2s 1. meta 태그란? - HTML 문서에 대한 메타 데이터를 정의합니다. - 메타 데이터는 데이터에 대한 데이터 (정보)입니다. - 항상 2. meta 태그의 속성 속성 값 설명 charset UTF-8 EUC-KR 등등 각국의 언어 셋 HTML문서의 문자 인코딩을 지정 content 연관된 값 http-equiv 또는 이름 속성과 연관된 값을 지정합니다. http-equiv content-security-policy content-type default-style refresh 콘텐츠 속성의 정보 / 값에 대한 HTTP 헤더를 제공합니다. name app.. [HTML기초문법] 16강 SVG태그의 effect와 gradient - 오쌤의 니가스터디 1. SVG 태그란? - SVG태그는 Scalable Vector Graphics의 약자로 벡터 기반 그래픽을 XML 형식으로 정의하는 것을 의미합니다. - SVG태그는 SVG그래픽을 담기 위한 요소입니다. - SVG태그 내부에 담을 수 있는 것은 원, 사각형, 다각형, 라인, path 등이 있습니다. - SVG태그는 파일의 모든 요소와 모든 속성에 애니메이션을 적용할 수 있습니다. ## SVG태그 SVG그래픽 ... - svg는 컨테이너로 묶음을 의미합니다. 내부에 그래픽을 담기 위한 그릇과 같은 태그입니다. 2. SVG Filters - SVG 필터는 SVG 그래픽에 특수 효과를 추가하는 데 사용됩니다. ## 태그 - 뒤에 기능들이 영문으로 붙음 - : 이미지 결합용 필터 - : 색상 변환을 위한 필.. 이전 1 2 3 다음
