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
116
117
118
119
 
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
        
        
        <!-- Ex09.htm -->
        
        <!-- 
        
        - 목록
        1. 순서가 있는 목록
            - < ol>, <li>
            - Ordered List
            - List Item
            - 숫자
            - type : 1, A, a, I, i
        
        2. 순서가 없는 목록
            - <ul>, <li>
            - Unordered List
            - List Item
            - 불릿(Bullet)
            - type : disc, circle, square
            
        3. 용어 정의 목록
            - <dl>, <dt>, <dd>
                
        -->
        
        <h2> 자바 과정 커리큘럼 </h2>
        <ol type="A">
            <li>java</li>
            <ol>
                <li>기본 문법</li>
                <li>클래스</li>
                <li>상속/인터페이스</li>
            </ol>
            <li>oracle</li>
            <li>JDBC</li>
        </ol>
        
        
        <h2> 자바 과정 커리큘럼 </h2>
        <ul type ="square">
            <li>java</li>
            <li>oracle</li>
            <li>JDBC</li>
        </ul>
        
        
        <h2>자바 용어</h2>
        <dl>
            <dt>클래스</dt>
            <dd>클래스는 어쩌고저쩌고~클래스는 어쩌고저쩌고~클래스는 어쩌고저쩌고~
            클래스는 어쩌고저쩌고~클래스는 어쩌고저쩌고~클래스는 어쩌고저쩌고~
            클래스는 어쩌고저쩌고~클래스는 어쩌고저쩌고~클래스는 어쩌고저쩌고~</dd>
            <dt>메소드</dt>
            <dd>메소는 어쩌고 저쩌고~~메소는 어쩌고 저쩌고~~메소는 어쩌고 저쩌고~~
            메소는 어쩌고 저쩌고~~메소는 어쩌고 저쩌고~~메소는 어쩌고 저쩌고~~
            메소는 어쩌고 저쩌고~~메소는 어쩌고 저쩌고~~메소는 어쩌고 저쩌고~~</dd>
            <dt>상속</dt>
            <dd>상속은 어쩌고저쩌고~~상속은 어쩌고저쩌고~~상속은 어쩌고저쩌고~~
            상속은 어쩌고저쩌고~~상속은 어쩌고저쩌고~~상속은 어쩌고저쩌고~~
            상속은 어쩌고저쩌고~~상속은 어쩌고저쩌고~~상속은 어쩌고저쩌고~~</dd>
        </dl>
        
        
        
        
        
        <hr />
        <!-- 
            
            프레임 
            - frameset(x)
            - iframe(o)
            - 1개의 브라우저에서 1개 이상의 문서를 동시에 출력
            - 페이지 재사용(******)
            - 페이지 로딩 속도 향상(******)                                
                                
        -->
        
        
        <iframe src="Ex08.htm" width="500" height="200" frameborder="0" scrolling="no"></iframe>
        
        
        
        
        <hr />
        
        <table border="1" width="800">
            <tr>
                <td width="150">
                    <ul>
                        <li><a href="http://www.yes24.com" target="iframe1">예스24</a></li>
                        <li><a href="http://www.daum.net" target="iframe1">다음</a></li>
                        <li><a href="http://www.interpark.com" target="iframe1">인터파크</a></li>
                    </ul>
                </td>
                <td width="650">
                    <iframe name="iframe1" width="640" height="300"></iframe>
                </td>
            </tr>        
        </table>
        
        
        
            
        
        
        
</body>
</html>
 
csahr


1
2
3
4
5
6
7
8
9
10
11
12
13
14
 
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<body>
    수신된 데이터 : <%= request.getParameter("txtData") %>
</body>
</html>
 
cs


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

