본문 바로가기
728x90

Frontend46

10. 이미지맵 <map> 이미지맵은 하나의 이미지 내에서 좌표를 설정하여 링크를 거는 태그이다. 주로 지도와 같은 복잡한 이미지에서 사용한다. 기본형usemap="#이미지맵 사용명칭" 과 map name="이미지맵 사용명칭"을 동일하게 지정shape: 영역의 모양 (rect: 직사각형, circle: 원형, poly: 다각형, dafault: 전체 영역)coords: 이미지 좌표 (시작점x, 시작점y, 끝점x, 끝점y)링크가 없을 경우, nohref로 정의  좌표 설정www.image-map.net/ 사이트를 통해 이미지에서의 좌표를 설정할 수 있다. 활용 코드  실행 결과-> cherry, raspberry, bread 이미지를 클릭하면 해당 링크로 이동한다. .. 2024. 7. 3.
9. <a> 태그 태그는 HTML 문서에서 링크를 생성하는데 사용되며, 다른 웹 사이트로 이동할 수 있는 하이퍼링크를 만들어준다. 기본형href: 연결할 주소 지정target: 링크를 클릭할 때 창을 어떻게 열지 설정title: 해당 링크에 마우스 커서를 올릴 때 보이는 도움말 설명텍스트 또는 이미지 href임시 링크 (#): 주소가 명확하지 않을 경우. 또는 페이지 내의 특정 섹션으로 이동하기 위해 사용. ex) href="#section2"이메일 주소 (mailto): 사용자가 이메일 클라이언트를 열고 지정된 이메일 주소로 이메일을 보내도록 설정전화번호 (tel): 사용자가 바로 전화를 걸 수 있도록 설정문자 (sms): 사용자가 바로 텍스트 메시지를 보낼 수 있도록 설정 target_self: 링크를 클릭한 해당 창.. 2024. 7. 3.
8. image, audio, video 활용 1. image 태그는 웹 문서에 이미지를 삽입할 때 사용한다. 기본 문법src: 이미지 파일의 경로 지정alt:  이미지가 표시되지 않을 때 대신 표시될 텍스트  이미지 경로절대 경로(absolute path): 이미지가 위치한 웹 서버의 전체 URL을 포함상대 경로(relative path): 현재 HTML 파일의 위치를 기준으로 이미지 경로 지정//절대 경로 //상대 경로  2. audio 기본 문법  태그 속성controls: 오디오 재생 컨트롤 바 표시 (오디오 재생, 일시 정지, 음량 조절 등)autoplay: 오디오 자동 재생loop: 오디오 반복 재생preload: 페이지를 로드할 때 오디오 파일을 먼저 미리 로드할지 여부 지정 (none, metadata, auto)muted: .. 2024. 7. 3.
7. input 태그 input은 내용이 없는 빈 요소이며, type 속성을 통해 여러 종류의 입력 양식으로 나타낼 수 있다. input 태그 형식type: 입력 태그의 유형을 설정하는 속성value: 유저가 입력 필드에 입력한 정보name: 서버로 전달되는 이름을 설정하는 속성id: 다른 요소와 식별 가능하게 하는 고유한 이름주요 속성autofocus: 페이지를 불러오자마자 폼에서 원하는 요소에 자동으로 마우스 포인터를 표시placeholder: 사용자가 텍스트를 입력할 때 입력란에 적당한 힌트 내용을 표시title: 마우스 커서를 갖다 대면 해당 요소가 의미하는 바를 알려주는 역할을 하는 속성autocomplete: 예전에 입력한 내용을 자동으로 표시해 주는 자동 완성 기능readonly: 읽기 전용 필드. 입력x 수정x.. 2024. 7. 3.
728x90

티스토리툴바