1cm

자바 프로그래밍_Day_45_HTML개요, 글자/목록 관련 태그 본문

국비지원_Java/Java Programming_1

자바 프로그래밍_Day_45_HTML개요, 글자/목록 관련 태그

dev_1cm 2021. 10. 30. 11:28
반응형

 

2021. 10. 21

 

 

     > VScode 설치

 

Visual Studio Code - Code Editing. Redefined

Visual Studio Code is a code editor redefined and optimized for building and debugging modern web and cloud applications.  Visual Studio Code is free and available on your favorite platform - Linux, macOS, and Windows.

code.visualstudio.com

 

 

 

     > HTML5 - 웹 통신 기초 - 인터넷

       -> 전 세계의 컴퓨터들이 네트워크를 통해 연결되어 정보를 공유하는데 목적을 두며(거대한 통신망), 프로토콜(통신규약 - TCP, UDP 등)을 이용하여 통신한다.

       -> 초기에는 군사용과 민간용으로 구분되었고 민간용이 지금의 인터넷이 됨.

 

 

     > HTML5 - 웹 통신 기초 - 웹(WEB)

       -> 인터넷에 연결된 컴퓨터를 통해 사람들이 정보를 공유할 수 있는 공간

       -> 인터넷의 통신망 위에서 작동하는 서비스

 

 

     > HTML5 - 웹 통신 기초 - 웹(WEB) - 역사

       -> 팀 버너스리가 하이퍼링크(Hyper Link)를 포함하는 문서의 개념 제안

       -> 월드 와이드 웹(WWW : World Wide Web)을 개발 및 배포

       -> 웹 표준 단체 W3C

       -> 웹 ≠ 인터넷 : 웹은 인터넷 상에서 이루어지는 하나의 서비스

       -> 1960 : 인터넷의 등장 -> 1990년 : 웹의 등장

 

 

     > HTML5 - 웹 통신 기초 - 웹(WEB) - 처리 과정

       -> 네트워크를 통해 서로 연결된 컴퓨터들 간에 서버(웹)와 클라이언트(pc,모바일 등 웹브라우저)의 역할을 나누고 HTML이라는 마크업(Markup) 언어를 통해 자료를 주고 받음

 

 

     > HTML5 - 웹 통신 기초 - 웹(WEB) - 특징

       -> HTTP(Hyper Text Transfer Protocol) 사용

       -> HTML(Hyper Text Markup Language)로 작성된 문서 연결

       -> 텍스트, 그래픽, 오디오, 비디오, 프로그램 파일 등 멀티미디어 서비스 제공

          -> 반응형 웹 : 웹 서버에서 제공되는 정보가 다양한 기기에 맞춰 제공되는 환경 (하나의 템플릿)

          -> 적응형 웹 : 디바이스 별로 화면을 여러 개 만들고 원하는 화면을 선택하여 볼 수 있는 것 (n개의 독립적인 템플릿)

          -> Hyper Text : 참조(Hyperlink)를 통해 문서들 간의 이동할 수 있는 것

 

 

     > HTML 개요 - HTML

       -> 웹에서 정보를 표현할 목적으로 만든 마크업 언어 (Hyper Text Markup Language)

       -> 웹 페이지를 작성하기 위해 사용되는 언어로 웹 브라우저에게 보일 문자열과 이를 감싸는 일종의 해석기호인 태그들로 이루어짐

       -> 마크업과 마크업 언어 : 마크업(태그)는 문서의 논리적인 구조를 정의하고 출력장치에 어떤 형태로 보일 것인지 지시하는 역할, 마크업 언어는 마크업(태그)을 이용하여 문서나 데이터의 구조를 정의하는 언어

 

 

     > HTML5 - 특징

       -> 웹 표준단체에서 관리(W3C)

       -> 구조적 설계 지원(시멘틱) : 헤드, 바디 등

       -> 그래픽 및 멀티미디어 기능 강화

       -> CSS3 및 Javascript 지원

       -> 다양한 API 지원

       -> 모바일 웹 지원 및 장치 접근 가능(배터리 정보, 카메라, GPS 등)

       -> 웹 브라우저가 서버와 양방향 통신 가능

       -> 인터넷이 연결되지 않은 상태에서도 애플리케이션 동작

 

 

     > HTML5 - 구성요소

       -> 태그(Tag) : '<'와 '>'로 묶인 명령어, 시작태그(<태그>)와 종료태그(</태그>)를 한 쌍으로 이용한다.

       -> 속성(Attribute) : 요소의 시작태그에만 사용 / 명령어 구체화 역할 / 여러 개의 속성을 사용할 수 있으며 속성의 구분은 공백

       -> 변수/속성값(Argument) : 속성이 가지는 값, 값 입력시 " " 혹은 ' ' 를 이용

       -> 요소(Element) : 시작태그와 종료태그로 이루어진 모든 명령어, 하나의 HTML문서는 요소들의 집합이다.

 

 

     > HTML5 - 주의사항

       -> 태그는 대/소문자를 구분하지 않으나 소문자를 권장함.

       -> 시작태그로 시작하면 반드시 종료태그로 종료

       -> 파일 확장자는 반드시 html 또는 htm으로 설정

       -> 문자의 공백은 몇 개를 입력하든 한 개만 인식하므로 공백을 추가하기 위해서 특수기호 &nbsp;를 이용해야 한다. (ntt코드)

 

 

     > <html></html>

       -> html문서 시작, 끝 표시

       -> <html lang="ko">에서 lang은 이 페이지가 어느 나라 언어로 되어 있는지를 의미하는 속성이고, "ko"는 그에 대한 속성 값(설정 언어)을 적는다.

 

 

     > <!-- -->

       -> HTML에서 사용하는 주석으로 코드 작성내용에 대해 설명하는 곳에 사용한다.

       -> 브라우저는 주석 부분을 해석하지 않고 넘어간다.

 

 

     > 글자 관련 태그 - <hn></hn>

       -> 제목을 입력할 때 사용하는 태그로 heading의 약자이다. 폰트의 크기가 태그마다 정해져 있는데, 숫자가 커질 수록 크기가 작아진다.

       -> h 뒤 숫자(n)으로 구분한다. : <hn> 제목 내용</hn> : h1~h6까지 있다.

 

 

     > 줄 바꿈과 구분 줄 - <br> / <hr>

       -> <br> : 문장을 줄 바꾸기(개행)할 때 사용 / break의 약자

       -> <hr> : 페이지에 가로로 밑줄을 만들어 줄 때 사용한다. / horizental의 약자

 

 

     > 강조 - <strong></strong> 또는 <b></b>

       -> 문장에서 문자를 강조하여 굵게 표시할 경우 사용한다.

       -> <b> : Bold의 약자

 

 

     > 강조 - <mark></mark>

       -> 배경 부분을 노란색으로 하여 형광펜 표시가 된 듯하게 출력해준다.(hightlighted)

 

 

     > 밑줄과 취소선

       -> 밑줄 - <u></u> : 밑줄(수평 줄) 긋는 태그 (underline)

       -> 취소선 - <s></s> : 취소선 긋는 태그 (strikethrough)

 

 

     > 기울임과 작은 글씨

       -> 기울임 - <em></em> 또는 <i></i> : 문자에 기울임을 주는 태그 (emphasized / italic)

       -> 작은 글씨 - <small></small> : 원 문자보다 작은 글씨로 표시하며 부가 정보 표현 시 자주 사용한다.

 

 

     > 인용 : 다른 블로그나 사이트의 글을 인용할 경우 사용

       -> <blockquote></blockquote> :  자동 들여쓰기가 되어 다른 텍스트와 구별 가능하고 안에 개행을 내포하고 있다.

       -> <q></q> : 인용 문구에 " "표시가 되고 안에 개행을 내포하고 있지 않다.

 

 

     > 첨자

       -> <sup></sup> : 태그로 감싼 내용만 위 첨자로 되는 태그 (superscript)

       -> <sub></sub> : 태그로 감싼 내용만 아래 첨자로 되는 태그 (subscript)

 

 

     > 그 외

       -> <abbr title="속성 값"></abbr> : 두 문자어와 약어에 사용하며 태그 위에 마우스를 올려 놓으면 툴팁 형태로 출력, title 속성 안에 툴 팁으로 나올 값을 지정

       -> <cite><cite> : 웹 문서나 포스트에서 참고할 때 사용하며 이텔릭으로 표시됨(브라우저마다 다를 수 있다.)

       -> <code></code> : 컴퓨터나 프로그래밍 코드를 그대로 표시하고자 할 때 사용

       -> <kbd><kbd> : 키보드 입력이나 음성 명령 같은 사용자 입력 내용을 표시하는 태그

 

 

     > 실습 코드와 출력 결과

 

     > 00_helloworld.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Hello World!!</title>