테이블 만들기 예제 / 셀병합 <colspan>, <rowspan>  (0) 2016.01.22
테이블 태그 - 테이블<table>, 행<tr>, 셀<td>, 제목 셀<th>  (0) 2016.01.22
이미지태그<img /> / 대체 문자열 alt=""  (0) 2016.01.22
의미를 나타내는 태그 / 하이퍼링크 <a>  (0) 2016.01.22
제목태그<h>/ 수평선 <hr> / 문단태그 <p>/ 영역-블럭태그<div>, 인라인태그<span>  (0) 2016.01.22


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
116
117
118
119
 
 
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
 
    <h2>회원 목록</h2>
    
    <table border="1" width="600">
        <tr bgcolor="#CDCDCD">
            <th width="50">번호</th>
            <th width="70">이름</th>
            <th width="50">나이</th>
            <th width="130">전화</th>
            <th width="300">주소</th>
        </tr>
        <tr>
            <td align="center">1</td>
            <td align="center">홍길동</td>
            <td align="center">20</td>
            <td align="center">010-3333-4444</td>
            <td>서울시 강남구 역삼동 OO아파트</td>
        </tr>
        <tr>
            <td align="center">1</td>
            <td align="center">홍길동</td>
            <td align="center">20</td>
            <td align="center">010-3333-4444</td>
            <td>서울시 강남구</td>
        </tr>
        <tr>
            <td align="center">1</td>
            <td align="center">홍길동</td>
            <td align="center">20</td>
            <td align="center">010-3333-4444</td>
            <td>서울시 강남구</td>
        </tr>
        <tr>
            <td align="center">1</td>
            <td align="center">홍길동</td>
            <td align="center">20</td>
            <td align="center">010-3333-4444</td>
            <td>서울시 강남구</td>
        </tr>
        <tr>
            <td align="center">1</td>
            <td align="center">홍길동</td>
            <td align="center">20</td>
            <td align="center">010-3333-4444</td>
            <td>서울시 강남구</td>
        </tr>
        <tr>
            <td align="center">1</td>
            <td align="center">홍길동</td>
            <td align="center">20</td>
            <td align="center">010-3333-4444</td>
            <td>서울시 강남구</td>
        </tr>
        <tr>
            <td align="center">1</td>
            <td align="center">홍길동</td>
            <td align="center">20</td>
            <td align="center">010-3333-4444</td>
            <td>서울시 강남구</td>
        </tr>
        <tr>
            <td colspan="5" align="center">위의 사항은 2015년 1월 5일에 수집되었습니다.</td>
        </tr>        
    </table>
    
    <hr />
            
    <table border="1" width="200" height="200">
        <tr>
            <td>1</td>
            <td>2</td>
        </tr>
        <tr>
            <td>3</td>
            <td>4</td>
        </tr>
    </table>
    
    <br />
    
    <!--  
        셀병합 규칙
        1. 모든 <tr>내의 <td> 갯수는 동일해야 한다.
    -->
    
    <table border="1" width="200" height="200">
        <tr>
            <td colspan="2">1</td>
        </tr>
        <tr>
            <td>3</td>
            <td>4</td>
        </tr>
    </table>
    
    <br />
    
    <table border="1" width="200" height="200">
        <tr>
            <td rowspan="2">1</td>
            <td>2</td>
        </tr>
        <tr>
            <td>3</td>
        </tr>
    </table>
 
</body>
</html>
 
cs



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

목록태그-순서있는 리스트<ol>, 순서없는 리스트 <ul> / 프레임 <iframe>  (0) 2016.01.22
테이블 태그 - 테이블<table>, 행<tr>, 셀<td>, 제목 셀<th>  (0) 2016.01.22
이미지태그<img /> / 대체 문자열 alt=""  (0) 2016.01.22
의미를 나타내는 태그 / 하이퍼링크 <a>  (0) 2016.01.22
제목태그<h>/ 수평선 <hr> / 문단태그 <p>/ 영역-블럭태그<div>, 인라인태그<span>  (0) 2016.01.22


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
 
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
    <!--  
        HTML Table
        - 테이블 태그
        1. 표
            - 표 출력
            
        2. 레이아웃
            - 화면 구성/배치
            
        1. <table> : 테이블
        2. <tr> : 행, table row
        3. <td> : 셀, table date //이곳에 출력 데이터가 들어간다
        4. <th> : 제목 셀, table header        
        
    -->
    <!-- 2행 2열 테이블 -->
    <table border="1" width="200" height="200">
        <tr>
            <td width="150" height="150">1</td>
            <td width="50">2</td>
        </tr>
        <tr>
            <td height="50">3</td>
            <td>4</td>
        </tr>
    </table>    
    
    <hr />
    
    <!-- 보통 테이블은 width는 지정하지만 height는 거의 지정하지 않는다 -->
    <table border="1" width="300">
        <tr>
            <td>아녕하세요 반갑습니다아녕하세요 반갑습니다아녕하세요 반갑습니다아녕하세요 반갑습니다아녕하세요 반갑습니다아녕하세요 반갑습니다아녕하세요 반갑습니다아녕하세요 반갑습니다</td>
            <td>2</td>
        </tr>
        <tr>
            <td>3</td>
            <td>4</td>
        </tr>
    </table>
    
