동빈나 부트스트랩 웹 디자인 실전 강좌 14강 - 폼 (Bootstrap Web Design Tutorial #14) > 부트스트랩

 

지난 시간은 이렇게 소스 코드를 작성하는 것 까지 한번 구현을 해
보았는데요.
웹사이트 내에서 이렇게 소스코드 를 보여주기 위해서 브리 태그를 사용할
수 있다는 점 한번 실습 14 보면서 공부를 했었는데요.
자 이제 이번 시험에 다뤄볼 꼬는 이 긴 텍스트를 입력하는 것과 이 폼
태그를 이용하는 건데요 이 폼 태그 랑 익힌 텍스트를 입력하는 것은 둘
다 아주 밀접한 관련이 있으면서 함께 많이 사용이 되고 있습니다.
되지 일반적으로 이제 웹 사이트 같은경우는 댓글 혹은 게시글을 작성할 수
있는 긴 텍스트를 입력하는 공간을 마르면 주면 되요.
이런식으로 텍스트 가 한 줄이 아니라 여러 줄로 구성이 되어 있거나
어떠한 긴 문장은 문단 단위로 구상할 수 있도록 입력할 수 있게 주려면
이렇게 텍스트 에어리어 라는 태그를 이용해서 생성할 수가 있습니다.
그리고 일반적으로 이제 이러한 김 텍스트를 입력하는 텍스트 에어리어 택가
같은 경우는 이 폼 태그 안에서 구해야 되는 경우가 굉장히 많아요.
2 폼 태그 같은 경우는 작성한 양식을 서버 로 전송하기 위해서 사용하는
태그 로써 기쁨 같은 경우는 이제 부트스트랩 폭은 자바스크립트를 적절히
이용해서 정말 다양한 디자인으로 안정적으로 만들수가 있어요.
이제 우리는 간단하게 댓글을 작성할 수 있는 양식을 하나 만들어보고
그리고 나아가서 로그인 및 회원가입 양식을 만들면서 폰 구매 방법에
대해서 한번 확실하게 이 해보는 시간을 가져볼 겁니다 이제 한번 폼
태그를 알아보면서 이러한 텍스트 에어리어 같은 태그도 한번 같이 활용해
볼게요.
이렇게 지난 시간에는 강의 화면에서 소스 코드까지 이렇게 보여주는 것
까지 한번 그래 해보았는데요.
이제 이 아래쪽에 한 번 댓글을 작성할 수 있는 양식을 한번 웹 디자인
으로 개발을 해 보려고 합니다.
바로 서 브 랜 테스트를 진행해 주신 다음에 이 안에서 이 아래쪽에 한번
하나의 div 태그 하나 만들어 줄게요.
이제 이렇게 클래스 로 컨테이너로 만들어 주시고 이 안에 다음과 같이
1hr 태그로 더 줄게
그다음 이제 폼 태그를 만들어 주겠습니다 클래스라고 한 다음에 포옹 호
로젠탈 이렇게 넣어 줄게요.
이렇게 주신 다음에 이 아래 내부적으로 dib 그래서 나도 만들어 줄게요.
이제 이렇게 만들어 주신 다음에 홈 그룹 이라고 클래스 이름을 지어줍니다.
그다음 이제
라벨을 붙여 가지고 댓글이 라고 한번 이렇게 넣어 줄게요.
그다음 이제 3rd 베어 류아 가 나오는데요 이제 바로 이 태그가 특정한
태 끄리 담길 수 있는 어떠한 긴 문장에 담길 수 있는 텍스트 입력
공간이 되는건데요 이런식으로 클래스 한 다음에 폼 컨트롤 해 가지고
로스를 오라버니는 그치겠습니다 이렇게 들어갈 수 있는 행
즉 줄의 개수를 이렇게 넣어주구요 id 앞으로
코멘트 컨텐트가 만들어 주겠습니다.
이제 이런 식으로 id 퍼플 정해 주시면 정상적으로 이제 서버 쪽에서
이걸 컨트롤할 때 나중에 더 편해지기 때문에 이제 이런 식으로 커멘트
컨텐츠라고 이렇게 아이디나 넴 카풀 넣어줄 수 있도록 합니다.
이렇게 한 다음에 텍스트 열에 달아주시면 은 이제 이 사이의 공간에
들어가는 내용들이 이제 사용자가 입력을 한 뒤에 정성 버튼을 눌러서 서버
쪽으로 보내지는 그 내용이라고 할 수 있는 거죠.
이제 이런 식으로 내려와서 하나의 br 택을 떠서 한줄 띄워줄 수 있도록
하구요 이 저 버튼을 넣어 줍니다.
탑은 이제 이렇게 써 미시 라고 정해 줘서 제출할 수 있도록 해 주고요
이렇게 클래스를 넣어서
풀 라이트 라고 해 줍니다 그다음 이제 이렇게 등록 이라고 해 중에는
버튼이 이제 오른쪽 정렬 돼 가지고 만들어져 있는 것을 볼 수 있습니다
이렇게 한다는 아래쪽에 hr 대게를 하나 더 넣어 줄게요.
이제 이런 식으로
g 해주시면 깔끔하게 댓글 창이 하나 들어가 있는 것을 볼 수 있습니다
이제 한번 새로고침을 해 보시면 이렇게 들녘 버튼까지 잘 들어가 있는
것을 볼 수가 있죠.
이런식으로 썸네일 해가지고 실제로 서보 쪽으로 어떠한 매개 변수를 보낼
수 있게 되는 거고요.
이런식으로 간단하게 댓글 창에 들어갈 수 있는 웹 디자인까지 한번 구원
을 해보았습니다.
이런식으로 댓글에 작성하게 따고 하는 어떠한 양 의식을 서쪽으로 보내
주기 위해서 폼 태그를 사용했는데요 이제 이렇게 댓글 뿐만 아니라
로그인과 회원가입 또한 이렇게 홈 태그로 구매를 해야 합니다 이제 이렇게
간단하게 당일 페이지까지 이렇게 한번 구애를 해 보았으니까 이제 로그인
및 회원가입 페이지로 이동해 가지고 각각 그랜 해봄으로써 이번 강의를
마치려고 합니다.
이제 이렇게 바로 로그인 폼 가 레지스터 폰 둘 다 이렇게 써 브랜드
스타 안쪽으로 이루어 시켜 주고요.
이렇게 닦으러 오신 다음에 이제 먼저 로그인 폼 우타 한번 다뤄보도록
할게요.
이렇게 기본적으로 로그인 창 같은 경우는 굉장히 이미 디자인으로 만들어진
것들이 굉장히 많기 때문에 한번 구글에 검색해서 우리가 직접 만드는
것보다는 1 이제 예쁘게 디자인이 이루어진 어떠한 폼 태그 로 만들어진
로그인 및 회원가입 양식을 그대로 한번 가져보도록 하겠습니다
이렇게 구글의 부트스트랩 로그인 폼이 기생 프리가 검색하신 다음에 이렇게
이런 쇼 자기가 원하는 사이트에 들어가 가지고 어떠한 틀에 등 상관없이
하나 가져와 가지고 한번 그대로 붙여넣기 해 보도록 하겠습니다.
저희 이거 한번 선택해 볼게요 이렇게 들어간 다음에 이런 사이트들이 특징
2 뭐냐면요 이렇게 바로 사용할 수 있도록 소스 코드 같은 것들이 이제
이렇게 그대로 제공해 주면 되요 이제 말 그대로 복사해 가지고 사용하시면
됩니다.
다만 이제 이렇게 자바스크립트와 css 그 다음에 html 나눠져 있기
때문에 이걸 각각 스 코드의 붙여 놓는 방법을 이해 하셔야 되는데요
지금부터 한번 차근차근 알려 드리려고 합니다 자 보시면 이제 이렇게 전체
폼 태그 이렇게 들어가 있는 것을 알 수 있는데요 이걸 그대로 다 복사
하신 다음에 아니면 지 이렇게 너스 커서를 둔 다음에 컨트롤 a 를
눌러서 그대로다 복사할 수 있습니다 이제 그대로 가져와 가지고 이렇게 써
g 테스트 안으로 들어가서 로그인 폼의 시티를 파일 안에 이렇게
내비게이션 까 부터 사이에 넣어 줍니다.
이렇게 바로 붙여 넣기 해봤습니다 이제 여기서부터 여기까지 이렇게
깔끔하게 한번에 들어가 있는 것을 알 수가 있구요.
이 상태에서 한번 새로고침을 해 보시면서 일로 구입해 줄 한번 이동을 해
보시면 은 이제 이런 식으로 들어가 있는 것을 알 수가 있어요.
지금 이렇게 보면 이유는 css 와 자바스크립트 을 넣어 주지 않았기
때문이에요.
이제 이렇게 디자인을 담당하는 css와
애니메이션은 담당하는 js 까지 하나씩 단어 봄으로써 완전하게 구매할 수
있는 것입니다
이제 이렇게 한번 ccs 코로 또한 다 이렇게 복사를 해서 한번 붙여
넣기 해 줄게요
이제 이런 경우는 로그인 폼 안에서만 사용되는 스테이시 틀리기 때문에
이렇게 내부 스타일 시트로 장 해줄 필요가 있겠죠.
바로 이렇게 스타일 타입 한 다음에 텍스트 css 라고 해 준 다음에
줍니다 이렇게 해주시고 안에 바로 이제 그 도로 코드를 부착해 주시면
끝납니다.
굉장히 간단하게 구현이 가능하죠 이제 보시면 이렇게 그대로 사용할 수
있긴 한데 이제 이렇게 패딩 탑이랑 에 들어가 있는걸 볼 수가 있어요
이런 경우는 이제 우리 소스 코딩 적합하지 않기 때문에 지워 주시면
되구요.
이제 정확히 이렇게 무거운 다치고 주시고 우리에게 필요한 부분만 다
이렇게 가져올 수 있도록 하면 됩니다.
이제 이런 식으로 스타일 태그를 그대로 가져올 수 있도록 하면 되구요.
잘 들어가 있는 것을 볼 수 있습니다. 이제 한번 새로고침을 해보시면 은
이렇게 디자인의 잘 들어가 있는 것을 볼 수가 있죠.
근데 물론 지금은 클릭했을 때 어떤 패러디 이루어지지 않죠.
이제 이거는 로 그래서 레지스터로 각각 넘어갈 수 있도록 애니메이션
들어가 있는데 이제 그게 자바스크립트가 안 들어가 있으니까 그의 맺은
적용이 되지 않기 때문에 이렇게 넘어갈 수가 없는 것입니다 이제 한번 2
자바스크립트 또한 그대로 복사를 하셔 가지고 부천 해주시면 되겠죠.
이렇게 다 복사 하신 다음에 다시 이제 이렇게 서버란 캐스트 이동 하신
다음에 가장 아래쪽에 스크립트 문제는 넣어줍니다.
이렇게 타입 한 다음에 텍스트 하고 자바스크립트 라고 이렇게 한번
넣어주시면 되구요 달아 주신 다음에 이제 이 안에 이제 이렇게 넣으시면
됩니다.
굉장히 간단하게 이렇게 자바스크립트 문장이 들어가 있는 것을 알 수가
있구요.
이렇게 하면 깔끔하게 로그인과 회원가입이 서로 자 전환 될 수 있도록
자바스크립트 애니메이션 코드를 한번 넣어보았습니다.
이제 뭐 이렇게 컨트롤 s 를 눌러서 저장 해 주신 다음에 한번 들어가서
새로고침 해 볼게요.
이제 이렇게 눌렀을 때 각각 2 이렇게 애니메이션이 가미되어 가지고 서로
전환이 되는 것을 볼 수가 있구요.
외부에서 가져온 소스 코드 임에도 불구하고 이제 우리가 만든 것처럼 잘
우리 홈페이지 안에서 적용이 되어 있는 것을 볼 수가 있구요.
이제 맵 개발이나 웹 디자인 같은 경우는 이런 식으로 굉장히 코드
이식성이 높기 때문에 다음에서 작동하던 코드도 이렇게 자기 구도를
가져오게 되면 정상적으로 쉽게 사용할 수 있다는 장점을 가지고 있기
때문에 이렇게 자기가 여러 개의 소스 코드를 많이 다뤄 보면서 자기
홈페이지 아내 갖가지 필요한 기능들을 입히는 방법을 공부하시는 게 굉장히
중요하다 갈수가 있어요.
물론 이제 이런 기능들을 닿아 본인이 직접 css
자바스크립트를 공부하시면서 적용이 보시는 것도 굉장히 좋지만 무엇보다
이런 식으로 개발하게 되면 은 훨씬 더 개발에 속도를 단축시킬 수 있다는
장점이 있기 때문에 푸니 이제 만에 프로젝트에서 이런식으로 구원이 되고
있습니다.
아무튼 이런식으로 간단하게 로그인 창을 한번 만들어 보았구요.
근데 이제 우리가 가져온 소스 코드가 이렇게 로그인창 가 레지스터 창 이
이렇게 가까워 하나로 구성되어 있는 걸 볼 수가 있어요.
즉 한 페이지 안에서 이렇게 둘 다 가지고 있는 거죠.
그렇기 때문에 이제 회원가입으로 들어갔을 때는 레지스터가 먼저 보이도록
만들어야 겠죠.
지금 이렇게 로그인 페이지로 들어갔을 때는 이렇게 로그인창 못하 먼저 떠
있는데 반도를 이제 회원가입 페이지 같은 경우는 회원가입 창이 먼저
뜨도록 구현해 주어야 될 것입니다 이제 여기에서 약간의 소스 코드의
수정이 필요한 것입니다.
이제 일단 소스 코드 로 돌아가서 이대형 들을 다 한국을 한번 바꿔
주겠습니다.

이제 이런식으로 폼 태가 있는 내용들을 다 한국을 한번 바꿔 줄게요.
이제 바꿔 줘야 되는 부분이 바로 이 로그인 이라는 건데요 우리 이렇게
로그인이 로 바꿔주시고 이거 이제 회원가입으로 바꿔 주겠습니다.
이제 그리고 여기에다가 각각 2+ 더 같은 경우는 입력이 안 됐을 때
힌트로 보여 주는 부분이기 때문에 이렇게 아이디어라고 넣어주시고
여긴 비밀번호 이런식으로 하나씩 한번 넣어 주겠습니다.
이런식으로 하나씩 다 한글로 바꿔 줄 수 있도록 하구요.
이런식으로 다 차근차근 바꿔 주어서 전 결과적으로 한번 이렇게 바꿔
보았습니다.
id 값 또한 바꿔 주었구요 제가 원하는 형태로 유저 id 이런식으로 다
들어가 시도로 바꿔 줬고 플레이어로 또한 마찬가지로 이런 식으로 id
문으로 다 한글로 들어갈 수 있도록 다음 내용을 바꿔 주었습니다.
이렇게 닿아 각각 한국인이 클라이언트 라고 생각을 하고 이렇게 한국에는
기준에서 보기 쉽도록 이렇게 다 품에 들어가 있는 모든 내용들을 한국이
주도로 한 번 바꿔 주었습니다. 이제 이런 식으로 자신이 사용하기 적합한
형태로 이렇게 마음대로 자신의 가정 코드를 바꿔줄 수 있는거구요. 이제
한번 새로고침을 해보시면 바로 다음과 같이 이렇게 들어가 있는 것을 알
수가 있구요.
굉장히 이제 우리 전차 페이지와 되게 조화를 이룬 구조로 잘 만들어져
있는 것을 볼 수가 있죠.
이제 한번 아까 말했던 대로 회원과의 폐지를 한 번 꿈의 볼 건데요.
서브라임 텍스트 안에 있는 이 모든 내용을 다 보살 해주셔 가지고
레지스트 봄에 한번 붙여 넣기 주겠습니다 이렇게 붙여 넣기 해주신 다음에
이제 아까 말했던 것과 같이 이 회원가입 창이 먼저 나오도록 해야 겠죠.
근데 물론 지금의 이제 그대로 부천 어겼기 때문에
로그인창이 먼저 나오는 것을 알 수가 있어 알았어 이제 소스 코드로
천천히 뜯어 보시면서 자기가 원하는 형태로 바꿔 주시면 되는건데
저는 이제 유심히 한번 살펴본 결과 이 코드는 이제
디스플레이 블라 까 논으로 되어있는 부분을 서로 바꿔 주면 은 이제 그
순서가 바뀌는 것을 알 수 있습니다.
이렇게 바꿔 주신 다음에 저장을 해 주시고 한 번 새로고침을 해보시면 은
이렇게 회음부에 창 같은 경우 회원가입이 먼저 이렇게 창에 나오도록 한번
구매를 해보았습니다.
다만 지역이 에서 이렇게 로그인은 바뀌지 않은 것을 알 수가 있어요
따라서 이제 이런 식으로 로그인 부분에 클래스 액티브 를 아래쪽으로 옴
더 줌으로써 정상적으로 모두다 작동할 수 있도록 디자인을 바꿔 주시면
됩니다.
이제 이런 식으로 토 스콘을 약간 바꿔 준 것만으로도 회원과 이 페이지와
로그인 비자 이렇게 각각 서로 다른 내용을 보여주는 것을 알 수가 있고
이렇게 각각 전함이 잘 이루어지는 것을 알 수 있습니다. 이런식으로
깔끔하게 폼 태그를 이용해서 어떠한 외부적인 소스 코드를 가져와서 로그인
양식과 회원 되냐 시까지 이렇게 순식간에 이렇게 가져보는 방식으로 이렇게
로그인 빛 회원가입에 디자인을 한번 구성원의 보았습니다.
이렇게 한번 간단하게 이제 이런 식으로 0 태그 를 적절하게 이용하게
되면 나중에 서버 프로그래밍을 공부할 때도 굉장히 많은 도움이 될거구요.
아무튼 이렇게 이번 시간엔 간단하게 이 펌 태그에 대해서 전반적으로
이해해 보고
실제로 이제 우리의 웹사이트에 적용해보는 방법에 대해서 알아보는 시간을
가졌습니다.
또한 이제 이렇게 특정한 웹사이트에서 가져온 소스코드를 이제 우리의 웹
사이트에 잘 맞게 변형을 해서 이렇게 보는 방법에 대해서도 공부를 했구요.
특히 이제 이런 css 나 html 코드 같은 경우는 조금만 바꿔 주어도
정말 자기 입맛대로 마음대로 바꿔 줄 수 있기 때문에 조금만 터 자신의
가져 소스 코드를 조금 분석해 보시면서 이렇게 디자인이나 내용들을 조금씩
바꿔 보는 연습을 해보는 게 굉장히 중요하다고 할 수 있습니다.
네 아무튼 이번 시간은 이렇게 퐁 태그에 대해서 공부해 보는 시간을
가졌습니다.