-
HTML (HyperText Markup Language, 문서를 서로 연결해 주는 링크 + 표시하다 + 언어)
Web 개발 개요;
- html 기본 구조: http://infos.tistory.com/1591
- CSS 기본 구조: http://infos.tistory.com/1592
- Html script (java script) 기본구조: http://infos.tistory.com/1810* html 기본 구조
구조 요약: [html문서임을 알림] -> [html내용] -> [head],[body]
<!DOCTYPE html> <html> <head> </head> <body> </body> </html>문서가 html5 언어로 작성한 웹문서임을 알리는 정의
<!DOCTYPE html>Html문서의 시작과 끝을 나타내는 영역
<html> ... </html>웹브라우저가 문서를 해석하는 데 필요한 정보를 정의.
<head> ... </head>웹브라우저가 화면에 나타내는 내용들.
<body> ... </body>* html 예제
핵심 내용
<p class="body">text1<img src="http://a.com/a.jpg"></img> </p>정식 html 파일 구성
<!DOCTYPE html> <html> <head> <title>Noname</title> </head> <body> <p class="body">text1<img src="http://a.com/a.jpg"></img> </p> </body> </html>* 태그(Tag)
위 예제에서 p, img에 해당. '시작태그'와 '종료태그'로 나눔.
* 요소(Elements)
HTML에서 태그로 생성된 object.
태그로 무언가를 만들가 된다. 그 만들어진 것을 OOP관점에서 객체라고 본다면 그런 만들어진 객체를 여기서는 요소라고 한다.
* 속성(Attributes)
위 예제에서 class, src에 해당.
* 인수,변수(Arguments)
위 예제에서 "body", "http://a.com/a.jpg"에 해당.
* 텍스트
위 예제에서 "text1"에 해당
* 주석
화면에 보이지 않는다. 그러나 접속자에게 제공되는 HTML의 내용에는 포함된다.
Ex: <!-- 주석 내용 -->
* 태그 - html
html태그들의 시작과 끝을 알리는 루트 역할.
html태그 속에 모든 html 내용들이 포함되어야 한다.lang속성
<html lang="ko">웹브라우저에는 영향이 없으나 검색엔진에게 내용이 어떤 언어인지 알려주는 것으로 입력해두는 것을 권장한다.
* 태그 - body
사용자에게 보이는 부분이다.
* 태그 - head
body태그에 필요한 스타일시트와 자바스크립트를 제공하는데 사용.
* 태그 - 제목, 표제 (Heading, Header)
<h1> ~ <h6>의 6단계의 크기로 점점 커진다, 기본적으로 bold가 적용된다.
문서의 논리적인 구분 측면에서 중요하다.
문서들은 보통 '제목'과 '본문'으로 구성할 수 있다. '본문'의 방식은 아래 참고.
* 태그 - 본문, 줄바꿈 (p, br, hr)
단락(paragraph)태그: <p></p>
개행 태그: <br/>
수평 줄 태그: <hr/><p> 문단의 줄바꿈과 공백 있음. 시작과 끝(<p> ... </p>)을 지정해야 한다.
<br> line break(강제 줄바꿈) 문단의 줄바꿈만 있고 그 사이 추가 공백 없음.Ex: CSS의 style속성을 함께 적용시 <p style="width:500px;">로 텍스트가 500px를 넘을때 마다 줄바꿈을 해주고 문단은 한줄 공백이 되어서 구분감 있게 된다.
<hr>는 수평으로 줄을 그어준다.
* 태그 - 글자 형태
참고: Html - 글자 형태 태그
* 태그 - 물리적태그, 논리적태그
<b> 와 <strong> 태그는 둘다 화면에서는 굵은 텍스트로 표시 된다.
<b>는 bold의 약자로 굵은 텍스트로 표시.
<strong>은 강조의 의미. CSS에선 논리적태그가 많이 쓰인다.
* 태그 - 앵커(Anchor), 링크(Link)
앵커 태그는 다른 웹페이지를 이동하거나 웹페이지 내부에 특정 위치로 이동하게 만들 때 사용한다.
앵커 태그: <a>
속성: href=주소, target=열리는 방법, title=링크에 대한 툴팁 제목
표준에 따르면 href는 반드시 입력해야 한다. 그러나 비워두고 싶을 경우 href="#"로 해두는 것을 권장한다.
* 태그 - 테이블(table)
<tr>태그 table row, 행
<td>태그 table data, 행의 열, 행에 셀.
* 태그 - 프레임(frame)
여러개의 HTML 문서를 표시할때 사용, Navigation(또는 Menu)과 Contents 부분을 분리하기 위해서 사용.
ex: <frameset cols="20%,80%"> <frame src=http://a.com> <frame src="http://b.com"> </frameset><frameset>태그:
frameset속성: cols="20%,80%"는 문서를 수평으로 지정한 비율로 나눔, rows="20%,80%"는 수직으로 나눔.
<frame>태그:
frame속성: src표시될 주소 지정.
* 태그 - 아이프레임(iframe) Inline Frames
<img> 태그과 유사한 간편한 방식.
ex: <iframe src="http://a.com" frameborder="0" width="500" height="300" marginwidth="0" marginheight="0" scrolling="yes">
* 태그 - 리스트(List)
<ol> 순서 있는 리스트(Ordered Lists): 자동으로 번호 할당.
<ul> 순서 없는 리스트(Unordered Lists): 번호 없이 앞에 표기만 함.
* 태그 - 음악재생
<bgsound src="a.wma" loop="-1">
IE에서만 작동하고 화면 UI 없음.
<embed src="a.wma">
화면에 미디어플레이어 UI가 표시.
* 태그 - 오브젝트 엘리먼트(Object element)
플래시, 퀵타임 무비, 리얼 비디오 같은 개체(Object)를 삽입하는데 사용
<object type="application/x-shockwave-flash" data="a.swf" width="500" height="300">
<param name="movie" value="a.swf" />
</object>
'Html Css JavaScript' 카테고리의 다른 글
Javascript - 클립보드 복사 (0) 2018.12.22 Javascript jQuery 기본 정의 (0) 2018.09.28 javascript(Html script) 기본구조 (0) 2018.09.28 CSS태그의 문단 구분 - block-level과 inline-level (0) 2018.02.03 CSS의 기본 정리 모음 (style sheet) (0) 2018.02.03 style type text/css 예제 (0) 2018.02.03 html,CSS 예제 - div, span 차이 (0) 2018.02.03 CSS Selector 선택자 (0) 2018.01.29