전체 글 21

HTML - 이미지 맵 요소

이미지 요소는 HTML의 이미지 안에서 특정 영역을 클릭했을 때 다른 링크로 연결되도록 하는 기능을 제공한다. 실제 웹사이트 하단에 보면 SNS로 이동하는 링크나 프로모션 상품 링크로 이동하는 경우 이미지맵을 사용하는 것을 종종 볼 수 있다.   요소는 이미지 맵의 컨테이너 역할을 하며 name이나 id 속성으로 이미지 맵의 이름을 정의한다. 이때 사용된 속성값은 의 usemap 속성값과 연결된다. 그다음 태그 안에 태그로 이미지의 클릭 가능 영역을 정의하면 된다.  태그의 주요 속성은 다음과 같다. 속성값설명shaperect (사각형)circle (원형)poly (다각형)default (이미지 전체)클릭 가능한 모양을 정의coordsrect (x1, y1..

Coding/HTML & CSS 2025.02.28

HTML - iframe, object 요소

요소는 웹 페이지 안에 다른 웹페이지를 삽입할때 사용하는 HTML요소이다.흔하게 유투브 영상을 퍼가는 소스코드를 보면 자주 볼 수 있다. 속성설명src포함할 컨텐츠 경로width가로 크기height세로 크기title컨텐츠의 제목(스크린 리더용)allowfullscreen전체 화면 허용loadinglazy 또는 eager로 로딩방식 제어sandbox보안 제한 설정 소스코드의 allow 속성과 referrerpolicy속성은 웹 표준에 위배되는 속성으로 사용하지 않는것이 좋다. 속성설명 data삽입할 컨텐츠의 경로type파일의 유형 (type="application/pdf")width가로 크기height세로 크기name객체 이름(자바스크립트로 접근 가능)form 요소와 연결하는 id 값

Coding/HTML & CSS 2025.02.27

HTML - video, source 요소

웹브라우저에서 동영상컨텐츠를 제공하고 싶다면 요소를 사용 할 수 있다.   동영상 콘텐츠는 src에는 영상 경로를, type에는 비디오 코덱 속성을 명시하면 브라우저에서 지원하는 코덱에 따라 그에 맞는 영상을 렌더링한다. 주요 속성으로는 controls(컨트롤러 제공), mute(실행시 음소거), poster(썸네일), autoplay(자동재생)가 있으며 자막파일을 제공한다면 요소를 사용해서 자막있는 동영상을 렌더링 할 수도 있다. src 속성으로 자막파일 경로를 명시해주고 kind는 자막의 유형 srclang은 제공언어의 코드 lang은 자막 선택시 표시될 이름을 나타낸다.

Coding/HTML & CSS 2025.02.27