2020-07-10HTML&CSS6 minutes read (About 825 words) 0 visits

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

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속성값을 활용하여 내부링크이동가능

1
2
3

<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에서 식별자로 사용

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

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

meta 태그 (메타태그)

자주 사용하는 메타태그들

예제

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

nav태그 css로 고정시키기

id속성과 name속성의 차이

Catalogue

Categories

Recent

Archives

Tags

Advertisement