뇨내

[HTML] Basic 기초편 본문

Web/HTML

[HTML] Basic 기초편

삐옥 2021. 12. 18. 09:00

 

 

 

 

 

 

 

 

빠른이동 ( 클릭시 해당 스크롤로 갑니다☜(ﾟヮﾟ☜))

HTML 기초

Entity

List 목록

Body 속성

p

h1~h6

hr

style

 

 

 

 

 

 

 

 

HTML 기초

 

 

 

 

 1. <!DOCTYPE html> : 해당 문서가 HTML5으로 제작한 것으로 인식

2.  <html> : 문서 전체를 감싸는 역할, 문서의 루트 태그, 컨테이너 역할

              1) <head>    2) <body>

3. <head> : 문서의 머릿말 역할

4. <body> : 브라우저에 출력된 내용의 컨테이너

5. <head> : 문저싕 내부 정보 관리, 브라우저가 이 정보를 봄

              1)<meta>     2)<title>

 

 

HTML 언어 구성 요소

1. 태그(Tag), 엘리먼트(Element)
- 예약어(명령어)를 <>로 묶어놓는 요소
- 웹 페이지의 골격 형성
a. 요소를 배치
b. 레이아웃 형성

2. 태그의 표현 방식
a. <태그명></태그명>
- <태그명>  : 시작태그
- </태그명> : 끝태그
- 자신의 영역을 표현한다. ({} 역할)
- 쌍태그

b. <태그명>, <태그명 />  ===> 둘다 똑같은 표현
- <태그명>  : 시작태그 & 끝태그 > HTML5
- <태그명 /> : 시작태그 & 끝태그 > XHTML 1.0
- <태그명></태그명> : 시작태그 & 끝태그
- 단독태그, 빈태그, Empth Tagd>

 

 

 

 

 

 

 Entity, 엔티티 

미리 정해져 있는 약속 > 약속된 표기법을 소스에 표시하면 브라우저가 실행 시 약속된 출력으로 바꿔서 표현한다.

 

- &엔티티명;
- &nbsp; ***
- &lt; (<) ***
- &gt; (>) ***
- &quot; (")
- &apos; (')
- &amp; (&)
- &copy; (©)
- &#문자코드;dd>

 

 

 

 List 목록

 

1. 순서가 있는 목록
- <ol> + <li>
- Oradered List
- List Item
       
2. 순서가 없는 목록
- <ul> + <li>
- Unoradered List
- List Item
                 
3. 용어 정의 목록
- <dl> + <dt> + <dd>

 

 

 

 

 <body> 속성

 

 

1. bgcolor
- background color
- 문서 배경색


2. background
- background image
- 문서 배경이미지

 

 <p>

 

 

 

 

 

<p>, paragraph
- 문단 태그
- 텍스트 집합
- 쌍태그 + 혼합형
- horizontal alignment : 수평 정렬
- 열거형 -> left  |  center  |  right  |  justify

 

 

 

 

 h1 ~ h6

 

<h1>  <h2>  <h3>  <h4>  <h4>  <h5>  <h6>

 

<ho>, heading 
- 제목 태그
- 출력 내용(컨텐츠)의 제목 역할
- 출력 > 글자 굵게 + 크기 조절(n)
- 제목의 중요도로 따라 태그를 선택
<h1> : 페이지에서 가장 중요한 제목
.
.
.
<h6> : 가장 덜 중요한 제목

 

 

 

 

 <hr>

 

1. size  : 선의 두께
2. width : 선의 너비
3. align : 수평 정렬
4. color : 선의 색상
5. noshade: 그림자 유무
6. title : 풍선도움말

 

 

 

 Style

<b>볼드체</b>
<i>이텔릭체</i>
<u>밑줄</u>
<strike>취소선</strike>
H<sub>2</sub>O
MC<sup>2</sup>
<big>큰 글자</big>
<small>작은 글자</small>
<tt>타자기 글자</tt>
<strong>중요한 데이터1</strong>
<em>중요한 데이터2</em>
<mark>형광펜/mark>
<cite>한줄 인용구</cite>
<blockquote>여러줄 인용구</blockquote>
<code>int a1 = 20;</code>
<samp>샘플</samp>
<address>주소</address>
<ins>추가</ins>
<del>삭제</del>
<abbr>축약</abbr>

 

 

저작자표시 비영리 변경금지

'Web > HTML' 카테고리의 다른 글

[HTML] <form> 그리고 <label> 태그  (0) 2021.12.31
[HTML-Eclipse] 개발 환경 세팅  (0) 2021.12.11
'Web/HTML' Related Articles more
Comments