230104
영역 관련 태그
1. 블록 레벨 태그
- 사각형이 한 행 전체를 차지(너비100%)
- 블록레벨은 무조건 한 행을 차지하니까 다른 요소가 함께 같은 줄에 올 수 없음
예) div, p, pre, hr, table ...
2. 인라인 레벨 요소 태그
- 내용에 해당되는 부분만 영역을 지님
- 다른 요소와 함께 사용 가능
예) span, img, input, button ...
<DIV> VS <SPAN>
<div>
- (블록 레벨 태그)화면 분할
- 콘텐츠가 없으면 높이0, 너비 100%차지
<span>
- (인라인 레벨 태그) 콘텐츠를 감싸는 역할
- 컨텐츠가 없으면 높이, 너비 모두 0
3. iframe 태그(인라인 프레임)
- 웹 문서 안에 다른 웹 페이지 추가
src= "페이지 경로 추가"
3-1.
[상대 경로 방식] : 현재 파일을 기준으로 상대적인 경로를 지정(현재 위치 의미)
예1. 현재 파일과 같은 경로일 경우 ./파일명) <!--<iframe width="600" height="800" src="04_표관련태그.html"></iframe>-->
예2. 현재 파일의 상위 경로일 경우 ../파일명 ) <!--<iframe width="600" height="800" src="./04_표관련태그.html"></iframe>-->
3-2.
[절대 경로 방식] : 실제 파일의 물리적인 경로를 지정
예) <iframe width="600" heihgt="800" src="D:\develop\fontend\01_HTML\04_표관련태그.html" ></iframe>
*유튜브에서 우클릭-소스코드복사- vscode에서 붙여넣기-저장-브라우저열기-영상 바로가기 가능
<!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>영역 관련 태그</title>
<style>
div, span {
border: 1px solid;
}
</style>
</head>
<body>
<!--
1. 블록 레벨 태그
- 사각형이 한 행 전체를 차지(너비100%)
- 블록레벨은 무조건 한 행을 차지하니까 다른 요소가 함께 같은 줄에 올 수 없음
예) div, p, pre, hr, table ...
-->
<!--
<DIV> VS <SPAN>
<DIV>
- (블록 레벨 태그)화면 분할
- 콘텐츠가 없으면 높이0, 너비 100%차지
<SPAN>
- (인라인 레벨 태그) 콘텐츠를 감싸는 역할
- 컨텐츠가 없으면 높이, 너비 모두 0
-->
<div>
</div>
<!--
2. 인라인 레벨 요소 태그
- 내용에 해당되는 부분만 영역을 지님
- 다른 요소와 함께 사용 가능
예) span, img, input, button ...
-->
<h1>영역 관련 태그</h1>
<h2>div 태그와 span 태그의 차이</h2>
<h3>div 태그</h3>
<p>
div 태그의 영역은 이미 존재하는 태그 다음 줄에 설정된다.
</p>
<!--div*3{$번째 영역}-->
<div>1번째 영역</div>
<div>2번째 영역</div>
<div>3번째 영역</div>
<h3>span 태그</h3>
<p>
span 태그의 영역은 줄바꿈이 일어나지 않고 옆으로 영역이 설정된다.
</p>
<!--span*3{$번째 영역}-->
<span>1번째 영역</span>
<span>2번째 영역</span>
<span>3번째 영역</span>
<h2>div 태그와 span 태그의 차이</h2>
<h3>div</h3>
<div>
동해물과 백두산이 마르고 닳도록<br>
하느님이 보우하사 우리나라 만세. <br>
무궁화 삼천리 화려강산 <br>
대한 사랑, 대한으로 길이 보전하세.<br>
</div>
<h3>span</h3>
<span>
동해물과 백두산이 마르고 닳도록<br>
하느님이 보우하사 우리나라 만세. <br>
무궁화 삼천리 화려강산 <br>
대한 사랑, 대한으로 길이 보전하세.<br>
</span>
<h2>iframe 태그</h2>
<p>
웹문서 안에 다른 웹 페이지를 추가하는 태그이다.
</p>
<!--<iframe width="600" heihgt="800" src="04_표관련태그.html"></iframe>-->
<!--<iframe width="600" heihgt="800" src="./04_표관련태그.html"></iframe>-->
<iframe width="1080" height="608" src="https://www.youtube.com/embed/PPiSySHjAvQ" title="sub) 딤디 백수임? 아니라니까 아니라느뇽ㅣ다시 돌아온 직장인 브이로그ㅣ공지사항!" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</body>
</html>
4. 이미지 태그
4-1. img태그 속성
1. src : 이미지 파일 경로 지정
2. alt : 이미지를 설명하는 대체 텍스트 삽입
3. width, height : 이미지의 크기 지정(생략 시 원본 크기로 출력)
*GIF, JPG, PNG 확장자 참고
- 화면은 1920 * 1080 개 정도의 점(픽셀)으로 구성됨
[width와 height 속성]
1. 고정 크기 단위 : 화면 사이즈가 줄어도 크기가 그대로 고정되어 있다.
2. 가변 크기 단위 : 화면 사이즈 조정 시 함께 변경된다.
[이미지 맵 속성]
1. shape : 링크로 사용할 영역의 형태 지정 (rect, poly, circle ...)
2. coords : 분할할 영역의 좌표를 지정
3. herf : 해당 속성에 기술된 주소로 링크를 만들어준다.
4. target : 링크 페이지가 열릴 위치 (새 창'_blank', 현재 창'_self')
- 이미지를 구역 별로 분할해서 링크를 걸어줌
- <map> : 이미지 맵 생성 -> <img> 태그에 usemap 속성을 지정
- 예) <img src="../resources/image/flower3.PNG" width="600" height="400" usemap="#map">
<map name="map">
<area shape="rect" coords="0, 0, 300, 400" href="https://www.naver.com" target="_self">
<area shape="rect" coords="300, 0, 600, 400" href="https://www.google.com" target="_top">
</map>
[오디오 태그 속성]
<audio>
src
controls
preload
muted
autoplay : 페이지 열면 자동재생, 무분별한 광고 방지를 위해 크롬에서는 안 될 수 있음
loop : 반복여부 지정
예) <audio src="../resources/audio/major.mp3" controls autoplay loop></audio>
[비디오 태그 속성]
<video>
src
controls
preload
muted
autoplay
loop
poster 비디오 파일에 포스터 파일 지정
width, height
<!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>
<h1>미디어 관련 태그</h1>
<h2>오디오 관련 태그</h2>
<audio src="../resources/audio/major.mp3" controls autoplay loop muted>
이 오디오를 듣기 위해서는 HTML5를 지원하는 최신 브라우저를 필요로 합니다.
</audio>
<h2>비디오 관련 태그</h2>
<video src="../resources/video/video1.mp4" controls muted
width="300px" height="200px" poster="../resources/image/flower5.PNG">
이 비디오를
</video>
</body>
</html>
[하이퍼링크]
- 하이퍼링크(링크) 는 텍스트 또는 이미지를 클릭해서 사이트로 이동할 수 있게 연결
<a>: (anchor) 링크를 만드는 태그
텍스트 링크
이미지 링크
[<a>태그 속성]
href : 링크된 문서나 사이트의 주소 입력
target : 링크된 문서가 표시될 위치 지정
download : 링크된 문서를 다운로드
rel : 현재 문서와 링크된 문서의 관계 지정
hreflang : 링크된 문서의 언어 지정
type : 링크된 문서의 파일 유형 지정
<a>를 이용해서 페이지 내부에서 텍스트를 통해서이동하기 예)
<ul>
<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><!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>하이퍼링크 관련 태그</title>
</head>
<body>
<h1>하이퍼링크 태그</h1>
<h2>텍스트 링크 테스트</h2>
<ul>
<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>
<!--ul>(li>a[href="https://"])*3-->
<ul>
<li><a href="https://www.naver.com">네이버</a></li>
<li><a href="https://www.google.com" target="_blank">구글</a></li>
<li><a href="https://wwww.daum.net" target="_self">다음</a></li>
</ul>
<h2>이미지 링크 테스트</h2>
<a href="https://www.w3schools.com" target="_self">
<img src="../resources/image/forest1.PNG" width="150px" height="100px">
</a>
<!-- <iframe width="1000px" height="800px" src="./08_하이퍼링크관련태그.html"></iframe>-->
<h2 >한 페이지 내에서 점프하는 앵커 만들기</h2>
<!--ul>(li>a)*3-->
<ul id="menu">
<li><a href="#content1">기사 내용 1</a></li>
<li><a href="#content2">기사 내용 2</a></li>
<li><a href="#content3">기사 내용 3</a></li>
</ul>
<h3 id="content1">기사 내용1</h3>
<p>
서현아 앵커
코로나19로 일상의 단절이 길어지면서 대화와 소통에 어려움을 느낀 경험 다들 있으실 겁니다.
내 마음을 몰라서, 알아도 표현할 방법을 몰라서, 우리의 말도 점점 더 투박해지는 게 현실인데요.
30년 가까이 아이들의 마음을 어루만져온 동화 작가가 내 마음 제대로 말하는 법을 책으로 썼는데 어른들의 호응이 더 크다고 합니다.
고정욱 작가님 스튜디오에 모셨습니다.
안녕하세요. 먼저 시청자들께 자기소개 부탁드리겠습니다.
고정욱 / 소설가, 동화작가
안녕하십니까? 저는 작가 고종욱입니다.
보시다시피, 잘 안 보이는지도 모르겠네요.
제가 휠체어를 타지 않으면 이동할 수 없는 중증 장애인이고요.
그로 인해서 저의 문학 세계가 장애에 관한 글과 책이 저의 문학 세계를 대표하고 있고요.
문단에서는 저를 장애를 장르로 개척한 작가라는 평가를 받고 있는 사람입니다.
서현아 앵커
특히 아동문학의 장애라는 하나의 장르를 개척하셨습니다.
그동안 참 많은 독자들에게 사랑을 받아왔는데요.
처음에 어떻게 동화 작가가 되셨습니까?
고정욱 / 소설가, 동화작가
저는 1992년, 지금으로부터 한 30년 전이죠.
그때 신촌문예에 '선험'이라는 단편 소설로 등단을 하게 됐습니다.
그래서 계속 소설을 쓰다가, 저희 자녀들이 그때 당시 한 초등학교 다니고 있었을 때인데 아이들이 읽는 책을 읽어봤더니 제 눈에 차지 않는 거예요.
마음에 안 들더라고요.
그래서 내가 하나 써볼게, 이래서 쓰게 된 작품이 '아주 특별한 우리 형'이라는 작품인데 장애인이 주인공이고요.
장애인 문제를 최초로 다룬 동화라고 말할 수 있고요.
그런데 공교롭게도 이 작품이 또 베스트셀러가 되는 바람에 그 해에 가장 많이 팔린 아동문학소 이렇게 평가를 받았는데, 그때부터 동화를 쓴 것이 지금까지 한 24년간 동화를 쓰게 되어서 동화 작가가 되었습니다.
서현아 앵커
첫 작품인 '아주 특별한 우리 형'은 뇌성마비에 장애가 있는 형과 철없지만 마음이 따뜻한 동생의 특별한 이야기를 담은 책입니다.
이 작품을 포함해서 지금까지 모두 348건이나 책을 쓰셨어요.
이렇게 많은 작품이 내게 한 원동력이 뭘까요.
고정욱 / 소설가, 동화작가
글쎄요. 주위에서 제가 제일 많이 썼다고 제일 많은 책을 냈다고 이야기하는데 여러 요소가 있겠습니다만, 제가 제일 처음으로 꼽는 요소는 독서죠.
제가 어려서부터 장애를 갖고 있어서 집에서 책 읽는 것이 가장 즐거운 취미였고요.
그 책을 읽다 보니까 상상의 세계에는 장애가 없더라고요.
그래서 책에 깊이 빠져들게 됐고 그러한 영향으로 인해서 스토리에 대해서, 혹은 스토리텔링에 대해서 큰 관심을 갖고 있었는데 직업으로까지 연결이 된 거고요.
두 번째로는 저의 소명, 제가 소명이라고 말하는데요.
그 소명을 갖게 된 이유가 바로 이러한 작품을 통해서 세상에 장애의 고통과 아픔을 알리고 창의에 대해서 널리 인식할 수 있도록 해야 된다라는 것을 소명으로 삼고 있었기 때문에 허락되는 한 최대한 빨리 열심히 책을 쓰고 글을 써야 되겠다. 이렇게 쓰다 보니까 이렇게 많이 썼어요.
그래서 우리나라에서 가장 많은 책을 발간하게 돼서 일면 죄송하게 생각하고 있습니다.
서현아 앵커
독서와 소명, 이 두 가지가 소중한 책들을 세상에 나오게 했습니다.
최근에도 책을 한 번 내셨습니다.
제목이 '고정욱 선생님이 들려주는 다정한 말, 단단한 말'입니다.
지금 베스트셀러이기도 한데요.
이 책은 어떻게 쓰시게 되셨습니까
고정욱 / 소설가, 동화작가
이것도 역시 저 때문에 쓰게 된 책인데요.
보다시피 저는 장애를 가지고 있기 때문에 학교 다닐 때도 혼자서 뭘 할 수 있는 게 별로 없었습니다.
그러다 보니까 물을 한모금 먹고 싶어도 친구에게 부탁을 해야 되는데 친구에게 명령조로 '야 물 떠와' 이러면 애들이 안 들어주죠.
그래서 항상 말을 하더라도 친구가 기분 좋게 '아무 개야 미안한데 내가 목이 마르거든. 바쁘지 않으면 물 한 컵만 좀 떠다줄 수 없겠니' 이렇게 다정하게 이야기를 하면 거의 모든 아이들이 기꺼이 저의 부탁을 들어줬습니다.
그래서 이런 식으로 저는 말을 하더라도 어떻게 말하는 게 힘이 있고, 어떻게 말하는 게 사람들을 움직일 수 있는가, 이런 것에 대해서 연구를 많이 하게 됐고요.
그 결과 저는 말에 힘이 있다는 것을 알게 되고 이 책을 쓰게 됐는데, 요즘 어린이 청소년들에게 제가 강연을 많이 다니거든요.
다녀보면 너무 그런 쪽으로 애들이 인식이 없어요.
갑자기 다짜고짜 종이 한 장 찢어와가지고 "작가님 사인해 주세요." 자기가 누군지도 말하지 않고, 아니면 또 "아저씨 누구예요?" 그래서 내가 그런 걸 보면서 아 요즘 아이들이 다정하게 말할 줄 모르고 상대방을 배려할 줄 모르는구나. 그래서 쓰게 된 책이 바로 이 '다정한 말 단단한 말'인데요.
이 책을 내가 쓰게 되면서 말만 잘해도 우리는 외롭지 않고 우리는 자기를 지킬 수 있다. 이러한 생각을 가지고 있습니다.
오늘 말씀 잘 들었습니다 고맙습니다.</p>
<a href="#menu">메뉴로 돌아가기 </a>
<h3 id="content2">기사 내용2</h3>
<p>국립국악원이 2022 개정 교육과정에 따라 '국립국악원 교과서 표준악보집'을 발간했습니다.
'교과서 표준악보집'에는 그동안 발간한 국악교육안내서에 실린 총 993곡 가운데 선별한 전래동요와 향토민요, 통속민요 등과 2022 개정 교육과정에 맞춰 새로 선곡한 곡을 더해 모두 200여 곡의 악보가 담겼습니다.
국악원은 "교과서에 수록된 민요나 전래동요의 악보가 출판사마다 달라 혼란을 초래할 수 있어 악보집을 발간했다"며, 교사들이 자료로 활용할 수 있도록 홈페이지에 공개하겠다고 밝혔습니다.</p>
<a href="#menu">메뉴로 돌아가기 </a>
<h3 id="content3">기사내용3</h3>
<p>대만이 지난 1일 입국한 중국발 항공기 4편의 탑승자에 대해 코로나19 검사를 한 결과, 탑승객의 약 27%가 양성으로 나타났습니다.
검사 대상 534명 가운데 146명이 양성 반응을 보였습니다.
중국인의 외국 여행 급증이 예상되는 가운데, 대만은 중국 본토 입국자에 대한 코로나19 검사 의무화 입장을 밝혔고, 미국, 캐나다, 호주 등 최소 14개국이 중국발 입국자에 대한 방역 규제를 강화했습니다.</p>
<a href="#menu">메뉴로 돌아가기 </a>
</body>
</html>
------------------------------------------------------------------------------------------------------------------------------
[폼 관련 태그]
Web Form : 사용자에게 의견이나 정보를 받을 때 사용
<form 태그 속성>
name : from태그 안에서 input태그들을 구분하는 역할, 서버로 값을 전달할 때 name속성과 사용자가 입력하는
값이 key value 세트로 묶어서 전송한다.이름 지정
method : 데이터 전송 방식 지정,
GET 방식은 데이터를 노출시켜 서버에 전달,
POST 방식은 데이터를 URL에 노출시키지 않고 서버에 전달
action : 데이터를 전달할 서버(페이지)를 지정
autocomplete : 이전 입력 내용을 출력하게 지정
<lable> : 폼 요소에 레이블 붙임
<filedest>: 폼 요소를 그룹으로 묶음
<legend> : filedest로 묶은 폼 태그에 제목을 지정
------------
<input> : 사용자에게 데이터를 받기 위한 태그, type 속성에 따라 받는 데이터가 결정됨(텍스트, 날짜, 이미지, 버튼 ..)
id : 동이한 타입이 폼 요소 구분목적
name : 태그를 구별할 수 있게 이름 붙임
autofocus : 요소에 초점이 맞춰짐
----------
<hidden> : 안 보이지만 서버로 데이터 보낼 때 보내지는 타입(사용자에게는 안 보여야 되,,지만,,,,,
[text타입 속성]
size : 텍스트 필드의 길이 지정
value : 표시될 내용 지정
maxlength : 최대 문자 입력 가능 수
password타입
-브라우저별로 다르게 가려져서 표시됨
search타입
- 사용자에게 입력 받기 위한 타입
- 입력시 X표시가 되고 검색어를 쉽게 지울 수 있다
email타입
- 브라우저별 차이 존재
-공백x 영문자, 마침표
tel타입
- 모바일에선 숫자 키보드로 접근됨
<!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>폼 관련 태그</title>
</head>
<body>
<h1>폼 관련 태그</h1>
<h2>폼 태그의 기본 구조</h2>
<h3>검색 폼</h3>
<form method="GET">
<!--name : from태그 안에서 input태그들을 구분하는 역할, 서버로 값을 전달할 때 name속성과 사용자가 입력하는
값이 key value 세트로 묶어서 전송한다.이름 지정-->
<label>
검색할 내용 : <input type="text" name="search">
</label>
<!--submit 버튼을 눌렀을 때 method 속성에 지정된 전송 방식으로 action속성에 지정한 서버에 입력한 값들을 전달한다.-->
<input type="submit" value="검색">
</form>
<h3>회원가입 폼</h3>
<form name="signUp_form" autocomplete="off">
<fieldset>
<legend>회원정보</legend>
<label for="userId">아이디 : </label>
<input type="text" id="userId" name="userId" required >
<br><br>
<label for="userPwd">패스워드 : </label>
<input type="password" id="userPwd" name="userPwd" placeholder="패스워드를 입력하세요.">
</fieldset>
<fieldset>
<legend>배송정보</legend>
<label for="userName">수령인 : </label>
<input type="text" id="userName" name="userName" readonly>
<br><br>
<label for="addr">주소 : </label>
<input type="text" id="addr" name="addr" autocomplete="off">
</fieldset>
<br>
<input type="submit" value="회원가입">
</form>
<h2>input 태그</h2>
<h3>type="hidden"</h3>
<form>
<input type="hidden" name="hiddenvalue" value="1234">
<input type="submit" value="전송">
</form>
<h3>type="text|password|search|url|email|tel"</h3>
<form>
<!--
한 줄 짜리 텍스트를 입력 가능한 텍스트 상자
-->
<label for="id">아이디 : </label>
<input type="text" name="id" id="id" value=""
size="30" maxlength="14" placeholder="아이디 입력" autofocus>
<br><br>
<label for="pwd">패스워드</label>
<input type="password" name="pwd" id="pwd"
size="30" maxlength="8" placeholder="비번 입력">
<br><br>
<label for="searchValue">검색 : </label>
<input type="search" name="searchValue" id="searchvalue"
size="30" maxlength="10" placeholder="검색 내용 입력">
<br><br>
<label for="homePage">홈페이지 : </label>
<input type="url" name="homePage" id="homePage" value="https://">
<br><br>
<label for="email">이메일 : </label>
<input type="email" name="email" id="email" placeholder="이메일을 입력">
<br><br>
<label for="phone">전화번호 : </label>
<input type="tel" name="phone" id="phone">
<br><br>
<input type="submit" value="전송">
<input type="reset" value="초기화">
</form>
</body>
</html>'Front > HTML' 카테고리의 다른 글
| HTML개요 (0) | 2023.01.19 |
|---|---|
| 하리보 전시 입구 사진 HTML, 구현 (0) | 2023.01.11 |
| HTML5 type & tags (0) | 2023.01.05 |
| HTML5 태그1 (0) | 2023.01.03 |
