HTML id와 HTML class
id와 class는 스타일을 미리 정해두는 틀이라고 생각하면 편하다. 차이점은 id는 한개의 element에만 적용시킬 수 있지만 class는 여러개의 element에 동일한 class 적용이 가능하다는 점이다.
ID
id는 html파일내부의 <head>안의 <style>태그에 선언한다.
선언방법은 #IDNAME{ 내용 }으로 선언한다.
id를 적용할 element에서 속성값으로 Id="IDNAME"으로 하여 적용한다.
Class
ID와 거의 유사하게 정의되며 사용된다. 다만 선언시 classname앞에 .을 붙여서 선언한다는 점이 다르다.
Bookmarks
ID를 이용하여 북마크 기능을 구현할 수 있다.
<p><a href="#C4">Jump to Chapter 4</a></p>
<h2 id="C4">Chapter 4</h2>
<p>This chapter explains ba bla bla</p>
이런식으로 <a>태그를 이용하여 href을 이동하고 싶은 element의 아이디로 설정하면 북마크 기능이 구현된다.
참고로 href의 값을 입력할때 #을 붙여서 표기한다.
Iframe
iframe은 웹페이지 내에 웹페이지를 나타낼때 사용된다.
src속성을 통해 웹페이지의 URL을 입력해주면 된다. 다른 element들과 마찬가지로 크기조정, 테두리 설정 등이 가능하다.
HTML head
<head>는 메타데이터 즉 데이터에 대한 데이터를 포함하는 컨테이너이다.
헤드에 포함되는 element는 <title>, <style>, <meta>, <link>, <script>, <base>이다.
<title>
타이틀은 브라우저 툴바에서 제목과 즐겨 찾기에 추가 될 때 페이지 제목, 그리고 검색 엔진 결과에 페이지 제목을 표시하기 때문에 신중하게 정해야 한다.
<style>
사진과 같이 페이지에 대한 스타일을 설정할때 사용된다.
<meta>
일반적으로 문자 세트, 페이지 설명, 키워드, 문서 작성자 및 뷰포트 설정을 지정하는 데 사용된다.
<link>
링크는 현재 문서와 외부 리소스 간의 관계를 정의한다. 보통 외부 스타일 시트에 연결하는 데 사용된다.
<link rel="stylesheet" href="mystyle.css">
<script>
자바스크립트를 정의할때 사용된다.
자바스크립트의 함수 등이 여기에서 정의된다.
<base>
페이지의 적용되는 기본 URL을 정의할때 사용된다.
'개발 > Web' 카테고리의 다른 글
| [web] css 중앙정렬 방법 (0) | 2021.06.17 |
|---|---|
| [web] css 기초정리 (0) | 2021.06.17 |
| [Web] html form (0) | 2021.06.16 |
| [Web] html 기초정리 (0) | 2021.06.16 |
| [Web] dothome hosting (0) | 2021.06.16 |