</head>
<body>
    <h1>Hello World!!</h1>
    <hr>
    안녕하세요. 만나서 반갑습니다.
</body>
</html>
 cs

 

     > 01_글자관련태그.html

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
<!DOCTYPE html><!-- html5 문서 형식 선언-->
<html lang="en"><!-- html 문서의 시작을 표시해주는 태그-->
<head>
<!-- 
    문서의 각종 정보와 제목, 문서 자체에 대해 설명, 스크립트, 스타일 시트의 링크 또는 선언을 포함하는 영역
-->
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="generator" content = "VSCode"><!-- 페이지를 생성한 프로그램 -->
    <meta name="author" content = "hong"> <!-- 페이지의 저자(작성자) -->
    <meta name="description" content = "이 페이지는 글자 관련된 태그들을 공부하는 페이지입니다."> <!-- 페이지 설명 -->
    <meta name="keywords" content="글자, 태그"> <!-- 검색어로 저장되는 키워드 등록, ','로 구분해서 여러 단어 입력 가능 -->
    <title>글자 관련 태그</title> <!-- 페이지 제목을 나타내는 태그 -->
</head>
<body>
<!--
    화면에 출력해서 보여주는 모든 정보/내용을 담는 영역
-->
<!-- 제목을 지정하는 태그 -->
<h1> h1 태그입니다. </h1>
<h2> h2 태그입니다. </h2>
<h3> h3 태그입니다. </h3>
<h4> h4 태그입니다. </h4>
<h5> h5 태그입니다. </h5>
<h6> h6 태그입니다. </h6>
 
