happy cat image

everdevel

우리 모두의 웹 입문, 에버디벨

에버디벨이 책을 냈어요.!!
눌러주세요.

지은이 : 에버디벨 운영자

UI 변경

form 태그

폼 태그는 우리가 회원가입을 할때 많이 보던 것들입니다.

직업을 선택한다거나 생년월일 선택 남자 여자 구분, 휴대폰 번호 넣기 주소 입력 등등
이제부터 만들어 볼꺼에요.! 각각의 태그들을 설명하고 그것들을 조합하여 간단함 회원가입페이지를 만들어 보도록 합시다. ^^

자 그럼 시작해 볼까요

<form name="해당 폼의 이름" action="값을 보낼 주소" method="post 방식인지 get 방식인지">
각종 태그
</form>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>form태그 학습</title>
</head>
<body>
    <form name="해당 폼의 이름" action="값을 보낼 주소" method="post 방식인지 get 방식인지">
    각종 태그
    </form>
</body>
</html>

위와 같이 이루어 집니다.

name은 저 폼의 이름인데요 나중에 자바스크립트 라던지 해서 쓸일이 있으므로 지정을 해주셔야 합니다.

value는 네임의정보가 갖고가는 실제 값입니다.

action은 우리가 작성한 값들 이름 나이 주소 등등을 보낼 페이지 인데요. 이것은 php 다루는 부분 입니다. 나중에 php강좌로 진입하시면 아하! 하실것입니다.

method에서는 POST 또는 GET을 입력합니다. 이부분도 php 강좌에서 자세히 학습합니다.

텍스트상자

이름이나 이메일, 주소등 짧은글의 직접 타이핑해야 하는 정보에 사용합니다.

<input type="text" name="myname" value="" placeholder="입력란 설명" maxlength="입력가능 글자 수" />
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>form태그 학습</title>
</head>
<body>
    <form name="해당 폼의 이름" action="값을 보낼 주소" method="post 방식인지 get 방식인지">
        <input type="text" name="myname" value="" placeholder="이름을 입력하세요." maxlength="입력가능 글자 수" />
    </form>
</body>
</html>


소스는 위와 같고요.

실행을 해보면 아래와 같이 나오게 됩니다.


결과


그럼 우리가 비밀번호를 입력할때 검은색 동그라미로 나오는데 그것을 만들어 보도록 합시다.
위와 같은 소스에 타입을 password로 바꿔줍시다. 기타 다른 정보도 아래와 같이


<input type="password" name="mypw" placeholder="비밀번호 입력" maxlength="20" />
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>form태그 학습</title>
</head>
<body>
    <form name="해당 폼의 이름" action="값을 보낼 주소" method="post 방식인지 get 방식인지">
        <input type="password" name="mypw" placeholder="비밀번호 입력" maxlength="20" />
    </form>
</body>
</html>

결과


위에 무언가를 입력했을때 안보이게 처리가 되어서 나오죠 이게 비밀번호 입력폼입니다. ^^ name="" 이부분은 php를 사용할 때 사용됩니다. 저 네임 정보가 패스워드 입력폼의 값을 나태냅니다. 지금은 잘 모르실꺼에요.^^

체크박스

체크박스는 예를들어 취미를 선택하거나 하는등 여러항목을 중복체크 할때 사용하는 기능 입니다.

그럼 해봅시다.


<input type="checkbox" name="computer" value="computer" />
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>form태그 학습</title>
</head>
<body>
    <form name="해당 폼의 이름" action="값을 보낼 주소" method="post 방식인지 get 방식인지">
        <input type="checkbox" name="computer" value="computer" />컴퓨터
    </form>
</body>
</html>

실제 적용시 아래와 같습니다.


결과

컴퓨터

위에는 단순히 체크박스만 떳는데요. 앞에 한글로 컴퓨터를 입력한다면 아래와 같이 됩니다.



결과

당신의 취미는 ?
컴퓨터

그리고 checked라는것이 있는데요 그것을 사용 하면 체크가 되어서 표시가 된답니다.

<input type="checkbox" name="computer" value="computer" checked/>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>form태그 학습</title>
</head>
<body>
    당신의 취미는 ?<br />
    <form name="해당 폼의 이름" action="값을 보낼 주소" method="post 방식인지 get 방식인지">
        컴퓨터 <input type="checkbox" name="computer" value="computer" checked/>
        음악감상 <input type="checkbox" name="listening" value="listening" checked/>
    </form>
