1cm

자바 프로그래밍_Day_47_멀티미디어, 하이퍼링크 관련 태그 본문

국비지원_Java/Java Programming_1

자바 프로그래밍_Day_47_멀티미디어, 하이퍼링크 관련 태그

dev_1cm 2021. 10. 30. 13:22
반응형

 

 

2021. 10. 25

 

 

     > 이미지 태그 - <img/>

       -> 웹 페이지에 사진이나 그림을  삽입할 때 사용하는 태그

       -> <img src="경로" alt="설명 문구" width="너비" height="길이">

       -> 이미지 태그 속성

          -> src : 삽입할 이미지 경로를 지정하는 속성

          -> alt : 이미지 설명해주는 텍스트 속성, 이미지가 출력이 되지 않으면 표시됨

          -> width, height : 이미지의 크기를 설정하는 속성

       -> 웹 페이지 사용 가능한 확장자

          -> GIF : 파일 크기가 작아 아이콘이나 불렛 기호에 많이 사용, 투명한 배경이나 움직이는 이미지를 만들 수 있다.

          -> JPG/JPEG : 사진을 위해 개발, 저장을 반복하다 보면 화질이 떨어질 수 있음.(압축률 좋음)

          -> PNG : 네트워크용으로 개발되어 요즘 많이 이용

 

 

     > 이미지 맵 - <map></map>, <area>

       -> 이미지를 구역 별로 나누어 링크를 걸어주는 태그로 <img>태그에 usemap 속성을 지정해야 한다.

       -> 이미지 맵 속성

          -> alt : 대체 텍스트 지정

          -> coords : 분할할 지역 좌표 지정(시작, 끝)

          -> href : 링크 페이지 경로 지정

          -> media : 링크 페이지 최적화 미디어 지정

          -> rel :현재 페이지, 링크페이지 관계 지정

          -> shape : 링크로 사용할 영역 형태 지정(default, rect, circle, poly)

          -> target : 링크페이지가 열릴 위치(새창, 현재창, 부모창, 최상위창)

          -> type : 링크 페이지의 미디어 유형 지정

 

 

 

     > 실습 코드와 출력 결과

 

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
<!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>
    
    <h3>src 속성</h3>
    <!--
        src 속성에 경로를 설정하여 이미지 파일을 불러온다.
    -->
 
    <img src="../resources/image/river1.png">
 
    <h3>alt 속성</h3>
    <!--
        사진의 경로가 잘못되었거나 이미지를 제대로 표현할 수 없을 경우 대체 텍스트의 용도로 사용된다.
 
        파일 경로 또는 파일명을 틀리게 작성(확장자는 대소문자 구분 안 함)
    -->
    <img src="../resources/image/river.PNG" alt="이 사진은 강 사진 입니다.">
 
    <h3>width와 height</h3>
    <!--
        사진의 높이와 너비를 지정할 수 있다.
        고정된 단위(px 등)의 크기로도 지정 가능하며 가변 크기 단위(%) 크기로도 지정 가능하다.
    -->
 
    <h4>고정 크기 단위 : 화면 사이즈가 변해도 크기가 변하지 않는다.</h4>
    <img src="../resources/image/flower1.PNG" width="200px" height="150px">
    <img src="../resources/image/flower2.PNG" width="200" height="150">
    <img src="../resources/image/flower3.PNG" width="200px" height="150">
    <img src="../resources/image/flower4.PNG" width="200" height="150px">
    <img src="../resources/image/flower5.PNG" width="200px" height="150px">
 
    <h4>가변 크기 단위 : 화면 사이즈 혹은 기준 사이즈에 따라 크기가 변경된다.</h4>
    <img src="../resources/image/flower1.PNG" width="15%" height="150px">
    <img src="../resources/image/flower2.PNG" width="15%" height="150">
    <img src="../resources/image/flower3.PNG" width="15%" height="150">
    <img src="../resources/image/flower4.PNG" width="15%" height="150px">
    <img src="../resources/image/flower5.PNG" width="15%" height="150px">
 
    <hr>
 
    <h3>이미지 맵</h3>
    <!--
        이미지를 구역별로 나누어 링크를 걸어주는 태그이다.
    -->
 
    <img src="../resources/image/river2.PNG" width="600px" height="400px" usemap="#map">
 
    <map name="map">
        <!-- <area shape="rect" coords="0, 0, 300, 400" href="http://www.naver.com" target="_self"> -->
        <!-- <area shape="rect" coords="300, 0, 600, 400" href="http://www.google.com" target="_blank"> -->
        <area shape="circle" coords="300, 200, 100" href="http://www.naver.com" target="_self">
    </map>
