본문 바로가기
Frontend

07월 02일 화 | UI 화면구현 02 - HTML과 CSS

by 구라미 2019. 7. 2.

HTML

1. 테이블 셀합치기

 

- 가로

<table style="width:100%">
  <tr>
    <th>Name</th>
    <th colspan="2">Telephone</th>
  </tr>
  <tr>
    <td>Bill Gates</td>
    <td>55577854</td>
    <td>55577855</td>
  </tr>
</table>

 

-세로

<table style="width:100%">
  <tr>
    <th>Name:</th>
    <td>Bill Gates</td>
  </tr>
  <tr>
    <th rowspan="2">Telephone:</th>
    <td>55577854</td>
  </tr>
  <tr>
    <td>55577855</td>
  </tr>
</table>

 

2. 테이블 셀합치기 연습

 

- 계산기 만들기

<!DOCTYPE html>
<html lang="ko">
<head>
	<meta charset="utf-8">
	<style>
		
		body {background: #111}
		caption {margin-bottom: 10px;}
		tr {align-items: center; text-align: center; }
		td {width: 20px; height: 50px; border-radius: 5px; font-size: 18px; background: #e8e8e8;}
		td:hover {background: #f5f5f5;}
		.enter {background: orange}

	</style>

	<title>Test01_</title>
</head>
<body>
	<table style="width:380px">
	  <caption style="font-size:20px; color:#fff;">Calculator</caption>	  
	  <tr class="row">
	    <td>/</td>
	    <td>*</td>
	    <td>-</td>
	    <td rowspan="2">+</td>
	  </tr>
	  <tr class="row">
	    <td>7</td>
	    <td>8</td>
	    <td>9</td>
	  </tr>
	  <tr class="row">
	    <td>4</td>
	    <td>5</td>
	    <td>6</td>
	    <td rowspan="2" class="enter">enter</td>
	  </tr>
	  <tr class="row">
	    <td>1</td>
	    <td>2</td>
	    <td>3</td>
	  </tr>
	  <tr class="row">
	    <td colspan="4">insert</td>
	  </tr>
</table>

</body>
</html>

 

 

- 셀합치기 연습하기

<!DOCTYPE html>
<html lang="ko">
<head>
	<meta charset="utf-8">
	<style>
		
		body {background:;}
		table {margin: auto;}
		caption {margin-bottom: 10px;}
		tr {align-items: center; text-align: center; }
		td {width: 20px; height: 50px; border-radius: 5px; font-size: 18px; background: #e8e8e8;}
		td:hover {background: #f5f5f5;}
		.enter {background: orange}
		video {position: fixed; top:0; left:0; min-height: 100%; min-width: 100%; width:auto; height: auto; z-index: -1;}

	</style>

	<title>Test01_</title>
</head>
<body>
	<video autoplay loop poster="img.jpg">
		<source src="../images/Pexels Videos 1918465.mp4" type="video/mp4">
	</video>
	<table style="width:380px">
	  <caption style="font-size:20px; color:#fff;">Calculator</caption>	  
	  <tr class="row">
	    <td colspan="2"></td><td rowspan="4"></td><td></td><td></td>
	  </tr>
	  <tr class="row">
	    <td></td><td></td><td></td><td></td>
	  </tr>
	  <tr class="row">
	    <td colspan="2" rowspan="2"></td><td></td><td></td>
	  </tr>
	  <tr class="row">
	    <td></td><td></td>
	  </tr>
	  <tr class="row">
	    <td></td><td></td><td colspan="3"></td>
	  </tr>
</table>

</body>
</html>

 

하면서 배경에 비디오깔기도 해보았음.

 

 

HTML은 문서를 구조화하기 위한 언어.

구조적인,의미있는 웹문서의 구조를 짜야한다.

 

 

3. 리스트 만들기

ul,li

- 여러가지 리스트

리스트는 중첩할 수 있다.

 

<!DOCTYPE html>
<html lang="ko">
<head>
	<meta charset="utf-8">
	<title>List</title>

</head>
<body>
	<ul type="disc">
		<li>금난새</li>
		<li>손열음</li>
		<li>정경화</li>
		<li>정명훈</li>
	</ul>

	<ul type="circle">
		<li>라흐마니노프</li>
		<li>리스트</li>
		<li>쇼팽</li>
		<li>드뷔시</li>
	</ul>

	<ul type="square">
		<li>셜록홈즈</li>
		<li>아르센 뤼팽</li>
		<li>포와로</li>
		<li>콜롬보</li>
	</ul>

	<ol>
		<li>김연아</li>
		<li>아사다 마오</li>
		<li>안도미키</li>
		<li>소트니코바</li>
	</ol>

	<ul>
	  <li>Coffee</li>
	  <li>Tea
	    <ul>
	      <li>Black tea</li>
	      <li>Green tea</li>
	    </ul>
	  </li>
	  <li>Milk</li>
	</ul>

</body>
</html>

 

dd,dl도 참고

 

 

4. Block

웹문서에서는 블럭을 잡는것도 중요하다.

https://www.w3schools.com/html/html_blocks.asp

 

개념적차이

 

콘텐츠 모델

보통 인라인 요소는 데이터와 다른 인라인 요소만 포함할 수 있으며, 블록 요소는 포함할 수 없습니다.

 

서식

기본적으로, 인라인 요소는 문서 흐름에서 줄바꿈을 강제하지 않습니다. 반면 블록 요소는 줄바꿈을 유발합니다. (물론 언제나처럼 CSS로 바꿀 수 있습니다)

 

 

Block요소

Inline요소

 

인라인요소 예제

<div>다음 span은 <span class="highlight">인라인 요소</span>로,
영향 범위의 시작과 끝을 알 수 있도록 배경색을 지정했습니다.</div>

이 예제에서 <div>는 텍스트를 가진 블록 레벨 요소입니다. 그 텍스트 안에는 인라인 요소인 <span>이 존재합니다. <span>은 인라인이기 때문에 전체 문단이 끊기지 않고 하나로 그려집니다.

 

 

 

 

 

5. Form 요소

input, button

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>form</title>
	<style type="text/css">
		
		input { height: 34px; border: 1px solid #bbb; }
		button {width: 80px; height: 40px; border: 1px solid #bbb; border-radius: 5px;background: #eee;}
		.login {top: 1000px;}

	</style>
</head>
<body>
	<div class="login">
		<input type="text" name="">		
		<button>로그인</button>		
	</div>

	<hr>
	<input type="button" value="확인">
	<input type="button" value="검색">
	
	<hr>
	<!-- 입력자료를 서버로 전송  -->
	<input type="submit" value="전송">
	<!-- 사용자가 입력한 정보를 취소 -->
	<input type="reset" value="취소">
	<!-- type=button + type=submit -->
	<button>확인</button>

</body>
</html>

 

결과값

 

form태그는 개별적, form안에 form 불가

<form>에 관련된 속성들은

 

name="" 폼이름
id="" 폼아이디
method="" 전송방식 get | post
action="" 요청한 입력자료를 서버에서 받는 페이지 및 명령어
enctype="" 파일 첨부해서 전송하는 경우

 

HTML <form> enctype Attribute

<form action="/action_page_binary.asp" method="post" enctype="multipart/form-data">
  First name: <input type="text" name="fname"><br>
  Last name: <input type="text" name="lname"><br>
  <input type="submit" value="Submit">
</form>

 

등이 있다.

 

 

Form태그 전체예제

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>form</title>
	<style type="text/css">
		
		body {font-size: 15px; letter-spacing: -0.5px;}
		.login {height:34px; border:1px solid #bbb; border-radius: 5px;}
		button {width: 80px; height: 40px; border: 1px solid #bbb; border-radius: 5px;background: #eee;}
		select {height:34px; border:1px solid #bbb; border-radius: 5px; }
		textarea {width: 500px; height: 150px; border-radius: 5px;}


	</style>
</head>
<body>
	
	<hr>
	<input type="button" value="확인">
	<input type="button" value="검색">
	
	<hr>
	<!-- 입력자료를 서버로 전송  -->
	<input type="submit" value="전송">
	<!-- 사용자가 입력한 정보를 취소 -->
	<input type="reset" value="취소">
	<!-- type=button + type=submit -->
	<button>확인</button>

	<hr style="margin-bottom: 30px; ">

	<form name="memfrm" id="memfrm" method="get" action="ok.jsp" enctype="">
		<h3>로그인</h3>
		아이디: <input class="login" type="text" name="userid" id="userid" size="20" maxlength="10" placeholder="아이디를 입력해주세요." autofocus>
		비밀번호: <input class="login" type="password" name="userpw" id="userpw" maxlength="20">
		
		<hr>
		<h3>우편번호</h3>
		우편번호: <input type="text" name="zipcode" id="zipcode" size="10" readonly> 
		<input type="button" value="주소찾기">
		
		<hr>
		<h3>라디오버튼</h3>
		성별: <input type="radio" name="gender" value="m" checked>남
		      <input type="radio" name="gender" value="f">여
		
		<hr>
		<h3>체크박스</h3>
		취미: <input type="checkbox" name="h1" value="movie" checked>영화
		      <input type="checkbox" name="h2" value="book" >독서
		      <input type="checkbox" name="h3" value="climb" >등산
		      <input type="checkbox" name="h4" value="cook" >요리
		      <input type="checkbox" name="h5" value="exer" >운동

		<hr>
		<h3>선택목록</h3>
		생년월일: <select name="myYear" id="myYear">
					<option value="2019">2019년</option>
					<option value="2018" selected>2018년</option>
					<option value="2017">2017년</option>
					<option value="2016">2016년</option>
					<option value="2015">2015년</option>
				  </select>
					
					<!-- multiple은 다중선택 -->
				  <select name="myMonth" id="myMonth">
				  	<option>1월</option>
				  	<option>2월</option>
				  	<option>3월</option>
				  	<option>4월</option>
				  	<option>5월</option>
				  	<option>6월</option>
				  	<option>7월</option>
				  	<option>8월</option>
				  	<option>9월</option>
				  	<option>10월</option>
				  	<option>11월</option>
				  	<option>12월</option>
				  </select>

				  <select name="myDate" id="myDate">
				  	<option>1일</option>
				  	<option>2일</option>
				  	<option>3일</option>
				  	<option>4일</option>
				  	<option>5일</option>
				  	<option>6일</option>
				  	<option>7일</option>
				  	<option>8일</option>
				  	<option>9일</option>
				  	<option>10일</option>
				  	<option>11일</option>
				  	<option>12일</option>
				  	<option>13일</option>
				  	<option>14일</option>
				  	<option>15일</option>
				  	<option>16일</option>
				  	<option>17일</option>
				  	<option>18일</option>
				  	<option>19일</option>
				  	<option>20일</option>
				  	<option>21일</option>
				  	<option>22일</option>
				  	<option>23일</option>
				  	<option>24일</option>
				  	<option>25일</option>
				  	<option>26일</option>
				  	<option>27일</option>
				  	<option>28일</option>
				  	<option>29일</option>
				  	<option>30일</option>
				  	<option>31일</option>
				  </select>


		<hr>
		<h3>배송메세지</h3>
		<textarea rows="5" cols="20" name="msg" placeholder="원하시는 메세지를 입력해주세요">			
		</textarea> 
		<hr>
		<input type="button" value="버튼" name="">
		<input type="submit" value="등록" name="">
		<input type="reset" value="취소" name="">


	</form>

	

</body>
</html>

 

결과값

 

등록버튼을 눌렀을 때 action의 주소로 넘어간다.

 

 

이미지/파일 첨부

<h3>이미지</h3>
	<form action="ok2.jsp">
		<input type="text" name="word">
		<!-- <img src=""> + type=submit -->		
		<input type="image" src="../images/search.png" name="">
		<!-- 웹페이지에 노출되지는 않지만 폼에 포함된 컨트롤 요소 -->
		<input type="hidden" name="page" value="3">
		<input type="hidden" name="col" value="subject">
		<input type="hidden" name="word" value="happy">
	</form>
	
	<hr>

	<h3>파일</h3>
	<form enctype="multipart/form=data">
		첨부파일:<input type="file">
	</form>

앞으로 참고하기

 

 

Form태그 HTML5 Input 예제

 

https://www.w3schools.com/html/html_form_input_types.asp

<!DOCTYPE html>
<html lang="ko">
<head>
	<meta charset="utf-8">
	<title>14_HTML5_Input</title>
</head>

<body>
	<!-- HTML에 추가된 다양한 input type -->
	<form>
	<h3>컬러선택</h3>
	색상선택: <input type="color" name="favcolor">

	<h3>날짜선택</h3>
	날짜선택: <input type="date" name="bday">
	<input type="date" name="bday" max="1979-01-01"><br>
	<input type="date" name="bday" min="2000-01-01"><br>
	<input type="datetime-local" name="bdaytime"><br>
	<input type="month" name="bdaymonth">

	<h3>메일주소</h3>
	<input type="email" name="email">
	<h3>수량제한</h3>
	1:<input type="number" name="quantity" min="1" max="300">
	2:<input type="number" name="points" min="0" max="10">
	<h3>컨트롤러</h3>
	<input type="range" name="points" min="0" max="10">
	<h3>검색</h3>
	<input type="search" name="googlesearch">
	</form>
	
</body>
</html>

 

 

 

 

저작자표시 비영리

'Frontend' 카테고리의 다른 글

HTML/CSS - Layout  (0) 2019.07.03
07월 03일 수 | UI 화면구현 03 - HTML과 CSS  (0) 2019.07.03
07월 01일 월 | UI 화면구현 01 - HTML과 CSS  (0) 2019.07.01
JAVA로 배우는 자료구조 - ArrayList  (1) 2019.06.13
JAVA로 배우는 자료구조 - Data Structure란? Array, ArrayList  (0) 2019.06.13

관련글

댓글

티스토리툴바