HTML(HyperText(link) Markup Language)
- 하이퍼텍스트를 가장 중요한 특징으로 하는 마크업 형식을 가진 컴퓨터 프로그래밍 언어
- 웹페이지의 틀을 만드는 언어
- Public Domain(저작권 무료)
How to use HTML?
- HTML은 tag들의 집합
- Tag : 부등호 (< >)로 묶인 HTML의 기본 구성 요소
- html 확장자 사용
- Tree 구조
ex) <!doctype html>
<html>
<head>
<title></title>
</head>
<body>
</body>
</html>
- title : page title.
* Self closing tag는 닫기 태그가 없다. (<img src = “gggg”/>)(대부분 tag들은 >닫아 주어야 한다.)
개발자 약속
- <!doctype html> - Document type declaration(문서형식선언), 관용적으로 개발자 약속(html이라는 소스라는 의미)
- <html></html> - 최고위층 태그, 문서의 처음과 끝에 작성(개발자 약속)
- <head></head> - <body> 태그를 설명하는 내용(개발자 약속)
- <title> 웹페이지 제목 – 웹페이지의 제목을 지정할 수 있는 기능.
- <meta charset = “utf-8”> - 컴퓨터는 모든 정보를 0 or 1로 저장하기 때문에 한글을 읽을 수 없음. 그래서 UTF-8이라는 방식으로 저장해서 한글을 볼 수 있음. 웹페이지가 어떤 형식을 작성했는지 알려주는 태그.
- <body></body> - 본문 내용을 작성(개발자 약속)
태그 설명(웹을 지배하는 문법 – tag)(google에서 웹페이지 분석 data (www.advancedwebranking.com/html/)
- <h1>content</h1> - 글자 크기를 조정해 주는 기능, 제목을 나타내는 tag.
*h1 ~ h6까지 있으며 h1이 글자 크기가 가장 크다.
- <strong> - 글씨를 굵게 해서 강조
*<strong> </strong>
- <u> - 글씨 밑에 밑줄을 긋는 기능
*<u> </u>
- <div> division – 내용을 구분해 주는 기능
- <span> span – 내용을 구분해 주는 기능
*div vs span 차이점은
*div : block 타입으로 한 줄을 전부 사용(div는 한줄을 전부 다 사용하기 때문에 다음 div는 줄바꿈이 나타남)
*span : 콘텐츠 크기만큼 공간을 사용
- <img> image – 사진이나 그림을 넣을 때 사용하는 기능
*<img src = " " >
*src(source)는 img 태그의 속성 – 이미지 주소를 넣어야 함.
*unsplash.com는 저작권 상관 받지 않고 사용 가능함.
*width, height는 사진의 크기를 설정(width = “100%”는 자동으로 크기 조절)
- <a> Link – 콘텐츠의 link를 넣는 Tag(Hyper Text를 의미한다)(anchor(닻)의 약자)
*<a href =
*href(hyper text reference)는 a 태그의 속성 – link 주소를 넣어야 함, 파일 위치도 가능함.
*target = “_blank”를 이용하면 새 창으로 링크 주소를 열 수 있다.
*tilte = “html5 speicification”를 이용하면, link에 마우스 올렸을 때, 어떤 링크인지 알려주는 속성.
- <p></p>문단 – 문단을 나누는 태그
- <br> 줄바꿈 – 콘텐츠 내용의 줄바꿈을 할 때 사용, 시각적인 의미만 있기 때문에, contents를 감싸고 있는 형태는 아님.
- <table> - 태그로 감싸서 적용
*<tr> - table raw 행을 나눌 때 사용
*<td>내용</td> - 내용을 넣을 부분에 사용
*</tr> - 행을 구분에 사용
*</table>
*border = “1”은 표의 테두리를 넣는 속성
부모 – 자식 태그
<parent>(부모태그)
<child></child>(자식태그)
</parent>
*부모 태그 내에 있는 태그를 자식 태그라고 함.
- ol/ul/li – list(목차)를 삽입하는 방식
- ol(ordered list) - li태그에 부모로 자주 사용되는 태그이며, li와 li 태그가 연속 될 때, 구분을 해주는 역할을 한다. (번호가 있는 방식)
- ul(unordered list) - li태그에 부모로 자주 사용되는 태그이며, li와 li 태그가 연속 될 때, 구분을 해주는 역할을 한다. (번호가 없는 방식)
- li(list) - ol 태그와 ul 태그에 자식 태그로 자주 사용되며, 목차를 형성.
가장 많이 사용되는 태그 List
'Coding > HTML' 카테고리의 다른 글
| HTML - upload (1) | 2020.05.07 |
|---|---|
| HTML - 삽입 및 전송 (1) | 2020.05.07 |