</body>
</html>


결과

당신의 취미는 ?
컴퓨터 음악감상

위와 같이 말이죠.^^

라디오 버튼

라디오 버튼은 여러가지 항목중에 하나만 선택하는 기능 입니다.

<input type="radio" name="" />

위에서 같은 그룹 이라면 name값을 통일시켜 주셔야 합니다. 라디오 버튼을 5개 만든다고 했을때 5개가 같은 그룹이라면 5개 항목 모두 네임값이 같아야 하니다. 그리고 checked를 입력해주면 기본적으로 체크가 되어 있습니다.

음... 하나만 선택해야 하는 것은 어떠한 것들이 있을까요? 통신사를 예로 들어서 한번 만들어 보겠습니다.

사용중인 통신사를 선택해주세요.

SKT KT LGU+

위의 소스는 아래와 같습니다. 보면 네임값이 텔레콤으로 통일 되어 있는데요. 라디오 버튼을 클릭해보시면 다른 버튼을 누르시 이미 선택되었던 버튼은 해제되는 것을 보실 수 있습니다.



<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>form태그 학습</title>
</head>
<body>
    사용중인 통신사를 선택해주세요.<br />
    <form name="해당 폼의 이름" action="값을 보낼 주소" method="post 방식인지 get 방식인지">
        SKT<input type="radio" name="telecom" value="skt" />
        KT<input type="radio" name="telecom" value="kt" />
        LGU+<input type="radio" name="telecom" value="lgu" />
    </form>
</body>
</html>

그럼 이번엔 네임값 끝에 서로 다른 숫자를 부여해서 테스트 해봅시다.



<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>form태그 학습</title>
</head>
<body>
    사용중인 통신사를 선택해주세요.<br />
    <form name="해당 폼의 이름" action="값을 보낼 주소" method="post 방식인지 get 방식인지">
        <p>사용중인 통신사를 선택해주세요.</p>
        SKT<input type="radio" name="telecom1" value="skt" />
        KT<input type="radio" name="telecom2" value="kt" />
        LGU+<input type="radio" name="telecom3" value="lgu" />
    </form>
</body>
</html>

아래에서 다시 테스트를 해봅시다. 이버튼 눌러보고 저 버튼 눌러 보고 하시면 다른 버튼을 눌러도 그 전 버튼은 해제가 안됩니다.

사용중인 통신사를 선택해주세요.

SKT KT LGU+

위와 같은 현상이 나타나므로 꼭 같은 그룹이라면 네임같은 통일 시켜 주어야 합니다. 안그러면 php프로그램시 제대로된 정보를 입력 못하게 됩니다. ^^

많은 줄을 입력할 수 있는 Textarea 태그

textarea 태그는 여러 라인의 텍스트를 입력할 수 있는 태그 입니다. 예를 들어 온라인 서류 작성시 자기소개서 라든지 성장과정이라든지를 입력하는 창입니다.


<textarea name="application_form" > 입력할 내용 <textarea>

위와 같이 활용 하시면 됩니다.



Select 박스

select박스는 여러개의 목록중에 하나를 선택하는건데요. 주로 생년월일이나 직업등을 선택할때 사용되는 방식입니다.

소스는 다음과 같습니다. 생년월일의 년도를 지정하는 것을 예로 들어 봤습니다.
checked는 초기 선택 항목을 하고 싶은곳에 넣으면 됩니다. 먼저 select 태그를 열어준 후에 네임값 설정을 해줍니다. 그리고 옵션 태그를 열어서 select태그에서 보일 정보들을 넣어 줍니다. value를 꼭 넣어야 하고요. 그래야만이 php에서 정보를 넘길때 그 벨류 값이 넘어 가게 됩니다. 그리고 옵션태그를 넣은 다음에 그 해당값이 실제 사람이 보이게끔 다시 써주고 옵션태그로 닫아 줍니다. ^^



<select name="birth">
    <option value="2000" selected(초기 선택된 항목)>2000</option>
    <option value="2001">2001</option>
    <option value="2002">2002</option>
    <option value="2003">2003</option>
