meta태그, 내부링크, id와 name속성의 차이

💡 핵심 요약 (TL;DR)

'meta태그, 내부링크, id와 name속성의 차이'에서 다루는 각 기술의 핵심 개념과 동작 방식의 차이점을 분석한 내용이다. 대부분의 포털사이트는 웹 사이트의 제목, 태그의 내용, 본문의 첫 100여 단어등을 검색한 후 사용자의 검색어와 비교해서 검색 결과를 나열해준다.

meta 태그 (메타태그)

• meta태그는 웹사이트의 안내자이다.
  대부분의 포털사이트는 웹 사이트의 제목, 태그의 내용, 본문의 첫 100여 단어등을 검색한 후 사용자의 검색어와 비교해서 검색 결과를 나열해준다.
• 위치 : head태그 사이에 입력한다.
• 구글에서 인식하는 메타태그들
• 네이버에서 인식하는 메타태그들

자주 사용하는 메타태그들

속성	값	설명
name	application-name	웹어플리케이션의 이름을 표시
name	author	문서의 저자 표시
name	description	문서의 설명 표시
name	generator	저작 툴을 표시
name	keywords	문서의 키워드 표시
http-equiv	content-type	문서의 인코딩 선언
http-equiv	default-style	대체 스타일시트를 선언
http-equiv	refresh	문서의 새로고침 주기 및 이동선언
content	텍스트	http-equiv나 name속성의 값 표시
charset	문자셋	문서의 문자 셋을 선언

예제

아래 예시는 메타태그 refresh를 이용하여 5초뒤에 다른 페이지(test06.html)로 이동하는 태그이다

• content = “숫자(단위는 초); url=”이동할페이지주소”

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="refresh" content="5; url=test06.html">
    <title>메타태그이용 5초뒤 페이지변화</title>
</head>
<body>
메타태그 refresh예시
</body>

페이지 최상단으로 옮기는 링크

• 싱글 페이지에서 이동하는 것을 내부링크 라고 칭한다.
• id속성값을 활용하여 내부링크이동가능

<a href="#">  //=> 페이지 최상단으로 이동
<a href="#top">  //=>id값이 top인 곳으로 이동
<a href="#id명">  //=>id값이 id명인 곳으로 이동

• nav태그는 메뉴바를 칭함
  • css와 함께 작업할때는 nav태그 안에는 ul태그와 li태그로 데이터처리
  • 지금은 html만했기때문에 a태그로만 진행

<h1 id="top">사진 라이브러리</h1>
<!-- 메뉴바는 nav태그, 지금은 a태그로 처리하지만 만약 css와 함께하면 ul과 li태그로 처리함-->
<nav>
	<a href="#dog"><img src="img/1.jpg" alt="dog" width="50px" height="50px"></a>
	<a href="#cat"><img src="img/3.jpg" alt="cat" width="50px" height="50px"></a>
	<a href="#otter"><img src="img/4.jpg" alt="otter" width="50px" height="50px"></a>
	<a href="#babydog"><img src="https://lh3.googleusercontent.com/proxy/4JnvdaxyuL_oqz_o9-ZCMRbKRmo8JwcfvFbl0xWgoTM-yq2MaRCXsrB8rrgwZJP9rUiYD9Vi4w6QgXDo5kg-cTte510-1eB5V-4iLJcHcaVR4s6ZgIDS-zSBKJ5KXH9dkgc-DaynHLLe1r0utiGlztAVeYibEUIc4YsuYZ0n9yHBMUZTI6V6d3h0qJ9VDWZkD8r54Bs_Xu43yMneNzweq4sxA2AB5UZn1EGaerh_PrtO4I-mwB3Wh7_KRiZnOGIKbnCp5MbnQyOmO4dsdAl-ovNb4LG393U4ijVCEktc687awdhNqsmJBTFVKvC3_ak4PX84-2ZFbIQybWFuEoi7" 
		alt="babydog" width="50px" height="50px"></a>   	
</nav>
클릭하면 사진으로 이동합니다
<button type="button"><a href="#down">DOWN</a></button>

 <main>
        <div>
            <hr>
            <h2 id="dog" id="top">강아지</h2>
            <a href="#top" title="사진 클릭하면 최상단으로 이동"><img src="img/1.jpg" alt="dog" height="400px"></a>
            <br><br><br><br><br><br><br><br><br><br><br><br>
        </div>
        <div id="cat">
            <hr>
            <h2 >고양이</h2>
            <a href="#top" title="사진 클릭하면 최상단으로 이동"><img src="img/3.jpg" alt="cat" height="400px"></a>
            <br><br><br><br><br><br><br><br><br><br><br><br>
        </div>
        <div id="otter">
        <hr>
            <h3>수달</h3>
            <a href="#top" title="사진 클릭하면 최상단으로 이동"><img src="img/4.jpg" alt="otter" height="400px"></a>
            <br><br><br><br><br><br><br><br><br><br><br><br>
        </div>
	        <div id="babydog">
            <hr>
            <h3>앞발 영차</h3>
            <a href="#top" title="사진 클릭하면 최상단으로 이동"><img src="https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcQqnXObJInmijzH378WQEfyZiKykrJC5OytLA&usqp=CAU"
                height="400px"
                onmouseover="this.src='https://lh3.googleusercontent.com/proxy/utTrPxQ41R1DUb4-1FKuFuY86gmdy0CJ7GMllfStudciKalXjTldOSegJoDOrzOhPpxI7N0GXxaJUGdS5_M-B-yKVJSdfSCJDR5RLPaXC9N_WxCdxtJssEiS0gWKd5u5BuUSTb6N02pXvJpmRkpIu8A0ALQrnaSKuIrlyz06baXhjtms4VnDyLnzACOncR-Aoqs5zZ-UqqZUNgk00k6rBRGO0DfgXlDdFoz1hsjPu6UPqND-jyxlw6De1_yRI-dtnqaHtXwukoLWWuDQfWcCNKZSY2Kpz9scZIUPj4rVbjI8TzodeziBsyr39EDIsRJdfmnMfkeNpVb2x8ttVQ1_'"
                onmouseout="this.src='https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcQqnXObJInmijzH378WQEfyZiKykrJC5OytLA&usqp=CAU'"
            > 
            </a>
            <br><br><br><br><br><br><br><br><br><br><br><br>
        </div>

<button type="button" id="down"><a href="#">TOP</a></button>

nav태그 css로 고정시키기

<style type="text/css">
	* {
		box-sizing: border-box;
	}
	body{
		text-align: center;
	}
	header{
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		background-color: lightcyan;
		height: 200px;
	}
	div{
		padding-top: 195px;
	}
	a{
		text-decoration: none;
	}
</style>

id속성과 name속성의 차이

속성	설명	주사용처
id	하나의 요소에만 적용가능.페이지에서 유일한 고유값	form태그 데이터처리할때 사용
class	여러요소에 적용가능	CSS에서 식별자로 사용
name	여러요소에 적용가능	CSS에서 식별자로 사용

1. name속성

   • FORM 태그를 사용하여 서버에 페이지에 작성된 데이터전송하고 그 서버측에서 전달받은 데이터처리한다면 NAME속성값 필수
   • 전송된 form의 데이터처리가 필요없다면 name속성값 필요없음
   • CSS사용불가
   • 중복가능 ex) radio버튼은 name이 같아야 하나의 카테고리로 묶여짐.

2. id속성

   • 페이지에서 딱 하나만 가질 수 있는 고유한 값.
   • 페이지에서 유일
   • CSS에서 식별자로 사용

#TILHTML&CSSITWILL(JAVA)