</body>
</html>
 
 
 
cs



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

목록태그-순서있는 리스트<ol>, 순서없는 리스트 <ul> / 프레임 <iframe>  (0) 2016.01.22
테이블 만들기 예제 / 셀병합 <colspan>, <rowspan>  (0) 2016.01.22
이미지태그<img /> / 대체 문자열 alt=""  (0) 2016.01.22
의미를 나타내는 태그 / 하이퍼링크 <a>  (0) 2016.01.22
제목태그<h>/ 수평선 <hr> / 문단태그 <p>/ 영역-블럭태그<div>, 인라인태그<span>  (0) 2016.01.22


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
 
 
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
    <!--  
        HTML Image
        - <img />
        - 이미지 객체를 출력
        - 인라인 태그
        - src, source : 이미지의 URL
        
    -->
    <h3>표정</h3>
    <img src="images/face01.png" />
    <div>심퉁난 표정</div>
    
    <img src="images/face02.png" />
    <img src="images/face03.png" />
    <img src="images/face04.png" />
    <img />
    <img src="images/face1111.png" />
    
    <hr />
    
    <img src="images/face05.png" border="20" />
    
    <hr />
    
    <a href="ex05.htm"><img src="images/face06.png" border="0" /></a>
    
    <hr />
    
    <img src="images/face07.png" width="300" height="300" />
    <img src="images/face07.png" width="30" height="30" />
    <img src="images/face07.png" width="300" height="50" />
    
    <hr />
    
    <img src="images/face08.png" width="300" />
    <img src="images/face08.png" height="300" />
    <img src="images/face08.png" />
    
    <hr />
    
    <img src="images/dog01.jpg" width="800" />
    
    <hr />
    
    <!--  
        alternate text
        - 대체 문자열
        - 이미지가 깨졌을때 대신 보여주는 문자열
    -->
    <img src="images/face10a.png" alt="놀란 표정" />
    
    
    
</body>
</html>
 
cs


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