</body>
</html>
 cs

 

       -> 좌표 지정

 

 

./ -> 현재 위치

 

../ -> 상위 위치

 

 

 

 

     > 오디오 태그 - <audio></audio>

       -> 웹 브라우저에서 플러그인의 도움 없이 음악을 재생할 수 있게 만들어주는 태그

       -> 오디오 태그 속성

          -> src : 음악 파일의 경로 지정

          -> controls : 재생 도구 출력 지정

          -> autoplay : 자동 재생 여부 지정(모바일에서 적용X)

          -> loop : 반복 여부 지정

          -> preload

             -> none : 미리 다운로드 하지 않음

             -> metadata : 기본 정보는 가져옴(크기, 첫 프레임, 오디오 길이 등)

             -> auto : 미리 다운로드 함

 

     > 오디오 태그 - <video></video>

       -> 웹 브라우저에서 플러그인의 도움 없이 미디어 재생을 할 수 있게 만들어주는 태그

       -> 비디오 태그 속성

          -> src : 미디어 파일의 경로 지정

          -> controls : 재생 도구 출력 지정

          -> autoplay : 자동 재생 여부 지정(모바일에서 적용X)

          -> loop : 반복 여부 지정

          -> preload : 재생 시 모두 불러올 지 지정

          -> poster : 재생 전 출력할 이미지 출력 / 경로 입력

          -> widdth, height : 너비, 높이 지정

 

 

     > 실습 코드와 출력 결과

 

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>
    <!--
        HTML5 부터는 플러그인 기능을 사용하지 않고 미디어(비디오, 오디오)를 직접
        HTML 문서에서 실행시킬 수 있는 태그를 제공한다.
    -->
 
    <h3>오디오 관련 태그</h3>
    <!--
        오디오 태그 속성
            - src : 오디오 파일의 경로를 지정
            - controls : 재생 도구 출력
            - autoplay : 자동 재생 여부(크롬 X, 모바일 X)
            - loop : 재생 반복 여부
            - preload : 미리 오디오 파일을 다운로드할지 여부
    -->
    <audio src="../resources/audio/major.mp3" controls loop></audio>
 
    <h3>비디오 관련 태그</h3>
    <!--
            - src : 오디오 파일의 경로를 지정
            - controls : 재생 도구 출력
            - autoplay : 자동 재생 여부(크롬 X, 모바일 X)
            - loop : 재생 반복 여부
            - preload : 미리 오디오 파일을 다운로드할지 여부
            - poster : 재생 전에 출력할 이미지 파일의 경로 지정
            - width / height : 비디오 태그의 너비와 높이 지정
    -->
    <video src="../resources/video/video1.mp4" controls loop
        poster="../resources/image/city1.PNG" width="300" height="200"></video>