</select>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>form태그 학습</title>
</head>
<body>
    <form name="해당 폼의 이름" action="값을 보낼 주소" method="post 방식인지 get 방식인지">
        <select name="birth">
            <option value="2000" selected(초기 선택된 항목)>2000</option>
            <option value="2001">2001</option>
            <option value="2002">2002</option>
            <option value="2003">2003</option>
        </select>
    </form>
</body>
</html>

그럼 아래에서 실행을 해보도록 하겠습니다. 왼쪽메뉴에 있는 연습장을 이용하면 궃이 노트패드++ 이나 textwrangler 같은 에디터를 사용하지 않아도 된답니다 .^^

결과

위의 select 박스 예문을 이용하여 다른 직업인, 월, 일등도 응용 할 수 있습니다.

submit과 reset

submit와 reset에 대해서 배워 봅시다.

submit은 우리가 지금까지 작성해온 아이디 이름 주소 전화번호 등의 정보를 보내는 버튼 입니다. 그러면 php의 post방식으로 받는 페이지로 설정된 페이지로 그 정보들이 날아갑니다. 태그는 간단 합니다.

<input type="submit" name="submit" value="표시할 문구" / >
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>form태그 학습</title>
</head>
<body>
    <form name="해당 폼의 이름" action="값을 보낼 주소" method="post 방식인지 get 방식인지">
        <select name="birth">
            <option value="2000" selected(초기 선택된 항목)>2000</option>
            <option value="2001">2001</option>
            <option value="2002">2002</option>
            <option value="2003">2003</option>
        </select>
        <input type="submit" name="submit" value="입력완료"/ >
    </form>
</body>
</html>

이걸로 끝입니다.

reset은 우리가 쓴 내용들을 모두 지울때 사용 합니다. 많이들 보셨을거라 생각해서 더이상의 설명은 필요 없을듯 합니다.

<input type="reset" name="reset" value="표시할 문구"/>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>form태그 학습</title>
</head>
<body>
    <form name="해당 폼의 이름" action="값을 보낼 주소" method="post 방식인지 get 방식인지">
        <input type="text" placeholder="글씨를 입력후 리셋." name="submit" value=""/ >
        <input type="submit" name="submit" value="입력완료"/ >
        <input type="reset" name="reset" value="입력값 초기화"/>
    </form>
</body>
</html>

위처럼 태그를 사용 합니다.

한템포 쉬실 분들은 쉬시고 오신다음에 초 간단한 회원가입 폼을 만들어 봅시다.




테이블 태그를 이용해서 만들어 볼건데요. 테이블을 잘 안쓴다 하더라도 회원가입 폼은 대부분 테이블을 많이 사용 합니다. ^^