테이블 만들기 예제 / 셀병합 <colspan>, <rowspan>  (0) 2016.01.22
테이블 태그 - 테이블<table>, 행<tr>, 셀<td>, 제목 셀<th>  (0) 2016.01.22
의미를 나타내는 태그 / 하이퍼링크 <a>  (0) 2016.01.22
제목태그<h>/ 수평선 <hr> / 문단태그 <p>/ 영역-블럭태그<div>, 인라인태그<span>  (0) 2016.01.22
속성표현, 경로표현  (0) 2016.01.22



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
 
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
    <!--  
        HTML Formatting
        - 서식을 표현하는 태그
        - 의미를 나타내는 태그(*****)
    
    -->
    
    <b>볼트태그입니다.</b><br /><br />
    <em>강조하는 문자열(***)</em><br /><br />
    <i>인용문 문자열</i><br /><br />
    <small>작은 텍스트</small><br /><br />
    <strong>의미상 중요한 문자열(***)</strong><br /><br />
    H<sub>2</sub>0<br /><br />
    MC<sup>2</sup><br /><br />
    <mark>하이라이트</mark><br /><br />
    <address>서울시 동대문구</address><br /><br />
    <blockquote>인용문 블럭</blockquote><br /><br />
    <bdo dir="rtl">텍스트의 방향</bdo>
 
    <hr />
    
    <!--  
        HTML Hyper Links
        - <a>, anchor, 링크
        - 리소스간의 이동(페이지 -> 페이지)
        - <a> 태그의 클릭 대상 -> 텍스트, 이미지
        - 인라인 태그
        - href : 이동할 주소(URL)
        - target : 열거형(_self, _blank, _top, _parent, 프레임명)
        - title : 모든 태그, 풍선 도움말
        - 페이지 -> 페이지 이동
        - 한 페이지내의 특정위치 -> 특정위치 (스크롤 이동)
    -->    
    
    <h2>검색 사이트</h2>
    <p>
        1. <a href="http://www.naver.com" target="_self" title="클릭하면 네이버로 이동">네이버</a><br />
        2. <a href="http://www.google.com" target="_blank">구글</a><br />
        3. <a href="ex01.htm">첫번째 예제</a>
    </p>
    
    <hr />
    
    <h3><a id="list">HTML</a></h3>
    <p>
        1. <a href="#item1">태그</a><br />
        2. <a href="#item2">속성</a><br />
        3. <a href="#item3">텍스트</a><br />
    </p>
    
    <h4><a id="item1">1. 태그</a></h4>
    <p> 반면 최근 수년 동안 사내에서 최고 수준의 부러움을 한몸에 받았던 무선사업부는 스마트폰 시장 포화로 예년 수준의 성과급을 받지 못할 전망이다. 무선사업부는 갤럭시 신화의 중심에 서며 한 동안 50%의 성과급을 챙겼다. 하지만 올해는 많아야 40%대가 될 것이라는 게 업계 관측이다.반면 최근 수년 동안 사내에서 최고 수준의 부러움을 한몸에 받았던 무선사업부는 스마트폰 시장 포화로 예년 수준의 성과급을 받지 못할 전망이다. 무선사업부는 갤럭시 신화의 중심에 서며 한 동안 50%의 성과급을 챙겼다. 하지만 올해는 많아야 40%대가 될 것이라는 게 업계 관측이다.반면 최근 수년 동안 사내에서 최고 수준의 부러움을 한몸에 받았던 무선사업부는 스마트폰 시장 포화로 예년 수준의 성과급을 받지 못할 전망이다. 무선사업부는 갤럭시 신화의 중심에 서며 한 동안 50%의 성과급을 챙겼다. 하지만 올해는 많아야 40%대가 될 것이라는 게 업계 관측이다.반면 최근 수년 동안 사내에서 최고 수준의 부러움을 한몸에 받았던 무선사업부는 스마트폰 시장 포화로 예년 수준의 성과급을 받지 못할 전망이다. 무선사업부는 갤럭시 신화의 중심에 서며 한 동안 50%의 성과급을 챙겼다. 하지만 올해는 많아야 40%대가 될 것이라는 게 업계 관측이다.반면 최근 수년 동안 사내에서 최고 수준의 부러움을 한몸에 받았던 무선사업부는 스마트폰 시장 포화로 예년 수준의 성과급을 받지 못할 전망이다. 무선사업부는 갤럭시 신화의 중심에 서며 한 동안 50%의 성과급을 챙겼다. 하지만 올해는 많아야 40%대가 될 것이라는 게 업계 관측이다.반면 최근 수년 동안 사내에서 최고 수준의 부러움을 한몸에 받았던 무선사업부는 스마트폰 시장 포화로 예년 수준의 성과급을 받지 못할 전망이다. 무선사업부는 갤럭시 신화의 중심에 서며 한 동안 50%의 성과급을 챙겼다. 하지만 올해는 많아야 40%대가 될 것이라는 게 업계 관측이다.</p>
    <div><a href="#list">목차로 이동</a></div>
 
    <h4><a id="item2">2. 속성</a></h4>
    <p> 반면 최근 수년 동안 사내에서 최고 수준의 부러움을 한몸에 받았던 무선사업부는 스마트폰 시장 포화로 예년 수준의 성과급을 받지 못할 전망이다. 무선사업부는 갤럭시 신화의 중심에 서며 한 동안 50%의 성과급을 챙겼다. 하지만 올해는 많아야 40%대가 될 것이라는 게 업계 관측이다.반면 최근 수년 동안 사내에서 최고 수준의 부러움을 한몸에 받았던 무선사업부는 스마트폰 시장 포화로 예년 수준의 성과급을 받지 못할 전망이다. 무선사업부는 갤럭시 신화의 중심에 서며 한 동안 50%의 성과급을 챙겼다. 하지만 올해는 많아야 40%대가 될 것이라는 게 업계 관측이다.반면 최근 수년 동안 사내에서 최고 수준의 부러움을 한몸에 받았던 무선사업부는 스마트폰 시장 포화로 예년 수준의 성과급을 받지 못할 전망이다. 무선사업부는 갤럭시 신화의 중심에 서며 한 동안 50%의 성과급을 챙겼다. 하지만 올해는 많아야 40%대가 될 것이라는 게 업계 관측이다. 반면 최근 수년 동안 사내에서 최고 수준의 부러움을 한몸에 받았던 무선사업부는 스마트폰 시장 포화로 예년 수준의 성과급을 받지 못할 전망이다. 무선사업부는 갤럭시 신화의 중심에 서며 한 동안 50%의 성과급을 챙겼다. 하지만 올해는 많아야 40%대가 될 것이라는 게 업계 관측이다.반면 최근 수년 동안 사내에서 최고 수준의 부러움을 한몸에 받았던 무선사업부는 스마트폰 시장 포화로 예년 수준의 성과급을 받지 못할 전망이다. 무선사업부는 갤럭시 신화의 중심에 서며 한 동안 50%의 성과급을 챙겼다. 하지만 올해는 많아야 40%대가 될 것이라는 게 업계 관측이다.반면 최근 수년 동안 사내에서 최고 수준의 부러움을 한몸에 받았던 무선사업부는 스마트폰 시장 포화로 예년 수준의 성과급을 받지 못할 전망이다. 무선사업부는 갤럭시 신화의 중심에 서며 한 동안 50%의 성과급을 챙겼다. 하지만 올해는 많아야 40%대가 될 것이라는 게 업계 관측이다.</p>
    <div><a href="#list">목차로 이동</a></div>
    
    <h4><a id="item3">3. 텍스트</a></h4>
    <p> 반면 최근 수년 동안 사내에서 최고 수준의 부러움을 한몸에 받았던 무선사업부는 스마트폰 시장 포화로 예년 수준의 성과급을 받지 못할 전망이다. 무선사업부는 갤럭시 신화의 중심에 서며 한 동안 50%의 성과급을 챙겼다. 하지만 올해는 많아야 40%대가 될 것이라는 게 업계 관측이다.반면 최근 수년 동안 사내에서 최고 수준의 부러움을 한몸에 받았던 무선사업부는 스마트폰 시장 포화로 예년 수준의 성과급을 받지 못할 전망이다. 무선사업부는 갤럭시 신화의 중심에 서며 한 동안 50%의 성과급을 챙겼다. 하지만 올해는 많아야 40%대가 될 것이라는 게 업계 관측이다.반면 최근 수년 동안 사내에서 최고 수준의 부러움을 한몸에 받았던 무선사업부는 스마트폰 시장 포화로 예년 수준의 성과급을 받지 못할 전망이다. 무선사업부는 갤럭시 신화의 중심에 서며 한 동안 50%의 성과급을 챙겼다. 하지만 올해는 많아야 40%대가 될 것이라는 게 업계 관측이다. 반면 최근 수년 동안 사내에서 최고 수준의 부러움을 한몸에 받았던 무선사업부는 스마트폰 시장 포화로 예년 수준의 성과급을 받지 못할 전망이다. 무선사업부는 갤럭시 신화의 중심에 서며 한 동안 50%의 성과급을 챙겼다. 하지만 올해는 많아야 40%대가 될 것이라는 게 업계 관측이다.반면 최근 수년 동안 사내에서 최고 수준의 부러움을 한몸에 받았던 무선사업부는 스마트폰 시장 포화로 예년 수준의 성과급을 받지 못할 전망이다. 무선사업부는 갤럭시 신화의 중심에 서며 한 동안 50%의 성과급을 챙겼다. 하지만 올해는 많아야 40%대가 될 것이라는 게 업계 관측이다.반면 최근 수년 동안 사내에서 최고 수준의 부러움을 한몸에 받았던 무선사업부는 스마트폰 시장 포화로 예년 수준의 성과급을 받지 못할 전망이다. 무선사업부는 갤럭시 신화의 중심에 서며 한 동안 50%의 성과급을 챙겼다. 하지만 올해는 많아야 40%대가 될 것이라는 게 업계 관측이다.</p>
    <div><a href="#list">목차로 이동</a></div>
    
    <a href="페이지명#내부아이디">텍스트</a>
    <a href="페이지명">텍스트</a>
    <a href="#내부아이디">텍스트</a>
    
