ABOUT ME

    -

    Today
    -
    Yesterday
    -
    Total
    -
    • [HTML] 003. HTML 관찰(태그 및 속성 관찰)
      SsY/Class 2023. 5. 4. 17:50
      728x90
      HTML 태그 관찰
      • Test014
        - colspan , rowspan 활용하여 테이블 셀 병합 실습
      <!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Test014.html</title>
</head>
<body>

<div>
	<h1>테이블의 셀 병합 실습</h1>
	<hr>
</div>

<div>

<table border="1">
	<tr>
		<td rowspan="4">A</td>
		<td colspan="2">B</td>
		<td colspan="3">C</td>
		<td colspan="2">D</td>
	</tr>
	<tr>
		<td colspan="2">E</td>
		<td colspan="2">F</td>
		<td>G</td>
		<td>H</td>
		<td>I</td>
	</tr>
	<tr>
		<td colspan="2">J</td>
		<td>K</td>
		<td colspan="2">L</td>
		<td>M</td>
		<td>N</td>
	</tr>
	<tr>
		<td colspan="2">O</td>
		<td colspan="3">P</td>
		<td>Q</td>
		<td>R</td>
	</tr>
	<tr>
		<td rowspan="4">8</td>
		<td colspan="7">S</td>
	</tr>
	<tr>
		<td colspan="2">T</td>
		<td colspan="3">U</td>
		<td rowspan="3">V</td>
		<td>W</td>
	</tr>
	<tr>
		<td>X</td>
		<td>Y</td>
		<td colspan="2">Z</td>
		<td>1</td>
		<td>2</td>
	</tr>
	<tr>
		<td>3</td>
		<td>4</td>
		<td colspan="2">5</td>
		<td>6</td>
		<td>7</td>
	</tr>
</table>


</div>

</body>
</html>

      •  Test015
        - 움직이는 태그 관찰 실습
      <!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Test015.html</title>
</head>
<body>

<div>
	<h1>움직이는 태그 실습</h1>
	<hr>
</div>

<!-- check -->
<!-- 쓰지 말 것 -->
<div>
	<marquee>기본적인 방향 왼쪽으로 이동(*/ω＼*)</marquee>
	<marquee behavior="alternate">좌우 왕복 이동(*/ω＼*)</marquee>
	<marquee direction="right">오른쪽으로 이동 (❁´◡`❁)</marquee>
	<marquee direction="up">위쪽으로 이동 (❁´◡`❁)</marquee>
</div>
<br><br>

<div>
	<h2>속도 조절 : scrollamount</h2>
	<marquee behavior="alternate" scrollamount="1"> 
		<img src="images/img_04.gif">
	</marquee>
	<marquee behavior="alternate" scrollamount="100"> 
		<img src="images/img_04.gif">
	</marquee>
	<marquee behavior="alternate" scrollamount="50" bgcolor="black">
		<img src="images/img_04.gif">
	</marquee>
</div>
<br><br>

<div>
	<h2>속도 조절 : scrolldelay</h2>
	<marquee behavior="alternate" scrolldelay="1"> 
		<img src="images/img_04.gif">
	</marquee>
	<marquee behavior="alternate" scrolldelay="100"> 
		<img src="images/img_04.gif">
	</marquee>
	<marquee behavior="alternate" scrolldelay="50" bgcolor="skyblue">
		<img src="images/img_04.gif">
	</marquee>
</div>
<br><br>
	<h2>위아래로 움직이며 옆으로 이동</h2>
	<marquee>
		<marquee direction="down" behavior="alternate" height="100">
			cheer up~
		</marquee>
	</marquee>	
</body>
</html>
      • Test016
        - 메타 태그 관찰 실습

      ※ 메타 데이터 : 데이터에 대한 데이터 (@어노테이션 설명하면서 한 번 설명)
          ex) 해시태그 (떡볶이 사진만 올리고 떡볶이 키워드는 안올렸는데 떡볶이 검색하면 떡볶이 이미지가 나오는 이유)
          // 텍스트 기반으로 진행되던 때와 달리, 이미지나 영상으로 표현하는 것이 많아지면서
          // 해당 데이터가 어떠한 것을 설명한 것인지 확인할 수 있게 하는 것

      <!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Test016.html</title>

<meta name="keywords" content="html,연습,웹,예제,태그,속성">
<meta name="description" content="html 연습 페이지 입니다.">
<meta name="author" content="planet-c">
<meta name="generator" content="eclipse">

<meta http-equiv="refresh" content="5; url=http://www.naver.com">

</head>
<body>

<div>
	<h1>메타 태그 실습</h1>
	<hr>
</div>

<h2>하나 둘 셋 넷 짠~</h2>
	
</html>

      • Test017
        - 한줄 데이터 입력상자 / 암호 입력상자 관찰 실습
      <!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Test017.html</title>
</head>
<body>

<div>
	<h1>한 줄 데이터 입력상자 / 암호 입력상자</h1>
	<hr>
</div>

