HTML(Hyper Text Markup Language)
- 웹의 구조를 정의할때 사용.
Hypertext 란?
- 하이퍼링크를 통해 사용자가 다른 문서로 즉시 접근 할 수 있는 텍스트
html : 문서의 최상위(root) 요소
head : 문서 메타 데이터 요소
메타 데이터 요소 : 사진 정보 = 셔터 스피드, 노출 / 조리개정보, 장소, 시간, 크기 등등
-
문서 제목, 인코딩, 스타일, 외부파일 로딩 등
일반적으로 브라우저에 나타나지 않는 내용
body : 문서 본문 요소
- 실제 화면 구성과 관련된 내용
사용언어 : 마크업(Markup)
- 웹 브라우저에 표시되는 글과 이미지 등의 다양한 콘텐츠 표시하기 위해 "마크업" 사용
-
요소의 종류
-
<head>, <title>, <body>, <header>, <footer>, <article>, <section>, <p>, <div>, <span>, <img>, <aside>, <audio>, <canvas>, <datalist>, <details>, <embed>, <nav>, <output>, <progress>, <video>, <ul>, <ol>, <li> 등등..
-
-
요소는 "태그"를 사용해서 다른 텍스트와 구분
- "<", 태그이름, ">" = 대소문자 구분 X 아무렇게나 사용 가능
-
여는 태그와 닫는 태그를 기본적으로 사용하나, 닫는 태그가 필요 없는 것들이 있음.
-
<br> - 개행, <img> - 이미지, <hr> - 수평선
-
<a>링크
-<a href="주소">구글</a>
1. <b>굵은글씨</b>
2. <i>기울이기</i>
1,2 번은 단순 표현방법
3. <strong>강한글씨</strong>
4. <em>기울이는?</em>
3,4 번은 강조의 의미 #헤더와 **굵기** 의 차이 생각
<br>개행 - 코드에서 <pre>를 쓰지 않는 한 줄을 바꿔도 의미 없음
태그 간의 띄어 쓰기
<!--주석-->
<img src="이미지주소"
alt="보노보노"> alt는 이미지가 안나올때 표현하기 위함
<h1>H1</h1>
<p>문단</p>
<ol>
<li> 자동번호
<ul>
<li> . . . 자동 점 마크다운에선 -랑 같음
<pre> 원하는 대로 쓰고 글씨
<blockquote> 인용문 마크다운에선 > 와 같음
<div> 가상의 레이아웃을 설계하기 위해서 사용<a href="주소">구글</a>
a = 하이퍼링크를 뜻
href = 속성명 구글이라는 글자에 연결할 주소. > 구글을 누르면 입력해 놓은 주소로 이동 됨.
= "주소" = 값
구글 = 하이퍼링크로 바꿀 글자.
/a = 태그 닫기
기본적으로 띄어쓰기는 행하지 않고, 일반적으로 " 쌍따옴표를 기본적으로 사용함.
속성을 통해 태그의 부가적인 정보를 설정할 수 있음.
- 속성은 id, class, style 이 있음.
- 웹 사이트 코드를 사용자가 보게되는 웹 사이트로 바꾸는 과정
- 들여쓰기로 부모 자식 관계를 표현
HTML의 요소는 역사적으로 "블록 레벨" 요소와 "인라인" 요소로 분류.
인라인 요소는 콘텐츠의 흐름을 끊지 않고 요소를 구성하는 태그에 할당된 공간만 차지
블록 레벨 요소는 부모 요소의 전체 공간을 차지하여 "블록" 을 만듬