웹과 모바일 홈페이지의 이해와 제작 그리드 레이아웃_웹폼 2019.04.09.
강의 자료 다운로드 http://www.letscoding.net
그리드 레이아웃 Grid Layout - 페이지를 여러 주요 영역으로 나눔 - 테이블과 같이 세로 열과 가로 행을 기준으로 요소를 정렬 가능 - 다양한 레이아웃을 쉽게 구현 가능 www.caniuse.com
그리드 레이아웃 Grid Layout - HTML 요소들이 특정한 구조로 되어있어야 함 - 부모 컨테이너로 제어하려는 요소를 묶음 <div class=“wrapper”> <div class=“div1”>1</div> <div class=“div2”>2</div> <div class=“div3”>3</div> <div class=“div4”>4</div> <div class=“div5”>5</div> <div class=“div6”>6</div> <div class=“div7”>7</div> <div class=“div8”>8</div> </div>
그리드 레이아웃 Grid Layout - CSS를 활용하여 서로 구분하기 .wrapper > div{ background-color: orange; border: 1px black solid; } .wrapper{ display: grid;
그리드 레이아웃 부모 DIV의 규칙 (.wrapper) - grid-template-columns - grid-template-rows - px, fr, auto 를 활용해 행과 열의 길이 조절 .wrapper{ display: grid; grid-template-columns: 100px 100px 100px; }
그리드 레이아웃 grid-template 패턴 반복하기 .wrapper{ display: grid; grid-template-columns: repeat(4, 100px); }
그리드 레이아웃 grid-gap - 그리드 셀 간의 공백을 만듦 - grid-gap - grid-row-gap - grid-column-gap .wrapper{ display: grid; grid-template-columns: repeat(4, 100px); grid-gap: 5px; }
그리드 레이아웃 자식 DIV의 규칙 – grid line 열(column) 행(rows)
그리드 레이아웃 자식 DIV의 규칙 - grid-column - grid-row .div1{ grid-column: 1/3; }
그리드 레이아웃 자식 DIV의 규칙 - grid-area grid-area:rowStart/columnStart/rowEnd/columnEnd; .div1{ grid-area: 1/1/3/3; }
웹폼(Web form) 웹폼 - 웹페이지에서 사용자 입력을 받는 폼 - 로그인, 등록, 검색, 예약, 쇼핑 등 웹폼 - 웹페이지에서 사용자 입력을 받는 폼 - 로그인, 등록, 검색, 예약, 쇼핑 등 폼 요소 - 폼을 만드는 다양한 태그 - <input>,<textarea>,<select> 등
웹폼(Web form) <!DOCTYPE html> <html> <head><title>로그인 폼</title></head> <body> <h3>로그인 폼</h3> <hr> <form name="fo" method="get"> 사용자 ID : <input type="text" size="15" value=""><br> 비밀 번호 : <input type="password" size="15" value=""> <input type="submit" value="완료"> </form> </body> </html>
웹폼(Web form) name -폼의 이름 지정 action 속성 - 폼 데이터를 처리할 웹 서버 응용프로그램의 이름 - submit 버튼이 눌리면 브라우저는 action에 지정된 웹 서버 응용프로그램 실행 요청 method 속성 -폼 데이터를 웹 서버로 전송하는 형식 - 대표적인 전송 방식 : GET, POST <form name="fo" method="get"> ... </form>
폼 요소의 종류
텍스트 입력 <input type="text"> <input type="password"> 한 줄 짜리 입력 창 <input type="password"> 암호 입력 창 사용자 입력 문자 대신 '*' 등 다른 글자로 출력 <textarea> 여러 줄 입력 창
텍스트 입력 <!DOCTYPE html> <html> <head><title>텍스트 입력 폼</title></head> <body> <h3>자기 소개서 작성</h3> <hr> <form> 이름 : <input type="text" value=""><br> 암호 : <input type="password" value="" maxlength="4"><br> 자소서 : <textarea cols="20" rows="5"> 이곳에 자기소개서 작성 </textarea> </form> </body> </html>
데이터 목록을 가진 텍스트 입력 창, <datalist> 목록 리스트를 작성하는 태그 <option> 태그로 항목 하나 표현 <input type=“text”>에 입력 가능한 데이터 목록 제고 나라 : <input type="text" list="countries"> <datalist id="countries"> <option value="가나"> <option value="스위스"> <option value="브라질"> </datalist> 드롭다운 리스트
데이터 목록을 가진 텍스트 입력 창, <datalist> <!DOCTYPE html> <html> <head><title>데이터 목록을 가진 텍스트 입력</title></head> <body> <h3>가보고 싶은 곳</h3> <hr> <form> 나라 : <input type="text" list="countries"><br> <datalist id="countries"> <option value="가나"> <option value="스위스"> <option value="브라질"> </datalist> 보고싶은것 : <input type="text" list="what"><br> <datalist id="what"> <option value="산"> <option value="바다"> <option value="도시"> </form> </body> </html>
텍스트/이미지 버튼 만들기 <!DOCTYPE html> <html> <head><title>버튼이 있는 입력 폼</title></head> <body> <h3>버튼을 만들자</h3> <hr> <form> 검색: <input type="text" size="10" value=""> <input type="button" value="Q1"> <button type="button">Q2</button><br> submit 버튼 : <input type="submit" value="전송1"> <button type="submit">전송2</button><br> reset 버튼 : <input type="reset" value="리셋1"> <button type="reset">리셋2</button><br> 이미지버튼 : <input type="image" src="media/button.png" alt="이미지 버튼"> <button type="button"> <img src="media/button.png" alt="이미지 버튼"> </button> </form> </body> </html>
체크박스 만들기 <!DOCTYPE html> <html> <head><title>체크 박스 만들기</title></head> <body> <h3>먹고 싶은 것 모두 체크하세요</h3> <hr> <form> 짜장면 <input type="checkbox" value="1"> 짬뽕 <input type="checkbox" value="2" checked> 탕수육 <input type="checkbox" value="3"> </form> </body> </html>
라디오버튼 만들기 <!DOCTYPE html> <html> <head><title>라디오버튼 만들기</title></head> <body> <h3>먹고 싶은 것 하나만 선택?</h3> <hr> <form> <input type="radio" name="china" value="1"> 짜장면<img src="media/jajang.png"><br> <input type="radio" name="china" value="2" checked> 짬뽕<img src="media/jjambbong.png"><br> <input type="radio" name="china" value="3"> 탕수육<img src="media/tangsuyuk.png"> </form> </body> </html>
콤보박스 만들기 <!DOCTYPE html> <html> <head><title>콤보박스 만들기</title></head> <body> <h3>먹고 싶은 음식은?</h3> <hr> <form> <select name="china"> <option value="1">짜장면</option> <option value="2" selected>짬뽕</option> <option value="3">탕수육</option> </select> </form> </body> </html>
<label>로 폼 요소의 캡션 만들기 캡션이란? <label> 태그로 캡션과 폼 요소를 한 단위로 묶음 캡션 텍스트를 명료하게 하는 장점 2 가지 방법 사용자 ID : <input type="text"> 캡션 폼 요소 캡션 폼 요소 캡션 <label>사용자 ID : <input type="text" > </label> 캡션 <label for="loginID"> 사용자 ID : </label> <input type="text" id="loginID">
<label> 태그로 로그인 폼 만들기 <!DOCTYPE html> <html> <head><title>로그인 폼</title></head> <body> <h3>로그인 폼</h3> <hr> <form name="fo" method="get"> <label>사용자 ID : <input type="text" size="15" value=""> </label><br> <label for="pass">비밀 번호 : </label> <input id="pass" type="password" size="15" value=""> <input type="submit" value="완료"> </form> </body> </html>
<label> 로 라디오버튼 캡션 만들기 <!DOCTYPE html> <html> <head><title>캡션을 가진 라디오버튼</title></head> <body> <h3>먹고 싶은 것 하나만 선택?(<label>이용)</h3> <hr> <form> <label> <input type="radio" name="china" value="1"> 짜장면 <img src="media/jajang.png"> </label><br> <input type="radio" name="china" value="2" checked> 짬뽕 <img src="media/jjambbong.png"> <input type="radio" name="china" value="3"> 탕수육 <img src="media/tangsuyuk.png"> </label> </form> </body> </html>
입력할 정보의 힌트 보여주기 placeholder 속성에 사용자가 입력할 데이터 힌트 주기 이메일 주소: <input type="email" placeholder="id@host">
형식을 가진 텍스트 입력 <input type=“email”>, email 주소 입력 <input type=“url”>, URL 입력 <input type=“tel”>, 전화번호 입력 검색어 입력, <input type=“search”> 이메일 주소 : <input type="email" placeholder=“id@host"> <input type="submit" value="전송"> 사용자가 입력한 내용 오류메시지 (a) 초기 화면 (b) 이메일 주소를 잘못 입력하고 ‘전송’ 버튼을 클릭하여 전송한 경우 <input type=“url” placeholder=“http://”> <input type=“tel” placeholder=“010-1234-5678”> <input type=“search” placeholder="검색어">
형식을 가진 텍스트 입력 <!DOCTYPE html> <html> <head><title>형식을 가진 텍스트 입력</title></head> <body> <h3>회원 정보를 입력해주세요.</h3> <hr> <form> email : <input type="email" placeholder="id@host"><br> 홈페이지 : <input type="url" placeholder="http://"><br> 전화번호 : <input type="tel" placeholder="010-1234-5678"> <input type="submit" value="확인"><br><br> 검색어 : <input type="search" placeholder="검색어"> <input type="button" value="검색"> </form> </body> </html>
폼 요소의 그루핑 <!DOCTYPE html> <html> <head><title>폼 입력 그룹으로 묶기</title></head> <body> <h3>회원 정보를 입력해주세요.</h3> <hr> <form> <fieldset> <legend>회원정보</legend> 이메일 : <input type="email"><br> 홈페이지 : <input type="url"><br> 전화번호 : <input type="tel"> </fieldset> <small>질문 : Tel. 010-111-1111</small> </form> </body> </html>
감사합니다. See you next week!!