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

 

테이블이 하는 것은 쉽게 말해서 행과 열로 데이터를 표현하는 하나의
클릿을 구할 수 있어요. 지난 시간은 이렇게 앱 사이트 확장하게 까지 한번
다뤄 받는데요. 이번 시간엔 이제 확장된 웹 사이트 중에서 이제 한 개를
골라 가지고 거기에는 어떠한 페이지에 이제 테이블을 하나 넣어서 이제 웹
디자인 작업을 한번 해보려고 헤어
자 이렇게 바로 이번 시간에 다뤄볼 내용은 이 테이블이 하는건데요.
테이블은 흔히 정보를 더 효율적으로 행 가요 로 나누어 상을 보여주기
위해서 사용하는 요소라고 할 수가 있구요.
부트스트랩 에 테이블 클래스를 이용하면 예쁜 디자인의 테이블을 만들 수가
있죠.
그리고 이 반적으로 테이블 클래스 같은 경우는 웹사이트에 게시판에서
게시글을 보여주기 위해 넣는 형태로써 가장 많이 사용이 되고 있습니다.
이렇게 탭의 같은 경우는 기본적으로 행과 열로 구성이 된다고 할 수가
있어요.
이게 바로 대표적으로 테이블을 이용한 아예 시라고 할 수 있죠. 이런
식으로 어떠한 보고서나 어떤 게시판에 게시 같은 것들을 작성할 때 이런
형태로 많이 들어가 있습니다.
이제 부트스트랩안에서도 이런 식으로 한번 테이블을 구현해 볼 건데요.
한번 이렇게 지난 시간에 적합했던 내용을 한번 실행해 보시고 이렇게
각각의 사이트에 잘 들어갈 수 있다는 것을 확인한 다음에 한번 이번시간은
이 강사진 페이지 한번 테이블을 넣어 가지고 어떠한 정보를 표현할 수
있도록 한 번 해보겠습니다.

 바로 이렇게 서버란 테스트를 실행한 이후에
이 강사진 인스트럭터 젊 html 파일을 이렇게 한번 실행을 해 줄게요
네비게이션 아래쪽에 정보가 들어가면 되겠죠. 이렇게 give 클래스 한
다음에 컨택을 하나 만들어 주시고요. 달아 주신 다음에 이제 이 아래
하나의 로 를 넣어 줄게요.
이렇게 하나의 열이 간걸 알려주도록 로우를 넣어주시고
그다음 이렇게 div 클래스 한 다음에 이렇게 총 12 만큼 즉 1개
10만 들어갈 수 있도록 게 만들어 주신 다음에 안에 이렇게 give
클래스로 패널을 만들어 주겠습니다. 

