달리는 자동차
html 정리3 본문
<iframe src="링크할 주소"></iframe>
<!--ifame태그
inline frame의 약자이며 다른 문서를 불러와서 페이지 내부에서 보여지게 할 수 있다.
HTML5이전에도 이후에도 iframe을 사용하지 않는 것을 권고 한다.
-->
<!DOCTYPE html>
<html>
<head>
<meta charset = "UTF-8"/>
<title>iframe연습</title>
</html>
<body>
<h2>iframe연습</h2>
iframe은 현재 문서에 다른 문서를 포함시켜 나타내고 싶을 때<br>
사용하는 태그로 src속성에 나타날 문서명을 설정한다.</br>
<br /><br /><br />
<iframe src="http://www.naver.com" width="500" height="300" scrolling="yes"
align="center" name="f1"></iframe>
</body>
</html>| <iframe의 속성> name : 프레임의 이름을 설정 width : 프레임의 너비를 설정 height : 프레임의 높이를 설정 frameborder : 0으로 설정하면 프레임의 테두리선을 보이지 않게 하며 1을 설정하면 프레임의 테두리선을 나타나게 한다. scrolling : 스크롤바의 표시여부를 나타낸다.(yes,no,auto) 잠깐, iframe을 사용하지 말아야 할 이유를 알아보자.. 이유 1. 보안에 취약할 수 있다. iframe을 사용하여 구성 요소를 구현하면 사이트 간 공격(XSS)에 취약해진다. 이유 2. 사용성 문제를 일으킨다. 브라우저의 뒤로가기 버튼을 간헐적으로 작동하지 못하게 할 수있다. 그것은 사용자를 혼란스럽게 할 수있다. 이유3. 웹 크롤링 지연 Google 웹 마스터 포럼에 따르면, iframe이 웹 크롤링에 문제를 끼칠 수 있음이라고 서술하고있다. Google Web Crowler는 가능한 한도 내에서 프레임과 iframe을 지원합니다. 프레임은 웹의 개념 모델과 일치하지 않기 때문에 검색 엔진에 문제를 일으킬 수 있습니다. 이 모델에서는 한 페이지에 하나의 URL 만 표시됩니다. iframe을 사용하는 페이지는 단일 페이지 내의 여러 URL (각 프레임 당 하나씩)을 표시합니다. Google은 iframe이 포함 되어있는 콘텐츠를 프레임이 포함 된 페이지와 연결하려고 시도하지만, 이를 보장하지는 않습니다. 결론적으로는 iframe은 여러 보안 문제를 일으킬 수 있으며, 개별적으로 작동하고, iframe내에서 따로 연산된 후 보여지므로 필연적으로 사이트의 overhead를 유발 할 수 있습니다. 출처: https://syudal.tistory.com/entry/html-iframe을-사용하지-말아야-할-이유-단점 [수달의 IT 세상] |
<input type='속성' name='값' value='값'/>
<!--
name의 속성 값이 예를 들어 userName이라고 할때, usrName은 서버에서 이 입력 값을 구별하기 위해 사용
하는 값이다.
서버측 프로그래밍 언어인 PHP에서 userName의 값을 받기 위해서 다음의 코드를 사용한다.
-->
<?php
$_POST['userName']
?>
<!--
value의 속성 값은 실제 서버에 전송할 데이터를 의미한다.userName으로 전달하는 실제 값이다.
value의 속성 값이 1이라면 userName이라는 이름으로 값은 1이 전달된다.
-->| name 속성의 값이 예를 들어 userName이라고 할때, (name='userName')은 서버에서 이 입력값을 구별하기 위해 사용하는 값이다. userName은 서버에서 이 입력 값을 구별하기 위해 사용하는 값이다. |
<input type="text" name="서버에서 인식할 값" value="값"/>
<!--
name속성의 값은 서버에서 주로 사용하며 용도에 맞는 이름을 설정한다.
value속성의 값은 입력란의 값을 의미한다.
미리 입력하면 디폴트 값이 되며 이후에 다른 값을 입력하면 입력한 값이 서버에 전송된다.
값을 받기위해 value값이 없는 경우도 있다.
-->
<input type="email" name="서버에서 인식할 값"/>
<!--
타입의 속성값으로 text를 설정해서 email주소를 입력하는 박스를 만들 수도 있다.
그러나 type의 속성 값으로 email을 사용하면 폼의 데이터를 전송시에 email의 유효성을 검사하는 기능을
갖는다.
-->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>코드연습</title>
</head>
<body>
<form name="해당 폼의 이름" action="값을 보낼 주소" method="post">
<input type="email" name="userEmail">
<input type="submit" value="전송"/>
</form>
</body>
</html>
<input type="search" name="searchKeyword"/>
<!--
검색을 입력하는 박스 search
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>input type속성값 search</title>
</head>
<body>
<form name="폼의 이름" action="값을 보낼 주소" method="post">
<input type="serch" name="searchKeyword"/>
</form>
</body>
</html>
text입력폼과 다르게 검색어 입력폼에 x버튼이 활성화된다.
-->
<input type="url" name="서버에서 인식할 값"/>
<!--
url속성 설명
type속성의 값으로 text를 설정해서 url을 입력하는 박스를 만들수 있다.
하지만 type속성 값으로 url을 사용하면 입력한 url의 유효성 검사를 할 수 있다.
-->
<!--숫자값만 인식되는 코드-->
<input type="number" name="서버에서 인식할 값"/>
<!--스마트폰에서도 마찬가지로 숫자만 입력되게 하려면 pattern속성 사용-->
<input type="number" name="userPone" pattern="\d*"/>
<!-- d는 digit를 의미하며 digit는 숫자이다.
d를 문자가 아닌 숫자를 의미하는 d로 구분짓기 위해 \를 사용했으며 *은 모든것을 의미한다.-->
<input type="number" name="서버에서 인식할 값" step="3">
<--
step 태그는 type속성이 number일 때 숫자의 이동간격을 지정할 수 있는 속성이다.
예를 들어 간격을 3으로 설정했다면 1 4 7 11 와 같은 순으로 올리거나 내릴 수 있다.
-->
<!--비밀번호-->
<input type="password" name="서버에서 인식할 값">
<!--여러개의 선택지 두기 : 체크박스-->
<input type="checkbox" name="서버에서 인식할 값" value="서버에 전송할 값"/>
<!--체크박스 예시-->
<input type="chekbox" name="hobby" value="music"/>음악듣기<br />
<input type="checkbox" name="hobby" value="sleep"/>잠자기<br />
<input type="checkbox" name="hobby" value="brainFade"/>멍때리기<br />
<!--한개의 값만 선택 : 라디오버튼-->
<input type="radio" name="서버에서 인식할 이름" value="보낼 값"/>
<!--예시-->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>라디오버튼</title>
</head>
<body>
<h3>성별</h3>
<form name="폼이름" action="값을 보낼주소" method="post">
<input type="radio" name="gen" value="w"/>여성
<input type="radio" name="gen" value="m"/>남성
</form>
</body>
</html><!--버튼만들기-->
<input type="button" value="버튼에 표시할 텍스트"/>
<!--예제-->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>버튼연습</title>
</head>
<body>
<form name="해당 폼의 이름" action="값을 보낼 페이지" method="post">
<input type="button" value="누르지마" onclick="alert('누르지마라고했잖아!!!!')"/>
</form>
</body>
</html>
<!--서버에 데이터를 전송하는 버튼-->
<input type="submit" value="버튼에 표시할 텍스트"/>
<!--submit버튼을 누르면 해당 폼 태그의 action속성에 있는 파일로 데이터를 전송한다.-->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>action으로 값 전달</title>
</head>
<body>
<form name="text" action="test.php" method="post">
아이디 : <input type="text" name='id'/>
비밀번호 : <input type="password" name="pw"/>
<input type="submit" value="전송"/>
</form>
</body>
</html>
<!--reset버튼-->
<input type="reset" value="재작성"/>
<!--입력박스에 어떠한 값을 입력해야하는지 알려주는 기능 : palceholder-->
<input type="text" name="userid" palceholder="아이디를 입력하세요"/>
<!--palceholder는 실제로 입력 된 값이 아닌 단순히 표시만 하기 때문에
사용자가 입력한 값에 어떠한 영향도 주지 않는다.-->
<!--입력창에 자동포커스 적용 : autofocus-->
<input type="text" name="서버에서 인식할 값" autofocus/>
<!--마우스를 클릭할 필요없이 바로 해당 입력창에 텍스트를 입력할 수 있음을 의미한다.-->
<!--자동완성기능 : autocomplete-->
<input type="text" name="서버에서 인식할 값" autocomplete="on 또는 off"/>
<!--과거에 입력한 텍스트중 유사한 단어를 표시한다.-->
<!--필수입력 : required-->
<input type="text" name="서버에서 인식할 값" required/>
<!--읽기전용: readonly-->
<input type="text" name="서버에서 인식할 값" readonly/>
출처 : 에버디벨님의 소중한 지식을 100% 참고하였습니다. 사이트: ttps://www.everdevel.com/HTML
Comments