HTML
HyperText : 하이퍼텍스트를 가장 중요한 특징으로 하는
Markup : 마크업이라는 형식을 가진
Language : 컴퓨터 프로그래밍 언어
태그(TAG) : 일상생활의 태그는 옷을 설명함. HTML에서의 태그는 문법을 설명함.
오늘날의 HTML은 약 150개가 넘는 태그가 존재.
전 세계에 있는 웹페이지들이 몇 종류의 태그로 이루어져 있는지를 보여주고 있는 사이트가 있다.
https://advancedwebranking.com/html/
################ 기본뼈대 ################
최 고위층 태그는 html태그이다.
그 태그위에는 관용적으로 "이 페이지는 html이다"를 알리기 위해 : <!doctype html>
웹브라우저야! 문서규칙 UTF-8형식으로 열으렴 : <meta charset="utf-8">
인터넷창 제목 넣기 : <title> 인터넷 창 제목 </title> *검색엔진이 웹페이지 분석할때 가장 중요하게 생각하는 태그!
본문을 설명하는 머리는 head태그로 묶는다. <head> 본문설명 </head>
본문은 body태그로 묶는다. <body> 본문 </body>
################ 글씨 굵게 하기 ################
<storng>진하게 하고자 하는 글씨</strong>
################ 밑줄 ################
<u>밑줄 치고자 하는 글씨</u>
################ 제목처럼 굵게 표시 + 줄바꿈 ################
<h1>굵게 + 줄바꿈하고자 하는 글씨</h1> *h1 ~ h6 (h1이 제일 크고 h6으로 갈수록 작아진다.)
################ 줄바꿈1 - 줄바꿈(br) ; a forced line-break ################
<br> (닫을 필요가 없음, 쓰는 만큼 단순 줄바꿈, 여러번 쓸경우)
################ 줄바꿈2 - 단락(p)################
<p>문단</p> (*css 사용해서 간격조정할 경우 쓰임. <p style="margin-top:45px;"> p 태그의 위쪽에 45px 만큼의 여백(margin)이 생깁니다. )
################ 그림 넣기(속성, attribute) ################
<img src="이미지주소(웹 or 컴퓨터 내위치)" height="높이" width="비율(%) or 폭" alt="이미지가 깨졌을 경우 나오는 값" title="이미지마우스 오버롤시 나오는 도움말">
################ 링크 거는 법 : ################
</a href="주소(url)">링크걸고자 하는 글씨</a> *anchor(닻)의 첫글자 a. hypertext의 h와 reference참조의 ref
링크클릭시 새창에서 페이지 열리게 하는 속성 : a href 뒤에 target="_blank" 넣기 ( 링크 뒤에 와도 상관없다.)
링크가 어떤 내용 담고 있는지 툴팁(마우스오버롤시 설명창)보여주는 기능 : a href 뒤에 title="html5 specification" 넣기
'HTML & CSS' 카테고리의 다른 글
| 표 - table (0) | 2019.06.27 |
|---|---|
| 부록 : 코드의 힘 (0) | 2019.06.23 |
| 서버와 클라이언트 (0) | 2019.06.21 |
| 부모 자식과 목록 (0) | 2019.06.19 |
| HTML 코딩 실습 환경 준비 (0) | 2019.06.19 |