</body>
</html>
 
cs


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

테이블 태그 - 테이블<table>, 행<tr>, 셀<td>, 제목 셀<th>  (0) 2016.01.22
이미지태그<img /> / 대체 문자열 alt=""  (0) 2016.01.22
제목태그<h>/ 수평선 <hr> / 문단태그 <p>/ 영역-블럭태그<div>, 인라인태그<span>  (0) 2016.01.22
속성표현, 경로표현  (0) 2016.01.22
html  (0) 2016.01.22


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
 
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
    <!--
        HTML Headings
        - 제목 태그
        - <h1> ~ <h6> : 6종류
        - 출력(bold, 블럭태그)
        - 검색 엔진이 검색하는 대상
        - h1 : 문서내의 가장 중요한 제목(최상위 제목)
             : 숫자가 커질 수록 덜 중요한 제목(의미)
    -->
    
    <h1>제목입니다.</h1>
    <h2>제목입니다.</h2>
    <h3>제목입니다.</h3>
    <h4>제목입니다.</h4>
    <h5>제목입니다.</h5>
    <h6>제목입니다.</h6>
    일반 텍스트입니다
    
    <!--  
        HTML Lines
        - <hr>, Horizontal Rule
        - 수평선
        - 컨텐츠를 분리하는 용도
        - 블럭 태그
        
        HTML 속성값 중 숫자
        1. 숫자만
            - 픽셀(px)
            - 절대값
        2. %
            - 백분율
            - 상대값(기준 -> 부모 태그의 영역)
            
        hr의 align같은 속성
        -> 열거형(제시된 값 중 하나를 선택)
    -->
    <hr size="30" color="red" width="200" align="left" />
    또 다른 내용입니다.
    
    <hr />
    
    <!--  
        HTML Paragraphs
        - 문단 태그
        - <p>
        - 블럭태그
    -->
    
    하나
    <p>둘</p>
    셋
    <h1>성과급 지급 앞둔 삼성…'대박-쪽박' 엇갈린 명암</h1>
    
    <p>이달 30일 특별 성과급(OPI) 지급을 앞두고 삼성그룹 임직원들의 희비가 엇갈리고 있다. 회사 실적에 따라 개인 연봉의 50%를 가져가는 곳도 있지만, 쓴 입맛만 다시는 곳도 허다하기 때문이다.</p>
    <p>대표 계열사인 삼성전자 내에서도 명암이 엇갈린다. 22일 재계와 삼성에 따르면 업황호조로 호실적을 달성한 메모리사업부와 9년 연속 세계 TV시장 1위를 지켜낸 영상디스플레이(VD) 사업부 등은 연봉의 50%에 해당하는 보너스를 받을 것으로 기대된다. 6000만원 연봉자는 3000만원에 해당하는 돈을 더 가져가는 셈이다.</p>
    <p>반면 최근 수년 동안 사내에서 최고 수준의 부러움을 한몸에 받았던 무선사업부는 스마트폰 시장 포화로 예년 수준의 성과급을 받지 못할 전망이다. 무선사업부는 갤럭시 신화의 중심에 서며 한 동안 50%의 성과급을 챙겼다. 하지만 올해는 많아야 40%대가 될 것이라는 게 업계 관측이다.</p>
    
    <hr />
    
    <!--  
        영역
        - <div>, division
            - 블럭태그
            - 자신의 기능 없음
            
        - <span>
            - 인라인태그
            - 자신의 기능 없음
            
        블럭태그 vs 인라인태그
        1. 블럭태그
            - 자신의 내용물을 독립된 한 라인에 출력(개행)
                    
        2. 인라인태그
            - 자신의 내용물을 기존의 라인에 출력
            
        3. 작성 규칙
            - 블럭태그 내부에는 블럭태그와 인라인태그가 올 수 있다.
            - 인라인태그 내부에는 인라인태그만 올 수 있다.
            - 블럭태그 <p>는 내부에 인라인태그만 올 수 있다.
    -->
    
    안녕하세요. <span style="color:blue;">홍길동</span>입니다.
    
    <hr />
    
    안녕하세요.
    <div style="color:blue;">반갑습니다.</div>
    안녕히가세요.
    
