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

 

 이번 시간에 공부할 이 모델이라는 것은 부트스트랩 안에서 자주
사용되는 컴포넌트 로써 팝업창 을 의미합니다.

또한 흔히 모달 팝업 창이 뛰어 지게 되면 해당 팝업창을 끄기 전까지는
월 아멘으로 돌아가지 못합니다.
따라서 상세 정보를 보여주는 페이지나 로그인 및 회원가입 2
팝업창에서 이루어지도록 할 때 이러한 모델 컴퍼넌트 를 이용하게 되는데요.
바로 왼쪽 사진 같은걸 모델이라고 바랍니다. 이렇게 이 파일을 지울 수
있으니까. 그 위에 이렇게 방법 창이 뜨게 되는데 이제 이렇게 각가지
선택을 해서 해당이 팝업창이 끄기 전까지는 원래 파일로 돌아갈 수 없는
그런 형태를 가지고 있죠.
오렌지 이런 식으로 어떤 프로그램이 위쪽에 이렇게 떡하니 놀
집이 되는 이러한 창을 이러한 팝업창을 모델이라고 합니다.
아무튼 이제 한 번 부트스트랩 을 이용해서 웹 사이트에서 모다 를 띄우는
방법을 한번 알아보려고 하는데요.
자 이를 위해서 일단 간단하게 몇가지 정보를 더욱 웹사이트에서 보여질 수
있도록 추가 를 먼저 하려고 합니다.
자 바로 이렇게 점보 틀어놓은 아래쪽에 하나의 div 태그를 만들어
줄게요.
그냥 이렇게 클래스 로 로 라고 만들어 주시구요.
이제 이런 식으로 총 3가지 내용이 들어갈 수 있도록 할껀데요.
코란 다음에 md 하고 소를 넣어 주세요.
지난 시간에도 말씀드렸듯이 이렇게 하나의 줄에는 총 12만 금의 영역이
할당이 되는데요. 이렇게 4 로 만들어 줌으로써 총 3분의 1 만큼 을
차지하는 어떠한 열을 만들어 주려고 합니다.
자 이렇게 열을 만들어 주시구요 그 안에 이제 이러한 내용이 들어갈 수
있도록 합니다.
이렇게 h4 태그를 이용해서 조금 큰 글씨로 코딩 부스터의 특징이라고
넣어 줄게요.
그다음 이제 p 태그로 나온 다음에 코딩 부스터는 다른 사이트와 차원이
다른
뭐 이런 식을 어떠한 내용으로 넣어 주도록 합니다. 전 이제 이런 식으로
어떤 문장을 작성 했구요.
이 아래쪽으로 내려와서 다음과 같이 p 태그로 또 만들어 주시고요.
이렇게 a 태그를 만들어서 하나의 버튼을 만들어 줄게요.
바로 열기 사업모델이 나오게 되는데요. 데이터 털게 탄 다음에 # 한
다음에 이렇게 모델이라고 한번 넣어 줄게요 그러한 이제 데 2차 토
글이라고 한 다음에 이렇게 그다음 이제 이렇게 다 주신 다음에
다 받아주시고 이제 이 안에 자세히 알아보기 라 감 넣어 줄게요.
그다음 이제 한번 저장 하신 다음에 새로고침을 해보시면은 다음과 같이
어떠한 매우 미 들어가는 공간이 만들어진 걸 알 수가 있구요 총 먼저
이렇게 3분의 2만큼 차지하는 1 열이 만들어진 것을 알 수가 있구요.
이렇게 자세히 알아보기 위한 버튼 또한 만들어진 것을 볼 수가 있습니다.
자 이제 여러 또 만들어 줄 건데요. 이렇게 아내
두려울 더 추가해 줍니다 이제 이런 식으로 444 에서 총 실이 만큼 을
채울 수 있도록 이렇게 만들어 주시구요.
현재 상태에서 이제 이렇게 새로 고침 안해보신 얀은 바로 다음과 같이
이렇게 총 3개의 열이 이렇게 나오는 것은 알수가 있구요.
이제 여러분도 바꿔줄 필요가 있겠죠 이 밑에 있는 두 개가 증 경우는
이런 식으로 이모탈 부분은 지워 줄게요.
이렇게 모델이라고 나와 있는건 다 치워 주시고요. 대신에 이제 이렇게 특정
부분 링크 를 가리킬 수 있도록 이렇게 레퍼런스 태그를 만들어 주시
겠습니까.
자 이렇게 다 샵을 넣어가지고 현재까진 이제 어떤 위치도 가르치지 않도록
이렇게 만들어 주시구요.
이제 이렇게 각각의 대응은 전 다음과 같이 바꿔 줄게요 폭넓은 강사진 뭐
이런식으로 모두다 배움을 바꿔줄 수 있도록 합니다.
전 이제 이런 식으로 한번 꾸며 보았어요 이렇게 세 부분 각각 어떠한
내용들이 로 전달할 수 있도록 이런식으로 한번 작성을 해 보았구요.
이제 여기에다가 이렇게 hr 태그로 넣어가지고 한 줄을 그어 줄 수
있도록 합니다. 이제 한번 새로 거친 해보시면 은 이런 식으로 들어가 있는
것을 알 수가 있어요. 이렇게 고등부 스타 2 특징
강사진 강의까지 이렇게 각각의 정보를 깔끔하게 보여줄 수 있는 것을 알
수가 있구요.
이렇게 줄여 보았을 때도 정상적으로 이렇게 모든 내용이 안정적으로 출력이
되는 것은 알수가 있구요.
당연 의 부트스트랩 은 이런 식으로 반응형 웹사이트를 제공하기 때문에
이런 결과는 당연한 거고요.
아무튼 이런식으로 간단하게 각각의 내용을 넣을 수 있었습니다.
근데 코딩 부스터의 특징 같은 경우는 이제 자세히 알아보기 버튼을 눌렀을
때 못할 창이 나올 수 있도록
뭐 다리 라는 속성을 넣어줘 썼죠. 이제 한번 결과를 사용해서 실제로
모델을 보여줄 수 있도록 한번 해볼게요.
바로 이렇게 아래쪽으로 내려와서 모달 창을 정해 줄 수가 있어요.
지금 위에서 이렇게 # 못하리라고 id 커플 지정이 주었죠.
이제 이렇게 자기가 창해 준 2rd 것과 똑같은 id 값을 가지는 하나의
모달 창을 만들어 줌으로써 그보다 를 열어 보는 당 의식으로 모델을
구현할 수가 있습니다.
이제 한번 아래쪽으로 내려와서 이렇게 이 스크립트 위쪽에 한번 다음과
같이 넣어 줄게 어디 iv 클래스 한 다음에 여기로 를 넣어 주시고요.
다가 주신 다음에 이제 이렇게 div 클래스 로 모델을 만들어 준다. 그
다음이 제 아이디가 프로 자리 아까 만들었던 모델이랑 아이들이 이렇게
그대로 넣어줄 수 있도록 하고 이제 탭 인덱스로
- 이런 넣어줍니다.
이렇게 달아주시고 양쪽에 다음과 같이 모달 다이얼로그 라고 만들어 줍니다.
달아 주신 다음에 이렇게 또 와서 못 할 콘텐츠를 만들어서 이해 모델에
대한 내용을 넣어 줄 수 있도록 하구요.
이제 이렇게 div 클래스 한 다음에 모델 헤더 를 넣어줍니다 헤더 같은
경우 말 그대로 이제 모델의 제목 부분을 의미하는 거구요.
전 이렇게 코딩 포스트의 특징이라고 넣어 줄게요. 그다음 이제 이런 식으로
버튼에 클래스 상단에 클로즈 라고 만들어서 이렇게 모달 창을 닫을 수
있도록 한번 만들어 줄게요. 그럼 이제 이렇게 데이터 짓은 있으라고 더
주고 모델이라고 넣어줍니다. 이제 이렇게 타임즈 라고 한번 넣어 줄게요
이렇게 버튼을 달아 주시면 됩니다. 그러면 이렇게 디아비 택을 닫아
주시고요 아래쪽으로 내려와서 하나의 클래스를 다 만들어 줄게요 이건 이제
모델 바디 인데요.
이렇게 달아 주신 다음에 이렇게 스타일을 만들어서
베스타 온라인을 센터로 만들어 줄게요.
이렇게 가운데 정도를 만들어 주시고 이 제안에 다음에 가지 내용을 넣을
수 있습니다. 전 이런 식으로 넣어 줄게요.
저희 서비스의 특징 이런식으로 자기가 원하는 내용을 한번 넣어줄 수
있도록 합니다. 굉장한 이런식으로 넣어주었어요. 2br 같은 경우엔 이제 한
칸 줄바꿈을 나는거 로써 이런식으로 줄바꿈 이루어질 수 있도록 절 하기에
모탈 바디 우린 아마 작성이 보았구요. 그대 이제 다음과 같이 1 이미지를
한번 넣어 줄게요.
이런식으로 이미지 태그를 한번 만들어 줄게요 그 다음에 이렇게 소스 가
들어갈 수 있는 위치를 넣어줄 수 있도록 합니다. 전 이제 이런 식으로
이미지 소스 폴더 안에 다음과 같이 유튜브 라는 하나의 이미지를 넣어
줄게요.
이렇게 유튜브 이미지를 하나 귀가에 중 겁니다. 그 다음 이제 아래쪽으로
내려와서 그 다음 다시 이제 이렇게 코드의 이미지 스포이드 안에 있는
유튜브 점 50 g 파일의 이렇게 그대로 너 얻을 수 있도록 합니다.
그럼 다음을 같이 id 갚은 이미지 프리뷰 라고 한번 넣어 줄게요.
이제 스타일에는
너비를 256 픽셀 높이 또한 256 픽셀 이렇게 한번 만들어 주겠습니다.
이제 한 번 저장을 해 주신 다음에 새로 고침을 해보시면 은 이런 식으로
버튼을 눌렀을 때 뭐 달이 뜨는 걸 알 수가 있어요. 이제 이런 식으로 이
모델을 끄기 전까지는 원래 화면으로 돌아갈 수가 없는 구조가 만들어진
것을 볼 수가 있어요.
이런식으로 바깥쪽을 클릭하거나 이렇게 x 버튼을 눌렀을 때 정상적으로
꺼지는 것을 알 수가 있구요.
이제 이런 식으로 간단하게 모달 창을 만드는 방법에 대해서 알아보았고
이렇게 특정한 버튼을 눌렀을 때 특정한 모델로 id 앞으로 연결을 해서
이렇게 보 달 창을 안정적으로 띄울 수 있다는 것을 알게 되었습니다.
암튼 이번 시간에 이렇게 한번 모델에 대해서 알아보는 시간을 가졌습니다.
모자를 사용하실 때 가장 중요한 점은 바로 이 id 같은데요. 이 id
속성 같은 경우는 한 번 사람이 되면 은 한 페이지 내에서 단 1개만
사용이 가능 합니다 그렇기 때문에 이제 이런 식으로 각각의 모델에는
번으로 붙혀 가지고 뭐 1230 하지
정액 아직 꼭 실제로는 그런 식으로 정해서 사용하는 경우가 가장 많고
암튼 이런식으로 아이디가 프로 모델을 애칭 해서 사람이 된다는 것만
이해하시면 됩니다.
아무튼 이렇게 이번 시간에는 모자를 만들어 보고 실제로 모달 창을 띄워서
역사 이틀이 꾸미는 방법에 대해서 이해 보는 시간을 가졌습니다.