HTML - Tag, Attribute(1)
https://developer.mozilla.org/ko/docs/Web/HTML/Element
HTML 요소 참고서 - HTML: Hypertext Markup Language | MDN
메타데이터는 스타일, 스크립트, 각종 소프트웨어(검색 엔진, 브라우저 등)의 탐색 및 렌더링을 도와줄 데이터 등 페이지에 대한 정보를 가집니다. 스타일과 스크립트 메타데이터는 페이지 안에
developer.mozilla.org
HTML
HTML(Hyper Text Markup Language)는 웹 페이지의 구조를 만드는 언어로 HTML에서는 다양한 태그를 사용해 웹페이지의 요소를 정의한다. 태그는 "< >"로 둘러쌓인 키워드를 구성되어 어디서부터 어디까지의 구간이 tag인지 지정할 수 있다.
Tag
0. <html>
- HTML 문서의 시작과 끝을 나타낸다.
<!DOCTYPE html>
<name>AR</name>
<hoby>웨이크보드, 스노우보드</hoby>
</html>
1. <head>
- 웹 페이지의 머리글 부분을 나타내며 메타정보, 스타일, 스크립트 등을 포함할 수 있다.
<!DOCTYPE html>
<html>
<head>
<title>AR_WebSite</title>
</head>
<body>
<h1>Hello</h1>
</body>
</html>
2. <title>
- 웹 페이지의 제목을 지정한다.
<title>AR삽질러</title>
3. <body>
- 웹 페이지의 본문을 나타내며 페이지의 주요 콘텐츠가 위치한다.
<!DOCTYPE html>
<html>
<body>
<h1>Hello</h1>
</body>
</html>
4. <h1> <h2> <h3> <h4> <h5> <h6>
- 헤더 태그로 6단계의 크기를 나타낼 수 있다. 가장큰 <h1> 부터 가장작은 <h6> 까지
<h1>h1</h1>
<h2>h2</h2>
<h3>h3</h3>
<h4>h4</h4>
<h5>h5</h5>
<h6>h6</h6>
5. <p>
- 단락을 만들어 구분짓는다.
<p>일반적인 단락</p>
<p class="highlight">이것은 스타일이 적용된 단락</p>
6. <a>
- anchor를 뜻하며 하이퍼링크를 생성한다.
<a href="http://google.com" target="_blank">Go to google.com</a>
7. <img>
- 이미지를 삽입한다.
<img src="\다운로드.png" />
8. <ul> <ol> <li>
- 목록을 만든다.
- ul : 순서가 없는 목록
- ol : 순서가 있는 목록
- li : 목록의 항목
<ul>
<li>python</li>
<li>ruby</li>
<li>rails</li>
<li>java</li>
<li>C</li>
<li>Spring</li>
</ul>
<ol>
<li>python</li>
<li>ruby</li>
<li>rails</li>
<li>java</li>
<li>C</li>
<li>Spring</li>
</ol>
9. <div> <span>
- 컨테이너 태그로 <div>는 블록 요소, <span<은 인라인 요소를 만든다.
10. <table> <tr> <td>
- 표를 만든다.
- table : 표의 시작
- tr : 행
- td : 셀
Attributes
HTML의 속성은 태그의 기능을 확장하고 웹 페이지의 각 요소를 더 구체적으로 제어할 수 있게한다.
HTML속성은 태그 내에 위치하고 이름과 값의 쌍으로 구성된다.
<a href="https://arang95.tistory.com/">AR삽질러</a>href = 속성의 이름, https://arang95.tistory.com/ = 값
0. style
- 속성을 사용하여 태그에 인라인 스타일을 적용할 수 있다.
<style>
.highlight {
color: red;
font-weight: bold;
}
</style>
1. src, alt
src : 이미지의 URL을 지정하는데 사용된다.
alt : 이미지가 로드되지 않을 때 대신 표시되는 대체 텍스트를 지정한다.
<img src="https://assets.nflxext.com/en_us/layout/ecweb/netflix-app-icon_152.jpg" alt="예제 이미지">
2. id, class
id : 웹 페이지 내의 특정 요소를 식별하는데 사용된다.
class : 요소에 스타일을 적용하거나 JavaScript를 연결할때 사용된다.
3. href
- 링크의 대상 URL을 지정한다. 주로 <a>태그와 사용되며 URL을 클릭시 페이지의 저장된 주소로 이동된다.