패널 프라이머리 이렇게 만들어 주시고요.
그다음 이제 패널 프라이머리 아내는 패널 헤딩이 먼저 들어갑니다.
캐드가 만들어 주시구요 h3 5 조금 큰 글씨로 작성해 보도록 하겠습니다.
패널 타이틀로 이렇게 한번 만들어 줄게 그다음 이제 이렇게 닫아 주시고
이 안에 스 펜으로
클릭스 아이콘을 하나 넣어 줄게요. 이런식으로 태그 라는 하나의 아이콘을
넣어 주겠습니다.
그렇게 만들어 주시고요. 그 다음에 이런 식으로
북한을 띄어 주신 다음에 나 동빈 강사 라고 한번 제 이름을 넣어 줄게요.
이런식으로 각자 자신의 원하는 형태로 강사 이름을 하나 넣어 주도록
합니다.
달지 이런식으로
패널 한 다음에 가드를 만들어 줄게요 이렇게 머리 부분에 만들었기 때문에
몸통 부분 또한 이렇게 하나 만들어 주는 거죠. 그래서 이렇게 하나의
미디어 를 넣어 주겠습니다.
미디어 레프트 를 넣어서 왼쪽에 하나의 그림이 나올 수 있도록 만들어
주고요 1 a 태그를 만들어서 헐 링크를 가르쳐줄 수 있도록 합니다.
그러한지 이렇게 게임 이적으로 한번 사용해 볼 뒤 별로 법원이라는 하나의
장상 할 때 이미지를 하나 가져왔습니다.
이제 이런 식으로 한번 이미지를 보여 주도록 할게요.
미디어 오브젝트로 이렇게
소스 코드로 이미지 소스 폴더 안에 있는 방금 제가 넣었던
집엘 버프로 1.0 피즈 파일의 이렇게 가져올 수 있도록 해줍니다.
그다음 이제 얼티 안 다음에 시각장애인들을 위해서 개발자 이미지라고 한번
알려 주도록 할게요.
그 다음에 이제 이런 식으로 제비 그래 싸라 다 만들어 주신 다음에
미디어 한 다음에 이렇게 바디를 넣어 줄게요.
이렇게 넣어준 다음에 h4 태그 하나 더 만들어 지겠습니다.
미디어 헤딩 한 다음에 이렇게 만들어 주고
다 동빈 이라고 넣어 줄게요. 그다음 이렇게 다 봐주시고 이렇게 brt 를
하나 넣어서 한칸 띄워줄 수 있도록 합니다.
그다음 이제 여기에는 해당 당사에 대한 삼룡이 들어갈 수 있도록 한번 해
줄게요.
전 이제 이런 식으로 그냥 간단하게 설명을 넣어주었습니다. 이렇게 딱
한줄만 작성을 했구요.
그 다음에 이제 이렇게 패널 바디 부분 아래쪽에 다음이 태그가 들어갈 수
있도록 합니다.
이제 바로사용 되는게 테이블이 인데요. 이렇게 테이블 클래스의 만들어 주신
다음에
먼저 테이블 헤드를 지정 해 줄게요. 그럼 이제 이렇게 지아를 넣어서
하나의 열을 알려줍니다. 다 봐주시구요 닫아 주십니다.
제 그다음 이제 첫번째 올해는 다음과 같이 바로 각각의 속성들을 지칭하는
하나의 행위 이렇게 들어갈 수 있도록 해줍니다. 좀 이렇게
강사 명강의 번 호 강의 제모 5
그 다음에 이제 이렇게 강의 날짜까지
한번 더 얻을 수 있도록 합니다 이렇게 네 개의 속성을 지칭 해주시구요.
굉장히 아래 못한 이런식으로 넣어줄 수 있도록 합니다.
자 이제 치아 택을 또 넣어가지고 이렇게 각각 하나의 행을 만들어 줄 수
있도록 하고 이렇게 기대로 한 다음에
제 이름은 넣어주고 이렇게 가까이 강의 번호 들을 한 번 적어질 수
있도록 합니다.
잠언 이런식으로 좀 해볼게요. 다섯번째 강의 같은 경우는 바로 c언어
기초 프로그래밍 강좌 줘 그래서 이런 식으로
랙 철 쯤에 시스템의 파일에 이렇게 원래 치울 네임으로
씨가 들어가도록 이렇게 만들어 주시구요. 전 이제 이런 식으로 한번 만들어
주겠습니다.
이렇게 적어 좀 이유는 지난 시간에 웹사이트에 확장 부분을 공부할 때
다뤄 보았기 때문에 이번 시간에 간단하게 이렇게 언급만 하고 넘어가도록
하겠습니다.
이렇게 오타 같은건 잘 잡아 주시고요. 이런식으로 해준 다음에
이 점은 이렇게 택을 다 주도록 합니다. 이런식으로 각각의 데이터가 들어갈
수 있도록 해줍니다.
현재 이런식으로 임의적으로 하나의 날짜를 넣어 보았구요. 예 그대로
복사해서 잡아 또한 마찬가지로 넣어주고
이렇게 번호 또한 바꿔 주시고요. 뭐 이제 이런 식으로 한번 닫았고
적절하게 넣어 줄게요.
자 들어갈 수 있는 내용을 행 마다 정리를 해서 넣어주시면 됩니다.
게임 이쪽으로 그냥 자기 동안 형태로 한번 넣어 보지만 하시면 됩니다.
이런식으로 체계적으로 정리 하시면 더 좋구요. 이런식으로 한번 구성을 한
다음에 새로 고침을 해보시면은 바로 다음과 같이 깔끔하게 하나의 강사에
대한 정보가 들어가 있는 것을 알 수가 있구요.
델리 체계적으로 잘 정리가 되어 있고 보기에도 나쁘지 않다는 것을 알
수가 있습니다.
이렇게 소비에서 강사진으로 넘어 왔을 때 어떠한 가사들이 이제 코딩
포스터에서 일을 하는지 이런 식으로 소개를 할 수 있는 페이지를 테이블을
이용해서 간단하게 표현할 수가 있는 거고요.
이런식으로 가까이 강의 들어가서 강의를 들을 수도 있도록 이렇게 렉쳐
네임 이란에게 변수로 이렇게 각각 강의 이름을 지정해 주었구요. 이제 이런
식으로 닿아 깔끔하게 정리가 되어 있는 것을 알 수가 있어요.
왜 이렇게 한번 간단하게 작성을 해 보았구요.
이번 시간은 이제 이런 식으로 간단하게 패널 안에 테이블 태그가
들어가는 방식으로 테이블을 어떻게 구성하고 만드는지 에 대해서 한번
공부해 보는 시간을 가졌구요.
이렇게 테이블을 이용하면 각각 이 속성에 따른 행과 열의 구성으로 정보로
표현할 수가 있게 되는 거예요.
이제 이렇게 각각의 행 마다 데이터가 들어가고 요렇게 10 마다 강의
번호 강의 제목 이런식으로 데이터가 잘 들어가 있는 것을 알 수가 있고
이제 실제로 이런 테이블을 이용해서 여러가지 게시판이나 이런 식으로 어떤
목록을 보여줄 때 아주 간편하고 효과적으로 웹 디자인을 할 수가 있는
것입니다.