아래의 소스를 입력하시면 소스 밑의 회원가입 폼을 보실 수 있습니다.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>form태그 학습</title>
</head>
<body>
    <form name="해당 폼의 이름" action="값을 보낼 주소" method="post 방식인지 get 방식인지">
        <table>
            <tr>
                <td>이름</td>
                <td><input type="text" name="user_name" /></td>
            </tr>
            <tr>
                <td>아이디</td>
                <td><input type="text" name="user_id" /></td>
            </tr>
            <tr>
                <td>비밀번호</td>
                <td><input type="password" name="user_pw" /></td>
            </tr>
            <tr>
                <td>비밀번호 확인</td>
                <td><input type="text" name="user_pw2" /></td>
            </tr>
            <tr>
                <td>주소</td>
                <td><input type="text" name="user_address" /></td>
            </tr>
            <tr>
                <td>생년월일</td>
                <td><select name="user_birth_year">
                        <option value="2000" selected>2000</option>
                        <option value="2001" selected>2001</option>
                        <option value="2002" selected>2002</option>
                        <option value="2003" selected>2003</option>
                        <option value="2004" selected>2004</option>
                    </select>
                    년
                    <select name="user_birth_month">
                        <option value="1">1</option>
                        <option value="2">2</option>
                        <option value="3">3</option>
                        <option value="4">4</option>
                        <option value="5">5</option>
                        <option value="6">6</option>
                        <option value="7">7</option>
                        <option value="8">8</option>
                        <option value="9">9</option>
                        <option value="10">10</option>
                        <option value="11">11</option>
                        <option value="12">12</option>
                    </select>
                    월
                    <select name="user_birth_day">
                        <option value="1">1</option>
                        <option value="2">2</option>
                        <option value="3">3</option>
                        <option value="4">4</option>
                        <option value="5">5</option>
                        <option value="6">6</option>
                        <option value="7">7</option>
                        <option value="8">8</option>
                        <option value="9">9</option>
                        <option value="10">10</option>
                        <option value="11">11</option>
                        <option value="12">12</option>
                        <option value="13">13</option>
                        <option value="14">14</option>
                        <option value="15">15</option>
                        <option value="16">16</option>
                        <option value="17">17</option>
                        <option value="18">18</option>
                        <option value="19">19</option>
                        <option value="20">20</option>
                        <option value="21">21</option>
                        <option value="22">22</option>
                        <option value="23">23</option>
                        <option value="24">24</option>
                        <option value="25">25</option>
                        <option value="26">26</option>
                        <option value="27">27</option>
                        <option value="28">28</option>
                        <option value="29">29</option>
                        <option value="30">30</option>
                        <option value="31">31</option>
                    </select>
                    일
                </td>
            </tr>
            <tr>
                <td>직업</td>
                <td><select name="user_job">
                        <option value="student">학생</option>
                        <option value="teacher">교사</option>
                        <option value="developer">개발자</option>
                        <option value="publisher">퍼블리셔</option>
                        <option value="driver">운전사</option>
                        <option value="architecture">건축가</option>
                        <option value="actor">배우</option>
                    </select>
                </td>
            </tr>
            <tr>
                <td></td>
                <td><input type="submit" name="submit" value="완료" />
                <input type="reset" name="reset" value="리셋" /></td>
            </tr>
        </table>
    </form>
</body>
</html>

결과

이름
아이디
비밀번호
비밀번호 확인
주소
생년월일
직업

에버디벨의 완성 :: 웹코딩 시작하기

안녕하세요.
에버디벨 운영자입니다.
여러분이 늘 이용해 주셔서 하루 5명 오는 사이트가 1000명이 오는 사이트가 되었고,
또 그 이유로 사이트를 운영을 멈추지 않아 저같은 평범한 사람이 책까지 쓸 수 있게 되었습니다.
여러분이 찾지 않았다면 진작 사이트 접었습니다.
저의 웹개발 경력 2년을 쏟아내어서 6개월의 집필, 8개월의 교정기간을 거쳐 [웹코딩 시작하기]가 출간했습니다.
웹코딩 시작하기는 HTML5를 시작으로 CSS3 -> jQuery를 학습합니다.
그리고 앞에서 배운 내용으로 간단한 소통사이트를 반응형으로 제작합니다.
보통의 책은 HTML5 + CSS3로 끝나고 혹은 HTML5 + CSS3 + jQery로 끝나지만 웹코딩 시작하기는 여기서 끝내지 않았습니다.
그 다음 바로 데이터베이스중 하나인 MySQL를 학습하고, 그 이후 PHP를 학습니다. 그리고 앞에서 만든 소통사이트에 회원가입, 로그인 기능은 기본으로 진행하며, 스크롤이벤트를 이용하여 스크롤을 내리면 AJAX를 작동시켜 게시물을 더 불러오는 기능을 구현하고 자기의 로그기록을 파일에 쓰기, 그 밖에 자신의 프로필사진, 커버사진 등록, 댓글 쓰기등의 기능을 적용합니다.
본서는 웹코딩을 처음하는 사람이 하나에서 끝나지 않고 처음부터 시작해 프로젝트까지 완성해가며 전체적으로 시스템이 어떻게 작동하는지 전반적으로 알게하기 위해 태어났습니다.
적어도 지구에서 가장 친절한 웹 입문서라고 생각하는 책입니다.
에버디벨로 부족하셨다면 웹코딩 시작하기를 추천합니다.

어제보다 나은 나, 오늘 보다 나을 내일의 나를 만드는 :: 웹코딩 시작하기

목차보기

종이책 구입하기

전자책 구입하기

PART 1. 프론트엔드 HTML5 + CSS3 + jQuery

CHAPTER 1. HTML5

1. HTML5 소개

2. 메타 태그

3. 텍스트 태그

4. 이미지 태그

5. 하이퍼링크 태그(a 태그)

