소스코드내에서의 줄변경은 웹페이지에서 보여지지 않는다 따라서, 줄변경 태그를 사용하여 줄을 변경한다
<br/> : 원하는 곳에서 줄을 변경 오늘은<br>수요일
<p> : 문단태그 <p>오늘은</p> <p>수요일</p>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>줄변경 태그</title>
</head>
<body>
<p>
HTML(Hyper Text Markup Language)은 1995년에 영국에 Tim Berner's Lee가<br> 초안을 만든언어로
Web Browser에서 다른 문서, 이미지, 멀티미디어 등을<br> 검색, 연결하는 기능을 가진 문서이다.
</p>
<p>
HTML은 1.0에서부터 시작하여 2021년 현재<br/> HTML5가 표준안으로 발표되어있다.
</p>
<p>
HTML은 구조를,<br/> CSS는 통일성있는 디자인을, <br/>JavaScript은 연산과 유효성검증을 담당한다.
</p>
</body>
</html>
[ 2-1. 글자태그 ]
글자를 변경해주는 태그 ▸ HTML5에서 지원하지 않는 태그는 사용하지 않는 것이 좋다 ▸ 따라서, 지원하지 않는 태그를 사용할 때에는 CSS를 통해 처리한다 ▸ 태그를 중첩사용 할 수 있다
<b>, <strong> : 진하게<b>보다는 <strong>을 권장한다 <strong>진하게 할 내용</strong>
<big> : 글자 크기를 크게 HTML5에서 지원하지 않는다 : Warnning이 발생, 실행은 가능하다 <big>내용</big>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>글자태그</title>
</head>
<body>
b 진하게 <b>21.01.06. 수요일</b><br>
strong 진하게 <strong>21.01.06. 수요일</strong><br>
big 크게 <big>21.01.06. 수요일</big>: HTML5에서 지원하지 않음<br>
small 작게 <small>21.01.06. 수요일</small><br>
u 밑줄긋기 <u>21.01.06. 수요일</u>: HTML5에서 지원하지 않음<br>
i 이텔릭체 <i>21.01.06. 수요일</i><br>
sup 윗첨자 <sup>21.01.06. 수요일</sup> 예) 2<sup>3</sup><br>
sub 아랫첨자 <sub>21.01.06. 수요일</sub> 예) H<sub>2</sub>O<br>
center 가운데정렬 <center>21.01.06. 수요일</center><br/>
<!-- HTML태그는 중첩사용 가능하다 -->
<!-- HTML 주석은 ctrl+shift+/ 단축키로 부를 수 있다 -->
태그중첩 진하게, 밑줄 <strong><u>21.01.06. 수요일</u></strong><br>
태그중첩 크기중첩 <big><big><big><big><big><big></big>big</big></big></big></big></big><br>
mark 형광펜 효과<mark>형광펜 무슨색일까?</mark><br>
strike 취소선 <strike>21.01.06. 수요일</strike><br/>
</body>
</html>
[ 2-2. 글꼴 태그HTML5에서 지원하지 않는다 : 실행은 가능하다 ]
속성이 있는 태그 → 값을 사용자가 입력하여, 다양한 형태의 태그를 사용할 수 있다
속성 사용법 ) <태그명 속성명 = "값" 속성명 = '값' 속성명 = 값> ▷ " 쌍따옴표, ' 홀따옴표, 명시하지 않는경우 모두 사용가능하지만, "쌍따옴표를 사용하는것을 권장한다 ▷명시하지 않고 값을 그대로 사용하는 경우, 다음공백까지를 값으로 인식하기 때문에 권장하지 않는다
<font> <font size="크기" face="글꼴" color="RGB색">적용할 내용</font> size : 1~10 face : 모든글꼴 사용가능 color : 1. 영어단어 예) black, red, magenta,, 2. RGB color : 16진수를 사용하여 색을 표현 (영어단어보다는 RGB를 많이사용 : 표현색이 훨씬 다양하기 때문) 0~F #000000- 흰색 #FFFFFF- 검은색//#뒤는 문자가아닌 숫자를 의미(16진수)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>글꼴 태그</title>
</head>
<body>
일반글자 <font>font태그안의 글자</font><br/>
일반글자 <font size = "1">크기1 변경</font><br/>
일반글자 <font size = "3">크기3 변경</font><br/>
일반글자 <font size = "10">크기10 변경</font><br/>
일반글자 <font face = "휴먼편지체">글꼴 변경</font><br/>
일반글자 <font color = "red">색 변경_영어표기</font><br/>
일반글자 <font color = "#FF0000">색 변경</font><br/>
일반글자 <font color = "#00FF00">색 변경</font><br/>
일반글자 <font color = "#0000FF">색 변경</font><br/>
일반글자 <font color = "#FFFFFF">색 변경</font><br/>
일반글자 <font color = "#000000">색 변경</font><br/>
일반글자 <font color = "#6c5ce7">색 변경</font><br/>
<!-- 복합사용 -->
일반글자 <font size = "6" face = "휴먼편지체" color = "#6c5ce7">색 변경</font><br/>
</body>
</html>
<h1> 글자가 크게 그려진다 --숫자가 커질 수록 글자가 점점 작아진다-- <h6> 글자가 작게 그려진다
지원하지 않는 태그를 정의하면, 내용만 보여진다
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>글목록</title>
</head>
<body>
<h1>h1 : hello world!</h1>
<h2>h2 : hello world!</h2>
<h3>h3 : hello world!</h3>
<h4>h4 : hello world!</h4>
<h5>h5 : hello world!</h5>
<h6>h6 : hello world!</h6>
<!-- 지원하지 않는 태그를 정의하면, 내용만 보여진다. -->
<h7>h7 : hello world!</h7>
<center><h1>목차</h1></center>
<h2>1장</h2>
<h3>1장 1절 HTML ----- 1</h3>
<h3>1장 2절 HTML ----- 2</h3>
<h3>1장 3절 HTML ----- 3</h3>
<h2>2장</h2>
<h3>2장 1절 HTML ----- 4</h3>
<h3>2장 2절 HTML ----- 5</h3>
<h3>2장 3절 HTML ----- 6</h3>
<h2>3장</h2>
<h3>3장 1절 HTML ----- 7</h3>
<h3>3장 2절 HTML ----- 8</h3>
<h3>3장 3절 HTML ----- 9</h3>
</body>
</html>
[ 4. 목록 ]
<li> : 줄변경 <ul> <ol> <dl> 목록태그를 제공 사용법) 1. 순서목록 : 번호, 기호를 보여줄 때
//type 속성을 줄 수 있다 type속성에는 숫자, 영문자대소문자, 로마자 i I //type 속성에 맞는 순서가 값에 붙어서 나온다
//type : 1, a, A, i , I <ol type = "1"> <li>값</li> <li>값</li> <li>값</li> </ol>
//type : disc, circle 2. 도형목록 : 도형을 사용하여 보여줄 때 - 순서가 없는 데이터를 보여줄 때 사용 <ul type = "disc"> <li>값</li> <li>값</li> <li>값</li> </ul>
3. 설명목록 : 대상에 대해 들여쓰기로 설명을 제공할 때 <dl> <dt>제목</dt> <dd>설명</dd> </dl>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>목록태그</title>
</head>
<body>
<!-- <li>테스트</li> -->
<!-- 순서목록 -->
<ol type = "1"><!-- type : 1, a, A, i , I -->
<li>봄</li>
<li>여름</li>
<li value = "100">가을</li><!-- 중간에 숫자를 변경할 수 있다 -->
<li>겨울</li>
</ol>
<!-- 도형목록 -->
<ul type = "square"><!-- type : disc, circle -->
<li>Java SE</li>
<li>Oracle</li>
<li>Java EE</li>
<li>HTML</li>
</ol>
<!-- 설명목록 -->
<dl>
<dt>Java</dt>
<dd>완벽한 OOP언어</dd>
<dt>Oracle</dt>
<dd>대용량 데이터를 다루는 DBMS</dd>
<dt>HTML</dt>
<dd>인터넷에서 하이퍼텍스트를 사용하여 자원을 찾고, 연결하는 표준 문서</dd>
<dt></dt>
</dl>
</body>
</html>
[ 5. 선 (line) 긋기 태그 ]
: 브라우저마다 다르게 보여진다
따라서, 사용자에게 보여주지 않고 소스를 구분하는 의미적인 형태로 사용한다 (요즘은 거의 사용하지 않는다)
<hr> : 줄변경 <hr width = "넓이" size = "높이" color = "선의색"> 넓이 : 1. % : 가변길이 브라우저의 크기에 따라 변경된다 2. 숫자 : 고정길이 브라우저의 크기에 따라 변경되지 않는다
//size, color, width,,,, :global 속성: 여러 태그에서 같은 이름으로 사용하는 속성
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>선긋기</title>
</head>
<body>
A
<hr/>
B
<hr color = "FF0000"/>
<!-- width : %는 비율(유동적), 숫자는 픽셀(고정길이) -->
<hr width = "50%"/>
<hr width = "50"/>
<hr size = "15" color = "#0000FF" width = "70%"/>
</body>
</html>
