2019. 4. 22. 20:38ㆍHTML
--------------------------------------------------HTML-------------------------------------------
HTML
- Hyper Text Markup Language
* HyperText : 문서의 링크를 클릭하면 연결된 다른 문서로 이동할 수 있는 기능을 제공하는 텍스트
* Markup : 문서의 어느 부분이 제목이고, 어느 부분이 본문이고, 어느 부분이 링크인지를
표시하기 위해서 특별한 기호(마크업)이 사용된다.
- 웹에서 문서간에 빠르게 이동할 수 있는 문거를 만들 때 사용되는 언어가 HTML이다.
태그
- 태그는 '<'와 '>'로 구성된다.
*<title> <body> <img> <table> <ul> ...
- 태그의 이름은 소문자로 적는다.
- 태그는 여는 태그와 닫는 태그가 쌍으로 구성된다.
* 여는 태그 : <table> <body> <head>
* 닫는 태그 : </table> </body> </head>
- 여는 태그와 닫는 태그 사이에는 컨텐츠나 다른 태그가 포함될 수 있다.
* <h1>htnl태그 연습</h1>
* <p>html은 웹 문서를 만들 때 사용되는 언어다.</p>
* <p><span>1위</span> 방탄소년단</p>
- 태그는 속성을 가질 수 있다.
* 속성은 속성명 = "속성값"으로 구성된다.
* <img src = "images/cat.jpg" width="300" height="200", alt="예쁜 고양이">
- 태그간의 포함관계를 정확하게 표현해야 된다.
* <div><p>태그안에 다른 태그가 포함될 때는 여는 태그와 닫는 태그의 쌍을 맞춰야 한다.</p></div>
html문서의 기본 구조
<!doctype html>
<html>
<head>
<meta charset="utf=8" />
<title>처음으로 작성하는 html 문서</title>
</head>
<body>
<h1>문서의 제목으로 포함한다</h1>
<p>내용을 포함한다.</p>
</body>
<html>
* <!doctype html> : 현재 문서가 html5 작성규칙에 맞춰서 작성된 웹 문서임을 나타낸가.
* <html> ~ </html> : 웹 문서의 시작과 끝을 나타낸다.
html 속성에 lang = "ko" 쓰면 한글번역 및 한국어만 검색 기능에 포함된다.
* <head> ~ </head> : 웹브라우져가 웹 문서를 해석하는데 필요한 정보를 입력하는 부분이다.
이 부분에 있는 정보는 실제 문서내용이 아니기 때문에 화면에 표시되지 않는다.
* <body> ~ <body> : 실제로 웹 브라우져에 표시되는 내용을 포함한다.
우리가 배우는 거의 대부분의 태그는 <body> 태그 안에 들어간다.
* <!-- ~ --> : 주석이다. ctrl + shifr + / 주석이 만들어진다.
브라우저 실행 순서
html 문서 -> 파싱(해석) -> Document 객체 생성 -> 태그마다 엘리먼트객체 생성, 조립 -> 렌더링 -> 화면에 출력
예시)
* <h1> ~ <h6> 까지 있는데 <h>태그는 제목을 표현하는 태그이다.
예시)
* <p> 문서의 본문을 작성하는 태그이다.
* <br/> 줄바꿈을 할 때 사용된다.
* <hr/> 태그는 단락의 주제가 바뀔때 사용된다, 수평줄을 만든다.
예시)
///////////////////////////////////리스트 만들기
1. 순서가 있는 목록 만들기
ol(ordered list) 태그 : 순서있는 목록을 만든다.
li(list item) 태그 : 목록의 아이템을 만든다.
2. 순서없는 목록 만들기
ul(unordered list) : 순서없는 목록을 만든다
li(list item) : 목록의 아이템을 만든다.
3. 젠코딩 방법 : h3{주요뉴스}+ul>li*4+tap -- 젠코딩
-> <h3>주요뉴스</h3>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
이렇게 만들어진다.
4. 정의 목록 만들기
dl(definition list) : 용어를 설명하는 목록을 만든다.
dt(definition term) : 용어의 제목을 만든다.
dd(definition description) : 용어를 설명을 만든다.
예시)
예시2) 중첩된 목록 만들기
//////////////////////////////////표만들기 (table)
table 태그 : 표를 만든다.
<table 속성> </table>
* border : 테두리의 두께
tr (table row) : 표의 행을 만든다, 세로 줄수
th (table header) : 표의 제목칸을 만든다, (제목줄)
td (table data) : 표의 데이터 칸을 만든다, 가로 칸 (내용줄)
예시)