<!-- 줄 바꿈 태그 -->
안녕하세요.<br>
저는 홍길동입니다.
<!-- 줄 바꾸면서 수평선을 넣는 태그 -->
<hr>
 
<!-- 단락을 구분하는 태그 -->
<h3>단락을 구분하는 태그</h3>
<p>첫 번째 단락입니다.</p>
<p>두 번째 단락입니다.</p>
 
<hr>
<h3>문단을 나누는 태그</h3>
<p>
    문단 영역을 나누는 태그로는 p태그와 pre태그가 있다.
    p 태그는 문단 영역을 나누는 태그이지만 한 개의 공백만          표시하며 줄바꿈 입력을
    <br> 별도의 태그로 지정해주어야 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;한다.
</p>
<pre>
        pre 태그는 여러 칸 띄우기        혹은 줄바꿈 등을 포함하여
    입력한 내용 그대로 표현하는 태그이다.
</pre>
 
<hr>
 
<h3>그 밖에 텍스트를 다루는 태그들</h3>
 
일반 글꼴
 
<br>
 
<strong>글자를 굵게 표시하는 태그</strong>
<!-- <b>글자를 굵게 표시하는 태그</b> -->
 
<br>
 
<em>글자를 기울이는 태그</em>
<!-- <i>글자를 기울이는 태그</i> -->
 
<br>
 
<!-- 인용구문을 나타내는 태그 -->
<blockquote cite="http://www.naver.com">인용구문을 나타내는 태그</blockquote>
<q cite="http://www.naver.com">인용문구를 나타내는 태그</q>
<p>참고 사이트 : <cite>http://www.naver.com</cite></p>
 
<mark style="background-color: antiquewhite;">형광펜 효과를 나타내는 태그</mark>
<br>
 
<u>글자에 밑줄을 긋는 태그</u>
<br>
 
<s>글자에 취소선을 긋는 태그</s>
<br>
 
<small>글자를 작게 표시하는 태그</small>
<br>
 
기본글자에 <sub>아래 첨자</sub>를 나타내는 태그와 <sup>위 첨자</sup>를 나타내는 태그이다.
<br>
 
<addr title="Internet of Things(사물 인터넷)">IoT</addr>란 각종 사물에 센서와 통신 기능을 내장해 인터넷에 연결한 기술이다.
<br>
 
<pre>
    <code>
        function add(num1, num2){
            var sum = num1 + num2;
 
            console.log(sum);
        }
    </code>
</pre>
 
<p>취소하려면 <kbd>ctrl</kbd> + <kbd>x</kbd>를 입력하세요.</p>
 
<hr>
<h3>글자 관련 태그 응용</h3>
<p>
    태그들은 행당 태그 내에서 중첩으로 사용이 가능하다.
    <strong>굵은</strong> 글자를 사용할 수 있고,<strong><em>기울이거나</em></strong>,<br>
    <s>취소선</s>을 넣는 등 다양하게 사용할 수 있다.
</p>
 