</body>
</html>
 cs

 

 

     > 하이퍼링크 태그 - 하이퍼 텍스트<a></a>

       -> 페이지에서 해당 부분을 클릭하면 지정된 페이지로 이동하는 태그로 외부 사이트 연결, 문서 내부에서 이동 가능 (anchor)

       -> 하이퍼 텍스트 태그 속성

          -> href : 링크한 페이지의 id값이나 사이트 주소 지정

          -> target : 링크 페이지가 표시될 위치(새 창, 현재 창) 지정

          -> download : 링크한 페이지를 표시하지 않고 다운로드 하는 것

          -> rel : 현재 페이지와의 관계 지정

          -> hreflang : 링크한 페이지의 언어 지정

          -> type : 페이지의 파일 유형 지정

 

 

     > 기본 작성

       -> 문자

          -> <a href="주소"> 링크 표시 문구 </a>

       -> 이미지

          -> <a href="주소"> <img src="이미지 경로"/> </a>

 

 

     > 내부 이동 및 target 이용

       -> 내부에서 이동하기

          -> <p id="p1"></p> <a href="#p1"> 링크 표시 문구 </a>

       -> target 이용하기

          -> <a href="주소" target="_blank(새 창)" or "_self(현재)" or "_parent(상위 창)" or "_top(최상위창)"> </a>

 

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
<!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>
 
    <h3>a 태그를 이용한 하이퍼링크 테스트</h3>
 
    <ul>
        <li><a href="01_글자관련태그.html">글자 관련 태그들</a></li>
        <li><a href="./02_목록관련태그.html">목록 관련 태그들</a></li>
        <li><a href="./03_표관련태그.html">표 관련 태그들</a></li>
        <li><a href="./04_영역관련태그.html">영역 관련 태그들</a></li>
        <li><a href="./05_이미지관련태그.html">이미지 관련 태그들</a></li>
        <li><a href="./06_미디어관련태그.html">미디어 관련 태그들</a></li>
    </ul>
 
    <h3>네트워크가 연결된 상황이라면 현재 서비스되고 있는 웹 페이지도 링크가 가능하다.</h3>
    <ul>
        <li><a href="https://www.naver.com">네이버</a></li>
        <li><a href="https://google.com" target="_blank">구글</a></li>
        <li><a href="https://www.daum.net" target="_self">다음</a></li>
    </ul>
 
    <h3>img 태그를 이용해서 링크 만들기</h3>
    <a href="https://www.w3school.com">
    <img src="../resources/image/forest1.PNG" width="150px" height="100px">
    </a>
 
    <hr>
 
    <h3 id="menu">한 페이지 내에서 점프하는 앵커 만들기</h3>
    <ul>
        <li><a href="#content1">기사 내용 1</a></li>
        <li><a href="#content2">기사 내용 2</a></li>
        <li><a href="#content3">기사 내용 3</a></li>
    </ul>
 
    <h4 id="content1">기사 내용 1</h4>
    <p>
        경찰이 25일 오전 발생한 KT 네트워크 장애 원인을 악성코드를 이용한 서비스 거부 공격&lt;디도스·DDoS&gt;으로 보고 수사에 착수했다.
 
        경찰 관계자는 “경기남부청 사이버수사대에서 피해와 공격 규모를 조사 중”이라며 “과학기술정보통신부, 한국인터넷진흥원 등과 함께 관련 절차와 규정에 따라 필요한 조치를 검토 중이며 범죄 혐의가 보이면 입건 전 조사 등을 하게 될 것”이라고 말했다.
 
        이날 오전 11시를 전후로 KT 네트워크에 장애가 발생해 전국 유무선 인터넷과 인터넷 전화, 일부 이동통신까지 먹통되는 사태가 발생했다. 이로 인해 전국 곳곳 기관과 개인이 인터넷 서비스 이용은 물론 증권거래시스템, 상점 결제시스템 이용 등까지 모두 불편을 겪었다. 일부 가입자는 전화통화도 되지 않는 가운데 고객센터 연결도 되지 않아 불편이 더욱 컸다.
 
        이날 정오께 대부분 인터넷 서비스가 정상을 찾은 것으로 파악되지만, 일부 지역에선 복구가 늦어지는 것으로 전해졌다.
 
        KT는 “오전 11시께 네트워크에 대규모 디도스 공격이 발생한 것으로 파악된다”며 “위기관리위원회를 즉시 가동, 신속히 조치하고 있다. 빠른 복구를 위해 최선을 다하겠다”고 전했다.
    </p>
 
    <a href="#menu">메뉴로 돌아가기</a>
 
    <br>
 
    <h4 id="content2">기사 내용 2</h4>
 
    <p>
        국내 가상화폐 거래소 1위 업체인 업비트의 누적 회원이 890만 명에 달하고 회원 중 2030의 비중이 60%를 넘어섰다. 업비트 이용자들은 대개 직장 출근 직후(오전 9시~10시)와 퇴근시간대(오후 6시~7시 사이)에 가장 거래를 활발히 하고 있는 것으로 나타났다.
 
        25일 업비트 운영업체 두나무에 따르면, 업비트 회원은 총 890만 명 중 20대가 31%로 가장 많았고, 30대가 29%, 40대가 24%로 뒤를 이었다. 지난해 업비트 3주년 출범 조사 당시 30대(39.8%), 40대(24.1%), 20대(20.1%)의 순위가 1년 사이에 바뀌었다. 20대의 디지털 자산 투자 참여가 크게 증가한 점이 원인이 됐다. 업비트 측은 “2030 세대만 전체 회원의 60%를 차지해 디지털 자산 투자에 대한 MZ세대(1980년대 초~2000년대 초 출생한 세대)의 뜨거운 관심을 방증했다”고 설명했다. 성별로는 남성이 57%, 여성이 43%로 나타났다.
 
        업비트 이용자들의 거래가 가장 활발한 시간대는 오전 9시에서 10시로 집계됐으며 그다음은 오후 6시에서 7시로 집계됐다. 
 
        업비트는 “이용자들이 출퇴근 시간에 활발하게 거래하는 직장인의 특성을 보여주고 있다”고 해석했다. 업비트를 이용할 때는 모바일 기기를 사용하는 비중이 78%(안드로이드 52%, iOS 26%)로, 22%인 웹(PC)에 비해 압도적으로 높은 것으로 나타났다. 이용자들의 업비트 앱 일 평균 체류 시간은 45분 32초이다. 올해 9월까지 총 앱 이용 시간만 4억6426만8590시간에 달해 일수로 환산하면 5만3734년에 맞먹는 것으로 나타났다. 
    </p>
 
    <a href="#menu">메뉴로 돌아가기</a>
 
    <br>
 
    <h4 id="content3">기사 내용 3</h4>
 
    <p>
        미국과 유럽의 일부 학교가 오는 31일 핼러윈데이를 앞두고 폭력성 등을 이유로 넷플릭스 드라마 ‘오징어게임’ 속 복장 착용을 금지했다. 미국의 비영리단체 의사들도 이 드라마를 “살인 축제”라고 규정하면서 “적어도 청소년기 후반까지는 오징어게임을 시청하지 말라”고 재차 권고했다.
 
        24일 CNN과 더타임스 등에 따르면 미국 뉴욕주의 페이엣빌-맨리어스 학군에 있는 모트 로드와 엔더스 로드, 페이엣빌 등 3개 초등학교는 최근 교장 명의로 학부모들에게 학생들의 ‘오징어게임’ 의상 분장을 금지한다는 내용의 서한을 발송했다. 학교 측은 “폭력적 메시지 때문에 드라마 속 의상은 학교 규정에 맞지 않는다”고 밝혔다. 또 해당 학교들은 “장난감 칼이나 총, 광선검 등 무기로 해석될 수 있는 어떤 물품도 학교에 반입해서는 안 된다”며 “잔인하거나 무서운 의상도 안 된다”고 덧붙였다. 해당 학교 학부모들도 학교 측 결정을 지지하는 것으로 전해졌다. 조지아주 로스웰의 한 사립학교도 ‘오징어게임’ 드라마 및 관련 게임에 대한 모든 토론을 금지한 것으로 알려졌다.
 
        아일랜드 더블린의 캐슬 파크 초등학교 역시 핼러윈에 학생들이 ‘오징어게임’ 등장 인물처럼 분장하는 것을 금지했다. 학교 관계자는 “드라마를 본 사람들은 이 내용이 어린 학생들에게 적합하지 않다는 것을 알 것”이라며 “학생들이 드라마를 볼까 봐 걱정”이라고 말했다. 스페인 마드리드의 한 초등학교도 학생들이 ‘오징어게임’ 속 놀이나 행동을 따라 하지 않도록 자녀 지도를 당부하는 안내문을 학부모들에게 발송했고, 관련 의상 착용도 금지했다. ‘오징어게임’에 대한 유해성 논란도 이어지고 있다. 미국 비영리단체 아동정신연구소의 데이비드 앤더슨 학교·지역사회 프로그램 대표는 이날 CNN 인터뷰에서 “폭력 수준이 대부분 프로그램보다 끔찍하다”며 “400명이 넘는 참가자 중 오직 1명만이 살아남을 수 있다는 전제하에 행해진 살인 축제”라고 비판했다. 미디어 감시단체 부모 텔레비전·미디어 위원회(PTC)도 “믿기 어려울 만큼 폭력적”이라며 시청 금지를 촉구한 바 있다.
 
    </p>
 
    <a href="#menu">메뉴로 돌아가기</a>
 
