A 태그 / DIV 태그 - HTML

 

2021/01/31 - [IT국비교육] - Index HTML

2021/01/28 - [IT국비교육/HTML] - 글자 관련 태그 - HTML

A 태그

1. A 태그 – Javasript와 관련되어 있음

문자열이나 이미지 태그를 감싸고 클릭 등과 같은 이벤트를 구현할 때 사용합니다.
페이지 이동, 같은 문서 내 특정위치 이동, 파일 다운로드, 이미지 출력, 음악·동영상 실행, 자바스크립트 코
드 실행할 수 있습니다.
문자열에 마우스를 대면 자동으로 손모양으로 바뀝니다.

· 이벤트
웹 브라우저에서 발생하는 모든 움직임과 관련 되어 있습니다.
html 문서가 로딩, 언로딩(사라지는 것)에 의해 발생하기도 합니다.
종류 : load, unload, click, dbclick, mouseover, mouseout, mousedown, mousedraged, keydown,
keyup, keypress, focus(커서를 글자 위에), blur(커서가 벗어남) 등

※ 키 입력 순서
keydown -> 문자인식 -> keyup

 

2. A 태그 형식

<a 속성=“속성값”>문자열 또는 이미지</a>

3. A 태그 속성

속성명	기능	속성값	설명
href	이동 페이지 주소, 문서 내 이동 장소 위치명, 다운로드 파일명, 이미지 파일명, 음악·동영상 파일 명, 이메일 주소를 설정하는 속성	“페이지 이동 URL”	URL로 페이지 이동
		“javascript:자바스크립트코드”	클릭 시 자바스크립트코드 실행
		“다운로드 파일명“	웹에서 열어볼 수 없는 파일의 경우 파일 다운 로드 대화상자가 나타남(.zip, .hwp, .doc 등) 웹에서 열어볼 수 있는 파일의 경우 새 화면을 열고 실행(.jpg, .txt 등)
		“#같은 화면 내 이동 위치명”	같은 화면 내에 <a name=“이동 위치명”>~</a>로 이동 href=“#”만 쓰면 화면 상단으로 이동
		“그림 파일명”	이미지만 있는 화면으로 이동
		“음악·동영상 파일”	음악, 동영상 파일 재생
target	a 태그 기능이 일어날 화면을 지정하는 속성	“_blank”	새로운 팝업 창 화면에서 발생(자식화면)
		“_self”	현재 화면에서 발생(default)
		“_parent”	현재 화면을 호출한 화면에서 발생
		“화면이름”	name=“화면이름” 속성을 가진 화면 관련 태그 에서 발생
name	이동 장소 위치명을 설정하는 속성	“같은 화면 내 위치명”	<a href=“#같은 화면 내 이동 위치명”> 설정 시 <a name=“같은 화면 내 이동 위치명”>로 설정

 

 

DIV 태그, SPAN 태그

1. div 태그

이미지, 문자열 등을 기준별로 그룹화 시켜 서로 겹치게 포개 놓기, 펼쳐 놓기(이때 한 행을 독차지), 감춰놓기
등을 할 수 있는 태그입니다.
block 형식입니다.
태그 속성은 css의 표현 방식인 style 속성으로 표현할 수 있습니다.

2. span 태그

div 태그와 동일한 기능을 가집니다.
div 태그와 다르게 inline 형식(한 행을 독차지하지 않음)입니다.

<span>~</span>

앞뒤에 자동 줄바꿈이 없습니다.
div 태그와 속성 동일합니다.

3. 태그 속성

속성	속성값	기능
style	position:위치;	div 태그 위치를 지정 - static 현재 코딩 위치서만 존재 이동성이 없어 top, left, z-index 속성은 효과 없음 - relative 현재 코딩 위치를 0,0을 기준으로 삼고 top, left 속성 사용에 따라 위치 - absolute(겹치기) 화면 왼쪽상단 모서리를 0,0을 기준으로 삼고 top, left 속성 사용에 따라 위치 relative와 absolute은 z-index 속성을 사용하여 보이는 우선순의를 설정할 수 있음 relative, absolute 속성은 기존 출력물 위에서 원하는 위치에 출력할 때 사용
	left:화면왼쪽여백;	웹 왼쪽 테두리에서 영역까지의 가로 위치를 나타냄
	top:화면위쪽여백;	웹 위쪽 테두리에서 영역까지의 세로 위치를 나타냄
	padding:(상, 우, 하, 좌)여백;	영역 내부의 상, 우, 하, 좌 여백 지정 padding:값; - 모두 동일 여백 지정 padding-top, padding-right, padding-bottom, padding-left로 따로 설정
	width:div 태그 영역넓이;	영역 넓이를 지정(좌우)
	height:div 태그 영역높이;	영역 높이를 지정(상하)
	border:테두리선두께 선모양 색 상;	영역의 테두리 선두께, 선모양, 색상 설정 예 : border:2px solid red(순서유지)
	background-color:div 태그 영 역색상;	영역 색상을 지정
	background-image:url(‘이미지 파일명’);	영역 배경 이미지를 지정
	z-index:우선순위번호;	영역이 겹쳤을 때 우선순위를 지정 번호가 클수록 상위, 번호의 범위는 없음
	visibility:보임여부설정;	영역 보임여부 설정, visible(보임), hidden(안보임) hidden 설정 시 차지하는 공간은 남아 있음
	display:보임여부설정;	영역 보임여부를 설정, block(보임), none(안보임) none 설정 시 차지하는 공간도 없음
	overflow:스크롤바설정;	내용물의 크기가 영역보다 클 경우 스크롤바의 보임 여부를 설정 auto : 내용이 지정 크기보다 크면 자동 보임 hidden : 지정 크기 벗어난 부분은 안보임 scroll : 내용 크기 관계없이 스크롤바 보임 visible : 지정된 크기에 관계없이 내용 다 보임(default)
	filter:Alpha(Opacity=투명수치); ※ 겹쳐있을 경우 앞이 투명하여 뒤는 보이지만 선택은 불가	영역의 투명도 지정 수치가 낮을수록 투명도 증가(0~100) 주의) 브라우저 마다 설정 값이 다름 JQuery로 설정하는 것이 편함

 

What is HTML What is A Tag How to use A Tag What is Div Tag How to use Div Tag <a> <div>