6. 리스트 태그

7. form 태그

8. 공간 태그

9. video 태그

11. svg와 canvas

12. table 태그

CHAPTER 2. CSS3

1. CSS 소개

2. CSS를 적용하는 세 가지 방법

3. 선택자(selector)

4. 텍스트를 꾸미는 CSS 요소

5. 가로 길이와 세로 길이 조정하기

6. 텍스트가 영역을 벗어날 때

7. HTML 엘리먼트의 위치 변경하기

8. 배경 꾸미기

9. 외곽선 긋기

10. float와 clear

11. 박스의 바깥 여백 설정하기

12. 박스의 안쪽 여백 설정하기

13. CSS 리셋

14. 애니메이션

15. transform

16. transition

17. display

18. 반응형 웹

19. 반응형으로 간단한 레이아웃 만들기

20. SVG 태그

CHAPTER 3. jQuery

1. jQuery 시작하기

2. 셀렉터

3. 엘리먼트 보이기와 숨기기

4. 클릭했을 때 무언가 하기

5. 마우스 포인터를 요소 위에 올릴 때 무언가 하기

6. 제이쿼리로 CSS 적용하기

7. 변수 사용하기

8. HTML 엘리먼트에 있는 텍스트 변경하기

9. HTML 태그 제어하기

10. 애니메이션 기능

11. 엘리먼트에 클래스 추가, 삭제하기

12. 엘리먼트의 이동

13. 폼 태그의 값 조정

14. 포커스

15. this 사용하기

16. 연산자

17. 함수 만들기

18. 변수에 대해서

19. 글로벌 변수와 로컬 변수

20. 조건문

21. 반복문

22. 스크롤 이벤트

23. AJAX

24. canvas 태그(HTML5)

project 나의 첫 웹서비스 만들기

CHAPTER 1. 나의 첫 웹서비스 프로젝트 소개

CHAPTER 2. 나의 첫 웹서비스 만들기 프로젝트 - front end

1. 메인 페이지 만들기(index.html)

2. 나의 페이지 만들기(me.html)

3. 모두의 페이지 만들기(all.html)

PART 2. 백엔드 MySQL + PHP

CHAPTER 1. MySQL

1. 데이터베이스란?

2. MySQL 시작하기

3. 데이터베이스 만들기

4. 테이블

5. 필드의 데이터 크기와 데이터형 지정하기

6. 테이블 생성하기

7. 필드의 추가, 수정, 삭제

8. 테이블 삭제하기

9. 테이블에 데이터 입력하기

10. 데이터 불러오기

11. 데이터의 값을 변경, 삭제하기

12. 테이블 초기화

13. 2개 이상의 테이블 사용하기(JOIN)

14. 집계함수

15. 그룹별 집계

16. 출력 결과의 정렬

17. 불러올 레코드 수 지정하기

18. 2개 이상의 테이블을 묶어 사용하기

19. 쿼리문 안의 쿼리문 서브쿼리

20. 특정 필드에 같은 값을 넣지 않는 방법

21. 서로 다른 필드의 값을 합쳐서 출력하기

22. 검색을 더욱 빠르게 하는 인덱스

CHAPTER 2. PHP

1. PHP 소개

2. 출력문

3. 주석

4. 변수

5. 연산자

6. 배열>

7. 데이터형

8. 조건문

9. 반복문

10. 함수

11. 함수 만들기

12. POST와 GET

13. 기능의 사물화

14. 코드의 재활용

15. PHP와 MySQL의 연동

16. 상수

17. 정규 표현식

18. 파일 업로드

19. 디렉터리 함수

20. 파일 함수

21. Anchor 태그의 ping 속성과 AJAX

22. 쿠키와 세션

23. 객체지향 프로그래밍

project 나의 첫 웹서비스 만들기

CHAPTER 3. 나의 첫 웹서비스 만들기 프로젝트 - back end

3-1. 회원가입 기능

3-2. 로그인, 로그아웃 기능

3-3. 게시물 등록하기

3-4. 게시물 불러오기

3-5. 댓글 등록하기

3-6. 댓글 불러오기

3-7. 게시물 공감하기

3-8. 모두의 페이지

3-9. 포토 업로드 기능

3-10. 나의 로그 만들기

강좌로 돌아가기