웹언어/HTML5 (25) 썸네일형 리스트형 [7/5] HTMLCSS파일공유 보호되어 있는 글입니다. [HTML5] 24강 SEO(검색엔진최적화)관련 meta태그 ** 유튜브로 보실분은 아래 주소를 클릭해주세요.https://youtu.be/CcOK0tJ1CPA 1. SEO(검색엔진최적화)란?- SEO는 Search Engine Optimazation의 약자로, 구글과 같은 검색엔진에 친화적인 사이트를 구축하는 것을 말합니다.- 검색엔진최적화작업을 하면 광고가 아닌 자연 검색 결과를 통해 트래픽의 양과 질을 극대화할 수 있습니다. - 물론 광고를 통해 검색 시 상단에 뜨게 할 수 있습니다.- 하지만 광고로 형성된 상단의 검색결과보다 자연 검색결과로 이루어진 첫 번째 사이트가 대부분의 클릭률을 가지고 간다고 합니다. - 위의 이미지를 구글에서 코딩학원을 검색한 결과입니다. - 중간에 스폰서와 동영상부분은 좀 잘랐습니다.- 스폰서를 2개만 뒀는데, 저것이.. [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(.. 이전 1 2 3 4 다음
