[ Web & MarkUp ] HTML이란?
∇ HTML이란??
목 차
1. HTML 이란?
2. HTML 구조.
3. HTML Block and Inline Elements
4. HTML 태크 종류.
∇ HTML 이란?
"HTML [ Hypertext Markup Language , 하이퍼텍스트 마크업 언어 ]은 프로그래밍 언어는 아니고,
( html로 코딩한다 하면 개발자 긁기 SaP 가능)
우리가 웹 환경에서 보는 웹페이지가 어떻게 구조화되어 있는지 브라우저에게 인식시키는 언어,
즉 ! 웹문서 형태를 작성하는 언어입니다.
https://www.w3schools.com/html/
W3Schools.com
W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.
www.w3schools.com
∇ HTML의 구조.
★ HTML의 계층적 구조 : Tag -> Element - > Document
- 시작 태그<>와 끝 태그</>가 모여서 Element를 만들고,
다시 Element가 모여서 Document를 만들어냅니다.
- Doucument : 문서 전체를 대표하는 객체, 지금 우리가 보고 있는 페이지에 나와있는 코드 전체.
- Element : 각 컨텐츠의 여러 부분들을 감싸고 마크업하는 레이아웃.
- element는 또 다시 계층적 구조를 가집니다.
( element 안에 또다른 element )
- Tag : Element의 종류를 정의합니다.
웹 상에서 다른 페이지로 이동하게 하는 하이퍼링크 내용들을 생성하거나,
단어를 강조하는 등의 역할을 수행합니다.
- 속성(Attribute) : Tags를 보조하는 명령어 입니다.
시작 태그 속에서 해당 태그의 기능을 정의해줍니다.
태그의 문법 명령어가 다루지 못하는 명령들을 보조적으로 담당합니다.
○ 속성명 = 속성값으로 사용
ex)
- 속성명(Attribute Names) : style
- 속성값(Attribute Values) : "color:blue", "color:red", "font-size:30px"
<p style="color:blue;">파란색 글씨</p>
<p style="color:red;">빨간색 글씨</p>
<p style="font-size:30px;">글씨 크기 조절</p>
○ id, class, attr
- id : element의 고유한 id 지정, 유일한 값 입니다.
- class : element에 대해 하나 이상의 class 이름 지정, 여러개 사용이 가능합니다.
- attr: id, class를 제외한 나머지 속성 값들.
- Text : 시작 태그와 끝 태그 사이에 있는 문자열.
○ 웹 스크래핑이나 크롤링에서 이 값을 토대로 데이터를 가져오게 됩니다.
∇ HTML Block and Inline Elements
∂ Block-level Elements.
- 항상 새로운 줄로 시작하고, 브라우저는 자동으로 요소 앞뒤에 약간의 공백을 추가합니다.
- 전체 너비를 차지, 즉 양옆으로 최대한 늘어납니다.
- 주로 <p> <div>
∂ Inline ELements
- 새로운 줄로 시작되지 않습니다. (같은 줄에서 계속 )
- 필요한 넓이만 차지.
- ex : <span>
∇ HTML 태그의 종류.
https://stajun.tistory.com/entry/HTML-%ED%83%9C%EA%B7%B8-%EC%A0%95%EB%A6%AC
[HTML ] 태그 정리
HTML이란? HTML은 하이퍼텍스트 마크업 언어(HyperText Markup Language)라는 의미의 웹 페이지를 위한 지배적인 마크업 언어 웹 페이지 콘텐츠 안의 꺾쇠 괄호에 둘러싸인 "태그"로 되어있는 HTML 요소 형
stajun.tistory.com
∇ 기본 구조 태그.
<html> : HTML 문서의 루트 요소 / html로 작성되어 있다는 것을 알려줌.
<head> : 문서의 머리말 파트 / 문서의 메타데이터를 포함.
<body> : 문서의 본문 내용
<!DOCTYPE html>
<html>
<head>
<title>페이지 제목</title>
</head>
<body>
<h1>안녕하세요!</h1>
<p>이것은 기본 HTML 구조입니다.</p>
</body>
</html>
∇ 텍스트 관련 태그
<p> : 각 단락을 정의합니다.
HTML에서는 엔터로 줄바꿈이 되지 않지만, 이 태그로 단락이 구분됨. 한줄의 문자열을 출력해주고,
p태그가 종료되면 단락으로 구분됩니다.
<p>이것은 첫 번째 단락입니다.</p>
<p>이것은 두 번째 단락입니다.</p>
<br> : 줄바꿈
안녕하세요.<br>
반갑습니다.
<h1> ~<h6> : 제목 태그, 숫자가 작을 수록 굵은 글씨.
<h1>가장 큰 제목</h1>
<h2>두 번째로 큰 제목</h2>
<h3>세 번째로 큰 제목</h3>
∇ 구조화 태그.
<div> : 블록 레벨 컨테이너 / 레이아웃을 나타냅니다.
<div style="background-color: lightblue;">
<p>이 텍스트는 파란 배경의 div 안에 있습니다.</p>
</div>
<span> : 한 블럭의 문자열 출력 /인라인 컨테이너
<p>이 문장에서 <span style="color: red;">빨간색</span> 단어가 있습니다.</p>
∇ 멀티 미디어 태그
<img> : 이미지 삽입.
<img src="image.jpg" alt="설명 텍스트" width="300" height="200">
∇ 폼 관련 태그
<input> : 입력 필드 /입력창을 만듭니다.
<input type="text" placeholder="이름을 입력하세요">
<button> : 버튼 만들기
<button type="button">클릭하세요</button>
∇ 링크 태그.
<a> : 클릭하면 링크로 이동됩니다. / 하이퍼링크
<a href="https://www.naver.com/" target="_blank">네이버로 이동</a>
<iframe> : 인라인 프레임. / 링크로 이동이 아닌, 현재 페이지를 링크 페이지로 출력
<iframe src="https://www.youtube.com/embed/dQw4w9WgXcQ" width="560" height="315"></iframe>
∇ 리스트 태그.
<ul> : 번호가 없는 list / 순서 없는 목록.
<ol> : 번호가 있는 list / 순서 있는 목록.
<li> : ul 태그나 ol태그 안에서 사용되는 태그, list 문자열 출력.
<ul>
<li>사과</li>
<li>바나나</li>
<li>오렌지</li>
</ul>
<ol>
<li>첫 번째 항목</li>
<li>두 번째 항목</li>
<li>세 번째 항목</li>
</ol>
∇ 테이블 태그.
<table> : 테이블
<tr> : 테이블 행
<td> : 테이블 셀
<table border="1">
<tr>
<td>1행 1열</td>
<td>1행 2열</td>
</tr>
<tr>
<td>2행 1열</td>
<td>2행 2열</td>
</tr>
</table><table>
<caption>제목</caption>
<thead>
<tr>
<th>파리바게트</th>
<th>뚜레주르</th>
</tr>
</thead>
<tbody>
<tr>
<td>모닝빵</td>
<td>감자빵</td>
</tr>
<tr>
<td>고로케</td>
<td>식빵</td>
</tr>
</tbody>
</table>