<div>
	<form>
		<!-- size : 박스의 크기, maxlength : 최대 글자수, placeholder : 예시처럼 회색으로 보여지는 것 -->
		회원 아이디 
		<input type="text" name="name" size="10" maxlength="8" placeholder="ex) superman"><br>
		패스워드
		<input type="password" name="pwd" size="10" maxlength="10"><br>
	</form>
</div>
<br><br>

<!-- maxlength 활용 -->
<div>
	<form>
		휴대폰 번호
		<input type="text" name="phone1" size="5" maxlength="3"> -
		<input type="text" name="phone2" size="6" maxlength="4"> -
		<input type="text" name="phone3" size="6" maxlength="4"> 
	</form>
</div>

</body>
</html>

      • Test018
        - 여러 줄 데이터 입력 글 상자 관찰 실습
      <!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Test018.html</title>
</head>
<body>

<div>
	<h1>여러 줄 데이터 입력 글 상자</h1>
	<hr>
</div>

<div>
	<form>
		<textarea rows="10" cols="50">많은 내용을 기재할 수 있는 엘리먼트로
태그 사이의 공백문자 인식
	엔터키를 통한 개행처리(tab키도 인지한다)</textarea>
	</form>
</div>
<br><br>

<div>
	<form>
		<!-- 단독태그이기 때문에 
		 피시데이터(태그 사이 존재하는 입력공간)가 없어서
		 값을 value 로 넣어준다 -->
		<input type="text" value="입력 내용">
	</form>
</div>
</body>
</html>

      주의사항 check 확인!

      • Test019
        - 체크박스 만들기 관찰 실습
      <!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Test019.html</title>
</head>
<body>

<div>
	<h1>체크박스 만들기</h1>
	<hr>
</div>

<div>
	<form>
		<p>오늘 점심으로 먹고싶은 메뉴는?</p>
		
		<!-- checkbox 와 입력된 내용이 관계가 없기 때문에
		 꼭 value 를 명시해야한다. -> 즉, 체크시에 value 값이 전송되는 것이다.
		 또한 name 속성이 같은 값을 부여해야한다.-->
		<label>
		<input type="checkbox" name="foodcheck" value="1"> 밥
		</label>
		<label>
		<input type="checkbox" name="foodcheck" value="2"> 콩나물국
		</label>
		
		<!-- 글자와 체크박스가 떨어져있는 상황에서도 클릭시에 체크되게 하려면 -->
		<input type="checkbox" name="foodcheck" value="3" id="label3"> 
		<br>
		<br>
		<br>
		<label for="label3">미역국</label>
		<br>
		
		<input type="checkbox" name="foodcheck" value="4"> 김치찌개
		<input type="checkbox" name="foodcheck" value="5"> 달걀말이
		<input type="checkbox" name="foodcheck" value="6"> 장조림
		<input type="checkbox" name="foodcheck" value="7"> 김치
		<input type="checkbox" name="foodcheck" value="8"> 김
		<input type="checkbox" name="foodcheck" value="9"> 멸치볶음
		<input type="checkbox" name="foodcheck" value="10" id="label10"> 불고기
		
		<!-- 이렇게 중간에 다른 것이 있는 경우에도 위와 같이 클릭시에 id와 lable 을 이용해 체크 가능 -->
		<input type="text">
		<br>
		<input type="password">
		<br><br><br><br>
		
		<label for="lable10">불고기</label>
	
	</form>
</div>

</body>
</html>

      • Test020
        - 라디오 버튼 관찰 실습
      <!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Test020.html</title>
</head>
<body>

<div>
	<h1>라디오 버튼 만들기</h1>
	<!-- 여러 값들 중 하나만 선택할 수 있는 체크박스 -->
	<hr>
</div>

<div>
	<form>
		<p>1. 당신의 성별은?</p>
		<!-- 체크박스와 달리 토글키(선택-선택해제)가 아님 -->
		<label>
		<input type="radio" name="gender" value="female" checked="checked"> 여자
		</label>
		
		<input type="radio" name="gender" value="male" id="m"> 
		<label for="m">남자</label>
		
		<br><br>
		
		<p>2. 당신이 좋아하는 과목은?</p>

		<label>
			<input type="radio" name="subject" value="kor"> 국어
		</label>
		<label>
			<input type="radio" name="subject" value="eng"> 영어
		</label>
		<label>
			<input type="radio" name="subject" value="mat" checked="checked"> 수학
		</label>
		<label>
			<input type="radio" name="subject" value="soc"> 사회
		</label>
		<label>
			<input type="radio" name="subject" value="sci"> 과학
		</label>
		
		<br><br>
	
	</form>
</div>


</body>
</html>

      • Test021 & Test022
        - 전송, 취소 버튼 만들기
        - Test021 → Test022 로 넘어가는 url 존재 : 연결해서 확인하기
      <!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Test021.html</title>
</head>
<body>

<div>
	<h1>전송, 취소 버튼 만들기</h1>
	<hr>
</div>