</body>
</html>
 cs

 

 

 

     > 폼 관련 태그 <form></form>

       -> 사용자가 입력한 data를 보내는 방식과 처리할 프로그램을 정하는 태그

       -> 하이퍼 텍스트 태그 속성

          -> method

             -> get : URL창에 데이터를 보내는 방식, data크기에 제한이 있고(256~4096byte), data를 볼 수 있다.

             -> post : http request에 data를 넣어 보내는 방식, data 크기에 제한이 없고, data를 볼 수 없다. (패스워드, 개인정보 등)

          -> name : <form>태그의 고유 이름 지정, <form>을 구분하기 위해 사용한다.

          -> action : 데이터를 처리 할 프로그램(페이지 - 서버)을 지정

          -> target : action속성의 프로그램(페이지)을 어떻게 열지 지정

          -> autocomplete : 이전 입력내용 출력하는 기능, 생략하면 자동으로 출력된다.(default : on) / ex. 이전에 입력했던 비밀번호, 아이디 자동 출력

 

 

 

 

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
<!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>
    <!--
        <form> 태그
            form 태그는 html에서 사용자가 입력할 수 있는 양식을 제공하는 태그이다.
            form 태그 내의 <input> 태그들을 통해서 사용자가 입력한 정보를 서버로 넘기면서 요청하는 역할을 한다.
 
            * action : form 내에 입력된 값들을 전달할 서버(페이지)에 대한 내용을 기입한다.
            * method : get / post 방식으로 전송 방식을 지정한다.
                get : 서버에 사용자가 입력한 값을 전달하면서 요청 시 사용자가 입력한 값들을 url에 노출되는 방식
                post : 서버에 사용자가 입력한 값을 전달하면서 요청 시 사용자가 입력한 값들을 url에 노출 시키지 않는 방식
            * autocomplete : 이전 입력 내용 출력하는 기능, 생략하면 자동으로 출력된다.(default : on, 각 태그별로 지정 가능)
    -->
 
    <h3>폼 태그의 기본 구조</h3>
    <form method="post">
        <label>
            <!--
                name : form 태그 안에서 input 태그를 구분하는 역할을 한다.
                        나중에 서버로 값을 전달할 때 name 속성과 텍스트 필드에 작성된 값이 세트(key=value)로 넘어간다.
            -->
            검색할 내용 : <input type="text" size="10" name="search" autocomplete="off">
        </label>
 
        <!--
            submit 버튼을 눌렀을 때 method 요청 전송 방식으로 action에 지정한 서버로 사용자가 입력한 값(key=value)을 전달한다.
        -->
        <input type="submit" value="검색">
    </form>
 
    <hr>
 
    <h4>fieldset : 폼 요소를 그룹으로 묶는 태그이다.</h4>
    <h4>legend : 묶은 폼 요소에 명칭을 붙이는 태그이다.</h4>
 
    <form autocomplete="off">
        <fieldset>
            <legend>회원 정보</legend>
 
            <label>아이디 : <input type="text"></label><br>
            <label>패스워드 : <input type="password"></label>
        </fieldset>
 
        <p></p>
 
        <fieldset>
            <legend>배송 정보</legend>
 
            <label>수령인 : <input type="text" name="name"></label><br>
            <label>주소 : <input type="text" name="address"></label>
        </fieldset>
 
        <p></p>
 
        <input type="submit" value="회원가입">
    </form>
 
    <hr>
 
    <h3>텍스트와 관련된 input 태그들</h3>
 
</body>
</html>
 cs

 

반응형

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

자바 프로그래밍_Day_49_CSS선택자  (0) 2021.11.12
자바 프로그래밍_Day_48_폼 관련 태그  (0) 2021.10.30
자바 프로그래밍_Day_46_표, 영역관련태그  (0) 2021.10.30
자바 프로그래밍_Day_45_HTML개요, 글자/목록 관련 태그  (0) 2021.10.30
자바 프로그래밍_Day_44_SQL응용 평가  (0) 2021.10.26
'국비지원_Java/Java Programming_1' Related Articles more
Comments