</body>
</html>
 
 
cs


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

테이블 태그 - 테이블<table>, 행<tr>, 셀<td>, 제목 셀<th>  (0) 2016.01.22
이미지태그<img /> / 대체 문자열 alt=""  (0) 2016.01.22
의미를 나타내는 태그 / 하이퍼링크 <a>  (0) 2016.01.22
속성표현, 경로표현  (0) 2016.01.22
html  (0) 2016.01.22


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
 
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body background="D:\Client\ClientTest\WebContent\HTML\images\face01.png">
    
    <!--
        속성 표현
        1. 속성명="값"
        2. 속성명='값'
        3. 속성명=값 //X
        
        body 태그
        1. bgcolor 속성        : 배경색(background color)
        2. background 속성    : 배경 이미지
    
        HTML에서의 색상 표현
        1. Named Color, Well-known Color
        - 색상명 : red, yellow, blue 등.. 16가지 색
        - Web Safe Color : 256 -> 40가지(시스템) -> 216가지
        
        2. RGB Color
        - Red, Green, Blue 조합
        - 한가지 색 : 256단계
        - 모두 0(검은색), 모두 256(흰색)
        - R(0~255), G(0~255), B(0~255) = 16,777,216
        - 201251(X) -> 16진수(0 -> 0, 255 -> FF)
        
        
        웹에서 사용 가능한 이미지 포맷
        1. jpg(jpeg)
            - 사진
        2. gif
            - 256색
            - 아이콘, 일러
            - 움직이는 이미지
            - 투명 지원
        3. png
            - jpg + gif
            
        경로 표현
        1. 상대경로
            - 현재 HTML 문서가 있는 곳을 기준으로 표현
            - ./images/face01.png
            - images/face01.png
            - . : 자기 자신
            - .. : 부모
            
        2. 절대경로
            - 항상 미리 정해진 특정 위치로부터 시작하는 표현
            - 항상 주소가 "/"로 시작한다.
            - /images/face01/png
            - 자바 웹사이트(Dynamic Web Project)
                -> /프로젝트명 폴더
                
        3. 외부경로
            - 다른 서버의 자원을 표현
            - http://도메인으로 시작
            
        4. 로컬경로
            - file:///으로 시작
            - 사용X
        
    -->
    
    
    
