본문 바로가기
728x90

HTML11

11. 시맨틱 태그 (Semantic Tag) 시맨틱 태그란 의미있는 태그를 뜻한다.div, span과 같이 의미 없는 태그와 달리, 태그 이름만으로도 내용을 알 수 있는 태그이다. 시맨틱 태그를 사용하면 검색엔진 최적화, 쉬운 소스코드 구조화, 코드의 가독성 향상 등의 장점이 있다. 주요 구조header: 페이지의 제목, 로고, 검색 양식 등nav: 메뉴, 목차 등main: 지배적인 콘텐츠 영역aside: 사이드바, 콜아웃 상자 등section: 문서의 섹션article: 독립적이고 자체 내용이 포함된 콘텐츠 (게시물, 신문 기사 등)footer: 섹션의 작성자에 대한 정보, 저작권 데이터 등활용 코드헤더 정보, 헤더 이미지 메뉴1 메뉴2 메뉴3 메뉴4 섹션1 .. 2024. 7. 4.
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.
728x90

티스토리툴바