<div>
	<!-- form : 데이터 전송 및 페이지 요청 -->
	<!-- 폼으로 구성한 데이터의 내용을 전달(전송)할테니... 요청한 페이지와 만날 수 있게 해달라~!!! -->
	<form action="http://localhost:8090/WebApp01/Test022.html">
		이름(※)
		<input type="text" size="15" maxlength="10" name="userName" value="루피">
		<br>
		이메일
		<input type="text" size="15" maxlength="20" name="userEmail">
		<br>
		하고싶은 말
		<textarea rows="10" cols="50" name="userContent"></textarea>
		<br><br>
		
		<!-- 아래 두 버튼 차이점 확인 -->
		<input type="submit" value="전송하기1"> <!-- 내용이 사라지며 새로고침 ~.~ -->
		<input type="button" value="전송하기2">	<!-- 내용이 사라지지않고 그대로 -->
		<br><br>
		
		<!-- input은 단독태그이기 때문에 사이에 다른 내용을 끼워넣을 수 없지만
		button 은 사이에 다른 내용을 끼워넣을 수 있기 때문에 별도로 존재함. -->
		<button>전송하기3</button>
		<button><img src="images/btn_03.png"></button>
		<br><br>
		
		<!-- 이렇게 type을 명시해주지 않으면 default값으로 submit 버튼이 된다. -->
		<button type="button">전송하기4</button>
		<button type="submit">전송하기5</button>

		<button>전송하기6</button> <!-- submit -->
		<br><br>
	
		<!-- 폼을 clear하는 것이 아니라 reset -> 원래의 형태로 되돌리는 것이다.
		즉, 고정값이 있다면 기존 값을 원래대로 가져오기 때문에 값 자체가 남아있다.
		clear 는 모든 컨트롤을 지우는 것이다. -->
		<input type="reset" value="취소하기">
		<br><br>
	</form>
</div>

</body>
</html>

      <!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Test022.html</title>
</head>
<body>

<div>
	<h1>Test021.html 확인</h1>
	<hr>
</div>

<div>
	<h2>난 Test022.html 다.</h2>
	<h2>너의 개인정보는 내가 옴뇸뇸 했다</h2>
	<h2>너의 정보는 중국으로 10원에 팔려나갈 것이다.</h2>
</div>

</body>
</html>

      • Test023
        - 드롭다운메뉴(selectbox) 관찰 실습

      <!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Test023.html</title>
</head>
<body>

<div>
	<h1>드롭다운메뉴(selectbox) 만들기</h1>
	<hr>
</div>

<div>
	<!-- checkbox 에서는 요청주소?속성명=속성값[&속성명=속성값...] -->
	<!-- selectbox 에서는 요청주소?selectSports=s3[&속성명=속성값...] -->
	<form>
		<!-- 	
		<p>당신이 가장 좋아하는 운동은?</p>
		<select name="selectSports">
			<option> --- 선택하세요 --- </option>
			<option value="s1">야구</option>
			<option value="s2">축구</option>
			<option value="s3">농구</option> 농구 선택시
			<option value="s4">배구</option>	
		</select>
		 -->
		 
		 <!-- 직책대로 한다면 회장 -> 사원 순이지만
		 사용자 편의성을 고려한다면 가장 위에 사원이 있어야한다.
		 그렇다고 사원을 맨 위로 올리면 회장님이 싫어하신다~~ ^*^
		 그렇기 때문에 radio 의 checked 와 같은 의미인 selected 를 사용 -->
		 
		 <p>당신의 직책은?</p>
		 <select name="selectJikwi">
		 	<option value="1">회장</option>
		 	<option value="2">사장</option>
		 	<option value="3">부장</option>
		 	<option value="4">과장</option>
		 	<option value="5">대리</option>
		 	<option value="6" selected="selected">사원</option>
		 </select>
		 <br><br>
		 
		 <!-- 다중선택 select box 만들기 -->
		 <p>가고싶은 여행지는?</p>
		 <select name="trav" size="6" multiple="multiple">
		 	<option value="val1">백두산</option>
		 	<option value="val2">지리산</option>
		 	<option value="val3">한라산</option>
		 	<option value="val4">설악산</option>
		 	<option value="val5">속리산</option>
		 	<option value="val6">북한산</option>
		 </select>
		 
	</form>
</div>

</body>
</html>

      html 실습 시 페이지 새로고침이 잘 되지 않을때

      더보기

      ※ 해당 브라우저의 인터넷 사용기록 삭제에 들어가서 캐시된 이미지 및 파일을 삭제한다.
          + 쿠키 및 기타 사이트 데이터를 같이 지워주는 것이 좋다

      728x90
      저작자표시 비영리 변경금지

      'SsY > Class' 카테고리의 다른 글

      [CSS] 002. CSS 관찰 실습  (0) 2023.05.08
      [CSS] 001. CSS 의 개요, CSS 관찰 실습  (0) 2023.05.04
      [HTML] 002. Eclipse 설정, HTML 관찰(태그 관찰)  (1) 2023.05.03
      [HTML] 001. HTML 의 개요 , Eclipse 설정 Export-Import 로 기존 설정 가져오기  (0) 2023.05.02
      008. CallableStatement  (0) 2023.05.02

      관련글 관련글 더보기

    Designed by planet-si

    티스토리툴바