</body>
</html>
 
cs


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

테이블 태그 - 테이블<table>, 행<tr>, 셀<td>, 제목 셀<th>  (0) 2016.01.22
이미지태그<img /> / 대체 문자열 alt=""  (0) 2016.01.22
의미를 나타내는 태그 / 하이퍼링크 <a>  (0) 2016.01.22
제목태그<h>/ 수평선 <hr> / 문단태그 <p>/ 영역-블럭태그<div>, 인라인태그<span>  (0) 2016.01.22
html  (0) 2016.01.22


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
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
 
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
 
    <!--
        
        HTML 주석
            - 단축키 : Ctrl + Shift + /(\)
        
        
        HTML 문서
            - 확장자(*.htm, *.html)
            
        Markup Language, 마크업 언어
            - SGML, Standard Generalized Markup Language
            - HTML, Hyper Text Markup Language
            - XML, eXtensible Markup Language
            - XHML, eXtensible Hyper Text Markup Language
            
        HTML 문서의 기본 골격
        1. <!DOCTYPE html>
            : 문서 유형, 브라우저가 읽는 정보
        
        2. <html>
            : 모든 HTML 내용을 감싸는 태그
            : 루트 태그, 루트 엘리먼트
            : 유일
            
        3. <head>
            : HTML 문서의 여러가지 정보(브라우저를 위한)
        
        4. <body>
            : HTML 문서의 출력 내용(실 사용자가 보게 되는 내용)
            
            
        HTML 언어의 구성요소
         - 대/소문자 구분 없음
         
        1. 태그(Tag), 엘리먼트(Element)
            - HTML 문서의 골격 형성(레이아웃)
            - 구성요소 표현(이미지, 링크, 테이블, 컨트롤 등..)
            - 워드 작업과 유사
            - <태그명>
                - <IMG> : HTML 4.01
                - <img> : XHTML 1.0
                
            a. 태그의 형식
                1. <태그명></태그명>
                    : 시작태그 ~ 끝태그
                    : 자신의 영역을 가지는 태그
                    
                2. <태그명>, <태그명 />
                    : 자신의 영역이 없는 태그
                    : 단독태그, 빈태그, Empty Element
                    
            b. 태그 내용의 형식, content Type
                - 시작 태그와 끝 태그 사이에 무엇을 넣을 수 있는지?
                1. 자식 태그(엘리먼트)
                    <a>
                        <b></b>
                        <c></c>
                    </a>
                    
                2. PCDATA
                    <a>홍길동</a>
                    
                3. 빈태그
                    <a></a>, <a />
                    
                4. 혼합형
                    <a>
                        <b></b>
                        홍길도
                        <c></c>
                        하하하
                    </a>                
                    
                    
        2. 속성(Attribute)
            - 태그의 추가 데이터
            - <태그 속성명="데이터"></태그>
            - <태그 속성명="데이터" />
            - 태그를 표현할 때 사용하는 데이터
        
        3. 문자열(PCDATA), Parsed Character Data
            - 태그의 데이터
            - <태그>데이터</태그>
            - 화면에 출력하기 위한 출력 데이터
        
        4. 엔티티(Entity)
            - &엔티티명;
            - 브라우저가 문서를 출력하기 전에 미리 정해진 표현으로 지환을 하는 역할
            - 자바(Escape Character : \r\n, \")
            - &lt;(A<B less than) &gt;(A>B greater than)
              &quot;(") &apos;(') &amp;(&) : 빌트인 엔티티(Built-in Entity)
            - &copy;
            - &#65;    
        
        
        웹에서의 공백 표시
        - 소스상(편집기)의 공백을 브라우저 처리하는 방식
        - 공백 문자 : 스페이스, 탭문자, 엔터 : White Space
        - 종류와 상관없이 소스상의 연속된 공백 문자는 모두 1개의 스페이스로 치환해서 출력한다.(브라우저)
        
        공백을 표현하는 방법
        1. 스페이스
            &nbsp; // non-break space
            
        2. 엔터
            <br /> // line break
            
            
            
    -->
    
    &lt;b&gt; 태그입니다.&#65;
 
    <hr />
    
    하나     둘     셋
 
    <hr />
    하나&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    <br />둘셋
 
</body>
</html>
 
 
 
 
 
cs


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

테이블 태그 - 테이블<table>, 행<tr>, 셀<td>, 제목 셀<th>  (0) 2016.01.22
이미지태그<img /> / 대체 문자열 alt=""  (0) 2016.01.22
의미를 나타내는 태그 / 하이퍼링크 <a>  (0) 2016.01.22
제목태그<h>/ 수평선 <hr> / 문단태그 <p>/ 영역-블럭태그<div>, 인라인태그<span>  (0) 2016.01.22
속성표현, 경로표현  (0) 2016.01.22

+ Recent posts

티스토리툴바