<br><br><br><br><br>
<br><br><br><br><br>
</body>
</html><!-- html 문서의 끝을 표시해주는 태그 -->
 cs

 

 

     > 목록 관련 태그 - <ul></ul>

       -> 순서가 필요하지 않은 목록을 만들 때 사용.

       -> 리스트 앞에 특정 모약 출력 (기본 값 : ・), 해당 모양은 CSS를 이용해 수정이 가능하다.

 

 

     > 목록 관련 태그 - <ol></ol>

       -> 순서가 있는 목록을 만들 때 사용

       -> 속성으로 문자(A, B, C, .../a, b, c, ...), 숫자(1, 2, 3,...), 로마자(I, II, III, ... /ⅰ, ⅱ, ⅲ, ...) 설정

 

       -> <ol type="설명문자" start="시작순서"></ol>

          -> type : 순서 형식을 정하는 것 (a, A, 1, ⅰ, I) / Start : 시작 순서

 

 

     > 목록 관련 태그 - <dl></dl>

       -> 용어나 문장에 대한 정의 (definition) 리스트로 자동으로 들여쓰기가 됨

       -> <dt></dt> : 정의 제목 (definition title)

       -> <dd></dd> : 정의 내용 (definition data)

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>목록 관련 태그들</title>
</head>
<body>
    <h1>목록 관련 태그들</h1>
    <h2>순서 없는 목록 태그</h2>
    <h3>화면 구현 수업 내용</h3>
    <ul>
        <li>HTML5</li>
        <li>CSS</li>
        <li>JavaScript</li>
        <li>jQuery</li>
    </ul>
 
    <h2>순서 있는 목록 태그</h2>
    <h3>화면 구현 수업 내용</h3>
    <ol type="I" reversed start="6">
        <li>HTML5</li>
        <li>CSS</li>
        <li>JavaScript</li>
        <li>jQuery</li>
    </ol>
 
    <h2>설명 목록 태그</h2>
    <dl>
        <dt>이 곳은 목록의 제목을 적는 곳입니다.</dt>
        <dd>이곳은 목록에 대한 설명을 적는 곳입니다.</dd>
        <dd>여러 줄을 작성할 수도 있으며</dd>
        <dt>또 다른 제목을 적어 새로운 목록을 만들 수도 있습니다.</dt>
        <dd>새로운 목록도 설명을 작성할 수 있으며</dd>
        <dd>역시 여러 줄을 작성할 수도 있습니다.</dd>
    </dl>
    
</body>
</html>
 cs

 

 

 

 

     > 연습문제_강사님 방법

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>연습문제 1</title>
</head>
<body>
    <h1>자바(Java) 학습내용</h1>
    <h3>담당 강사 : 문인수</h3>
    <p>이메일 : ismoon@iei.or.kr</p>
 
    <hr>
 
    <ul>
        <li>프로그래밍 언어</li>
        <ul>
            <li><s>Java</s></li>
        </ul>
        <li>데이터베이스</li>
        <ul>
            <li><s>Oracle</s></li>
        </ul>
        <li>화면 구현</li>
        <ol>
            <li><mark>HTML5</mark></li>
            <li>CSS3</li>
            <li>JavaScript</li>
            <li>jQuery</li>
        </ol>
        <li>서버 개발 기술</li>
        <ol type="i">
            <li><s>JDBC</s></li>
            <li>Servlet</li>
            <li>JSP</li>
            <li>AJAX</li>
        </ol>
        <li>프레임워크</li>
        <ol type="a">
            <li>MyBatis</li>
            <li><strong>Spring</strong></li>
        </ol>
    </ul>
</body>
</html>
 cs

 

 

 

 

     > 연습문제_내가 한 방법

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>연습문제 1</title>
</head>
<body>
    <h1>자바(Java) 학습내용</h1>
    <h3>담당 강사 : 문인수</h3>
    이메일 : ismoon@iei.or.kr
    <hr>
    <ul>
        <li>프로그래밍 언어</li>
        <ul>
            <li><s>java</s></li>
        </ul>
        <li>데이터베이스</li>
        <ul>
            <li><s>Oracle</s></li>
        </ul>
        <li>화면 구현</li>
        <ol type ="1">
            <li><mark>HTML5</mark></li>
            <li>CSS3</li>
            <li>JavaScript</li>
            <li>JQuery</li>
        </ol>     
        <li>서버 개발 기술</li>
        <ol type ="i">
            <li><s>JDBC</s></li>
            <li>Servlet</li>
            <li>JSP</li>
            <li>AJAX</li>
        </ol>    
        <li>프레임워크</li>    
        <ol type="a">
            <li>MyBatis</li>
            <li><strong>Spring</strong></li>
        </ol>    
    </ul>
</body>
</html>
 cs

 

 

 

반응형

'국비지원_Java > Java Programming_1' 카테고리의 다른 글

자바 프로그래밍_Day_47_멀티미디어, 하이퍼링크 관련 태그  (0) 2021.10.30
자바 프로그래밍_Day_46_표, 영역관련태그  (0) 2021.10.30
자바 프로그래밍_Day_44_SQL응용 평가  (0) 2021.10.26
자바 프로그래밍_Day_43_문제풀이  (0) 2021.10.26
자바 프로그래밍_Day_42_CURSOR, TRIGGER  (0) 2021.10.26
'국비지원_Java/Java Programming_1' Related Articles more
Comments