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

 

부트스트랩에서
자주 사용된 하나의 컴포넌트 로써 팝업창 자체를 의미한다. 알고 있었죠?
오답 창이 한번 뛰어 지면은 급 5달 창을 뜨기 전까지는 이제 다시 원래
화면으로 돌아갈 수 없다고 했었습니다.
이런식으로 간단하게 모달 창을 한번 구해 는 했었구요.
이번에 다뤄볼 내용은 바로 이 미디어 라는 건데요.
흔히 우리가 알고있는 미디어 란 의미는 일반적으로 사진이나 동영상 같은
어떤 정보들을 의미하는 하나의 구성 요소 라고 할 수 있죠.
흔히 이제 우리가 말하는 멀티미디어 같은걸 부트스트랩 안에서도 이렇게
이렇게 미디어 란 이름으로 클래스를 만들어서 사용할 수 있습니다.
이번 시간엔 이렇게 미디어에 대해서 알아볼 건데요 이 미디어 객체
컴퍼넌트 는 웹 사이트에서 동영상이나 사진 등을 글과 함께 보여 주고자
할 때 사용할 수 있는 컴포넌트 라고 할 수 있습니다.
이제 정확한 명칭은 이렇게 미디어 개체 라고 하는데 흔히 이제 우리가
그냥 미디어 라고 말하는 하나의 요소라고 할 수 있습니다.
이런 미디어의 기체가 증기 오는 일반적으로 댓글과 같은 각종 sms 연
컨텐츠를 개발할 때 말이 사용을 하구요.
2 미디어 를 사용하게 되면 은 이제 그림판 사진 같은데 이제 함께 보여
짐으로써 더욱더 웹사이트 내에서 3호 작은 같은 걸 할 때에 빠지지 않고
사용하는 기술이라고 할 수 있습니다.
아무튼 이제 이렇게 미디어를 한번 구현해 보면서 이런 전반적인 내용을
한번 2개 오도록 하겠습니다.
전 이제 이번 시간에 배울 내용을 위해서 이렇게 시 언어 자바 안드로이드
각각의 사진을 이렇게 하나씩 준비를 해보았는데요.
각각의 사진들은 다음과 같이 이렇게 이런식으로 정사각형 형태로 한번
사진을 준비해 보았습니다.
이제 이런 식으로 각자 사용할 사진을 하나씩 준비해 주시구요.
한번 이제 이러한 사진을 이용해서 미디어 객체를 다뤄보도록 하겠습니다.
바로 이렇게 서브라임 테스트를 실행 해 주시구요. 한번 코드를 바꿔 볼게요.
바로 이 쪽의 다음과 같이 하나의 패널을 클래스로 만들어 줍니다.
이렇게 구원 해주고.요 이제 이 안에 담을 같이
클래스 수록 패널 헤딩 넣어 줄게요. 패널 헤딩 같은 경우는 하나의 패널을
만들 때 가장 위쪽에 제목과 같은 것들을 넣어 줄 때에 사용할 수 있는
클래스라고 할 수 있구요.
바로 다음과 같이 h3 로 조금 큰 글씨로 한번 작성을 해 볼게요.
이렇게 패널 타이틀이라고 만들어주시고
이제 하나의 기호를 하나 넣어 줄게요.
글리프 알콘 에서 클리프 아이콘 중에서 펜스를 이렇게 넣어주고요.
이렇게 s 팬을 달아 줄게요. 이제 이렇게
nbsp 를 2개 넣어주셔서 가지고
2번 띄어쓰기 할 수 있도록 해줍니다. 그다음 이제
최신 강의 목록 이라고 넣어 줄게요.
이렇게 최신 강의 목록 이라고 패널 안에 사용될 제목 부분으로서 이렇게
글을 넣어준 거고요. 한번 이렇게 새로고침을 해 보시면 다음과 같이 하나의
패널이 들어가 있는것을 알수가 있고 이렇게 제 목 부분으로 최신 강의
맹목 이라고 나와 있는 것을 알 수 있습니다.
이제 한번 이렇게 헤딩을 만들어 줬기 때문에
바디 또한 만들어 줄 필요가 있겠죠.
이렇게 패널 밭 이라고 만들어 주시구요. 이제 여기에서 미디어가 등장합니다.
cib 클래스 한 다음에 미디어를 만들어 주고요.
그다음 이제 이렇게 div 클래스 한 다음에
미디어 레프트 를 넣어줍니다. 이건 바로 왼쪽에 위치한 어떤 노소 인데요.
저는 바로 다음으로 같이 at 를 넣어서 샵을 넣어주고
그다음 이제 다른 다음에 이 안에 하나님 g 를 넣어 줄게요. 이미지
클래스 한 다음에 미디어 어브 젝트 라고 만들어주고 그 다음 이제 이렇게
소스 파일을 이미지 소스 폴더 안에 있는
아까 그 중에 제가 삽입해 떤 그 세가지 사진 중의 하나인 시쯤 jpg
이렇게 넣어 줄게요.
그다음 이제 이렇게 얼티 한 다음에 c언어 강의 이미지라고 넣어
주겠습니다.
이렇게 해주시면 정상적으로 들어 갈 건데요 이 얼티 같은 경우는 이제
웹사이트를 눈으로 보지 못하는 시각장애인 같은 분들을 위해서 이렇게
이미지에 마우스를 올렸을때 해다 이미지가 어떤 사진인지 이렇게 알림창을
띄워 주는 형태로 구현해주는 기법을 말합니다.
이제 이런 식으로 c 언어 강 의 이미지라고 넣어줄 수 있도록 하구요.
이제 한번 새로고침을 해보시는 이런식으로 하나의 사진에 들어가 있는 것을
알 수가 있어요.
이제 이런 식으로 내려와서
div 클래스 1 브 라 4 미디어 바디로 넣어줍니다.
그걸 다 봐주시구요 이 제안에 다음과 같이 내용을 적어 주면 되겠죠.
이제 이렇게 h4 클래스 한 다음에 미디어 헤딩을 해가지고
이렇게 머리 뚫을 넣어줄 수 있도록 하구요. 데이트 넣어 줄게요.
달아주시고 전 이제 이런 식으로 c 언어기초 프로그램이 강 이라고 이름을
지어 주겠습니다.
이렇게 간이 이름을 지어 진 다음에는 a 태그 바깥쪽에
이렇게 nbsp 를 넣어서 한칸 띄워줄 수 있도록 하고 스페인 테이를
넣어서 뺏지를 1 넣어줄 수 있도록 합니다.
전 이렇게 뉴 뺏지를 넣어 줄게요. 이렇게 클래스를 이용해서 적절하게 뱃지
를 가리킬 수 있도록 하며는 이 배치 클래스 같은 경우는 말 그대로
lg 처럼 생긴 어떠한 틀안에 특정한 글자를 담을 수 있도록 해주는데요.
이제 한번 이렇게 한 다음에 저장 해 주시고 새로고침 해 보시면 바로
다음과 같이 이런식으로 제 목 부분이 들어가 있는 것을 알 수가 있구요.
또한 이 시험을 기초 프로그램은 강의 같은 경우는 이렇게 a 태그 안쪽에
넣어 줄 수 있도록 합니다.
그 다음에 이제 이런 식으로 아래쪽에 강의에 대한 설명까지 넣어주시면
이지 안정적으로 새로고침 을 했을 때 하나의 강의에 대한 적절한 설명이
들어가 있는것을 알수가 있구요.
이렇게 a 태그로 구성을 해서 이렇게 강의 안으로 들어갈 수 있도록
하나의 링크를 만들어 줄 수 있도록 하고 이렇게 유 라고 해가지고 새로운
강이라는 어떠한 메세지를 이렇게 남겨줄 수 있도록 하구요.
이제 이런 식으로 깔끔하게 하나의 강의 목록을 만들어 준 겁니다.
이제 이런 식으로 마찬가지로 두 개의 강의를 더 만들어 주시면 됩니다.
이렇게 하나의 미디어 태그를 그대로 복사해서 이렇게 아래쪽에 부처나 켜
주시면 됩니다.
물론 내용은 다 바뀌어야
쪼 이제 이런 식으로 다른 이미지로 바꿔 주시구요. 이렇게 시각장애인을
위해서
얼 대부분 또한 마찬가지로 잘 바꿔 주셔야 합니다. 그다음 이제 이 부분은
내용만 바꿔주시면 깔끔하게 작동 하겠죠.
전 이제 이런 식으로 자바로 내용을 바꿔 주었습니다.
이제 한번 이렇게 저장 해 주신 다음에 새로 고침을 해보시면 은 바로
이런 식으로 잡아 까지 아래쪽에 잘 들어가 있는 것을 볼 수가 있구요.
이제 마지막으로 위에서 기원했던 방식과 똑같이 마찬가지로 하나 더 추가를
해 볼게요.
저는 바로 이렇게 안 들어올 때까지 한번 넣어보았습니다. 이렇게 한 다음에
새로 고침을 해보시면 은 이렇게 잘 나오는 것을 알 수가 있는데 조금
부족한 느낌이 드는 이유가 이제 각각의 강의 마다 선을 그어 줘서 구해
주면 좋은데 그게 되어있지 않기 때문이죠.
이제 그렇기 때문에 이제 이렇게 각각의 미디어 태그 사이마다 hr 태그
를 넣어서 하나의 선을 그어 줄 수 있도록 합니다.
이제 한번 다시 새로 고침을 해보시면 은 이렇게 각각의 강의 마다 적절히
잘 9분이 되어 가지고 나온 것을 알 수가 있죠.
생각보다 되게 이 패널 안에 각각의 미디어 태그를 넣는 방식으로 깔끔하게
그러니 된 것을 알 수 있습니다.
이런식으로 이제 미디어 태그를 이용하면 각가지 사진이나 그림 더 올 때
훨씬 예쁜 디자인으로 작업을 할 수가 있는 거구요.
이제 이런 식으로 실제로 많은 웹사이트에서는 거의 이러한 미디어 객체가
거의 필수적으로 사람이 되고 있습니다.
특히 이제 우리처럼 부트스트랩 을 이용하는 경우는 당연한 얘기 이고요.
아무튼 이제 이번 시간엔 이런식으로 미디어 개체에 대해서 공부해 보는
시간을 가졌습니다.
미디어 객체 란 말 그대로 다양한 멀티미디어 콘텐츠를 담을 수 있는
하나의 컴퍼넌트 라고 할 수 있구요.
미디어 태그를 적절히 사용해서 더 다채로운 홈페이지 구상을 할 수가
있습니다. 아무튼 이번 시간에는 이렇게 미디어 게제 대해서 예 보는 시간을
가졌습니다.