공부했던 내용을 정리하는 용도로 오류가 있을 수 있습니다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="discription" content="자기소개">
<meta name="kewords" content="초보개발자,프론트엔드개발자,개발로그">
<meta name="author" content="초보 개발자">
<meta http-equiv="refresh" content="20">
</head>
<body>
안녕하세요. 웹페이지를 공부하고 있는 초보 개발자입니다.
</body>
</html>
- <meta> : 글의 본문에 표현되진 않지만, 그 웹페이지 혹은 본문을 설명해주는 태그
- charset : 캐릭터 셋의 약자로, 우리가 파일을 저장한 형식을 표시해주는 것으로 그 형식으로 화면에 표시할 수 있게 해 준다. ( 만약 'utf-8'의 형식으로 파일을 저장한다고 가정하면 저장하는 것을 인코딩, 그 저장한 형식으로 파일을 해석해서 읽는 것을 디코딩이라고 한다. )
- name, content : 웹 페이지 상에서 표시되지는 않지만, 웹페이지에 대한 요약된 자료로도 이용가능하고, 검색될 때 그 요약자료로 쓰일 가능성이 높다.
- keywords : 웹페이지를 잘 설명하는 키워드들. 기계가 웹페이지를 분류할 때 이용된다.
- author : 저자를 표시한다.
- http-equip="refresh" content="30" : 웹페이지를 20초마다 리프레쉬 시켜주는 속성 (잘 사용되는 속성은 아님.)
<!DOCTYPE html>
<html>
<head>
<title>과일 소개</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
</head>
<body>
<header>
<h1><a href="index.html">HTML</a></h1>
</header>
<nav>
<ol>
<li><a href="1.html">과일이란</a></li>
<li><a href="2.html">과일과 채소의 차이</a>></li>
<li><a href="3.html">과일의 종류</a></li>
<li><a href="4.html">과일들의 원산지</a></li>
</ol>
</nav>
<section>
<article>
<h2>페이지 소개 </h2>
본 페이지는 과일에 대한 모든 내용을 알려드리고자 만든 페이지 입니다.
</article>
<article>
<h2>페이지 소개 </h2>
본 페이지는 과일에 대한 모든 내용을 알려드리고자 만든 페이지 입니다.
</article>
</section>
<footer>
<li><a href="5.html">과일쇼핑몰</a></li>
<li><a href="6.html">blog</a></li>
</footer>
</body>
</html>
Sementic element : 의미론적인 태그
기능적으로는 아무 기능이 없지만 의미로 나누는 정보의 의미만 가지고 있음
- <header> : 웹페이지의 항상 제일 위에 부분으로 존재하고 코드 중 어떠한 위지에 있더라도 제일 상단에 위치하게 됨.
- <nav> : 웹페이지의 내비게이션 정보라는 의미의 영역 태그
- <section>: 웹페이지의 구역, 구획들을 나누는 의미의 영역 태그, 어떤 특정한 역할이 없지만 구역을 나눌 때 사용가능하다.
- <article>: 웹페이지의 본문임을 나타내는 영역태그
- <footer>: 웹페이지의 항상 제일 아래에 부분으로 존재하고 코드 중 어떠한 위지에 있더라도 제일 하단에 위치하게 됨.
부가
<font> : ※지금은 사용하지 않음※ 과거에 css를 사용하지 않고 문자를 꾸며줄 때 사용된 태그로 속성에 사이즈나 컬러들을 넣어 문자를 꾸며줄 수 있었으나 그렇게 하면 의미를 가지고 있는 태그들과 그냥 디자인적 요소만을 가지고 있는 font의 속성들과 뒤엉켜 html의 용량만 커지고 코드의 효율이 떨어지고 혼란만 야기시켜 지금은 사용되고 있지 않는 태그이다. css를 쓰는 것이 의미와 디자인적 요소를 나누는 점에서도 훨씬 효과적이다!
'웹개발 > html' 카테고리의 다른 글
| 웹 접근성을 고려한 구성 (0) | 2021.08.05 |
|---|---|
| [HTML] 주요 태그 정리 (0) | 2020.07.16 |
| [HTML] tag - form (0) | 2020.07.13 |