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

 

테이블 구현하게까지 한번 바로 봤는데요.
대구 리 라고 하는 것은 이제 행과 열로 어떤 데이터를 표현하는 방법으로
정보를 효율적으로 보여주는 하나의 방법이라고 할 수 있다고 말해
썼죠. 따라서 이제 이렇게 루트 스트랩에 테이블 클래스를 이용하면 예쁜
디자인의 테이블을 통해 쉽게 만들 수 있다는 점에서 많이 사람이 된다고
있었어요. 이제 이번 시간은 다뤄볼 건 바로 이 인용구 라는 건데요.
이노무 라는건 이제 자주 사용되는 건 아닌데 이제 페이지 전체에서 최선
한번쯤 정도는 사용이 되는 1 요소라고 할 수가 있어요.
인형과 같은 경우는 이제 하나의 문장을 멋지게 표현하고자 할 때 사용하는
것으로서 흔히 특정한 인물이 임용된 문장을 표현할 때 사용하고 이제
이렇게 생긴 태그를 이용해요.
블랍 으로 생긴 하나의 이명구 문장이다 이런식으로 했어
이런식으로 약속된 태그를 사용하고요. 이제 스타일시트를 이용해서 2명 구의
형태를 더욱 더 세련되게 바꿀 수도 있습니다.
뭐 대표적으로 아인슈타인의 한 명 원 같은거 라든지 그런 식으로 각종
인용구 를 표현할 때 이렇게 이러한 태그를 사용해서 인 연구를 표현할
수가 있습니다.
한번 바로 실습을 통해서 확인해보도록 할게요. 자 이렇게 이제 이렇게
저번시간에 테이블 태그를 이용해서 각각의 강사들을 이렇게 정의하고 소개할
수 있는 하나의 컨테이너를 만드는 방법에 대해서 공부를 했었죠.
이제 이런 식으로 패널 바디 아래쪽에 이렇게 테이블 아래쪽에 디아 2를
클래스 록 패널 루터를 한번 만들어 줄게요.
애프터 법원에 바로 이제 이 농구가 들어가는 건데요 이렇게 간단하게
단순히 블라 커트를 한 다음에 이 안에 이제 어떠한 내용을 넣어주면 하면
끝입니다.
정말 간단하게 정리 가능하죠. 이제 아니 한 번 저런 이제 간단한 명언을
하나 넣어 보도록 할게요.
듀 n4 계신데 제가 좋아하는 말 중 하나요.
어떤걸 해는 다음에 이제 자기에게 해냈던 그 과거의 영광에 계속 머무르지
않고 새로운 어떤걸 진취적 오량 알 수 있도록 계속해서 이제 한번 한거
있고 그 다음으로 해야 될 꺼 하자.
이제 이런 의미로 이렇게 2 맨홀 기술 한번 넣어 볼게요 이렇게 한
다음에 한번 저장 해 주신 다음에 새로 고침을 해보시면 은 이제 이런
식으로 아래쪽에 하나의 이념으로 들어가 있는 것을 볼 수가 있어요
말 그대로 정말 이렇게 이렇게 떡하니 하나인 연구가 들어가 있는 것을 볼
수 있죠.
근데 이게 그렇게 형태가 예쁘진 않잖아요 그렇기 때문에 이제 형태를 조금
css 스타일시트를 이용해서 조금 더 바꾸어 주도록 할게요.
이런 경우는 인스트럭터 점 html 파일 안에서만 사용되는 하나의
스타일시트 이기 때문에 내부 스타일 시트로 한번 정리를 해볼 필요가
있겠죠.
이제 이런 식으로 위쪽으로 올라가서 이렇게 바디 바로 아래쪽에 하에
스타일을 넣어 주겠습니다. 스타일 타이 판 다음에 이렇게 텍스트 cs4 라고 하고
달아주셔서 이렇게 만들어 주도록 합니다. 그다음 이제 다음과 같이 블라
커트한 다음에 백그라운드를 한번 이정도 색깔 안 만들어 줄게요
그 다음에 뭐 더 레프트 한 다음에 이렇게 왼쪽에 윤곽선을 다음과 같이
이렇게 11살 정도로 솔리드 로 이런식으로 한번 만들어 주겠습니다.
그다음 이제 멀지 난 다음에 이렇게 특정 수치를 넣어주시구요.
패딩 또한 넣어 주겠습니다 이런 경우 이제 자기가 원하는 형태로 조금씩
바꿔 줄 수 있기 때문에 맘 편하게 할 수 있구요.
전 이제 이런 식으로 쿼츠 한 다음에 다음과 같이 넣어줍니다.
저렇게 해 주시고요 이제 블라 커트에
이제 이렇게 인 연구가 첨 들어갈때 왼쪽 에 해당하는 부분 즐비 벌고
번엔 다음과 같이 칼라 한 다음에
마찬가지로 ccc 시라 감 해주고요 그 다음에 컨텐츠 항간에 다음과 같이
오픈 커트를 해 줍니다 즉 인용구 로 표현할 땐 이제 큰따옴표 같이
생긴거를 써주는 데요.
이제 큰따옴표 중에서 여는 큰따옴표 즉 왼쪽에 들어간 이끈 딴 배 이렇게
들어갈 수 있도록 해 주고요.
이렇게 크기는 폰트 사이즈로 이전에 수치를 넣어주시구요.
매출을 높이는 다음과 같이 이렇게 해주시고
멀진 또한 치겠습니다. 이렇게 수직 정렬 또한 이렇게 -0.4 정도로 해서
조금 들어줄 수 있도록 합니다 그 다음 이제
그대로 복사해서 붙여넣기 한 다음에 닫는 거 또한 필요하겠죠.
이제 이렇게 오픈 말고 클로즈 로 만들어 주시구요 나머진 그대로 뜻이며
는 끝납니다.
이제 뭐 이렇게 만든 다음에 컨트롤 s 를 눌러서 저장 해 주신 다음에
한번 새로고침을 해보시면 홈페이지는 바로 다음과 같이 지속되는 것을 알
수가 있습니다.
되게 깔끔하게 잘 실력이 되는 것을 볼 수가 있죠.
이제 이런 식으로 잘 디자인에 대해서 나오는 것을 볼 수 있는데 조금씩
바꿔 주고 싶다면 이렇게 맞은 이나 패딩 같은걸 조금씩 바꿔 주신다면
손쉽게 교체할 수가 있습니다.
이제 이런 식으로 왼쪽에 있는 마진을 쭉 음모 늘려 가지고 0.8 정도로
께 늘린다면 은 이제 뭐 이런식으로 조금 더 오른쪽으로 이동하는 것을 볼
수가 있구요.
이런식으로 자유롭게 자기 하고 싶은 형태로 만들어질 수 있습니다.
또한 저같은 경우엔 이제 이렇게 왼쪽에 여백이 전혀 없기 때문에 별로 큰
따옴표 안에 이렇게 깔끔하게 들어가 있던 느낌이 안 들죠. 그렇기 때문에
조금 더 신경을 써서 이쪽에 이렇게 mbs 비틀이 정도 더 좋아지고
이렇게 조금 마치 되어 쓰기 처럼 해줄 수 있도록 합니다.
그다음 이제 한번 새로고침 해 보시면 바로 다음과 같이 어느정도 깔끔하게
이렇게 특정한 이념 뭐가 이렇게 출력되는 것을 볼 수가 있구요.
자기가 원하는 형태로 이제 각자 글씨를 받고 보시면서 이렇게 패딩 또한
잘 바꿔 보셔서 한번 자기가 원하는 형태로 만들어 볼 수 있도록 합니다.
전 이제 이런 식으로 해서 이렇게 깔끔하게 1번인 연구 표현까지 바로
보았읍니다.
이번 시간은 이렇게 어떻게 이 문구를 삽입하고 스타일시트를 이용해서 꾸밀
수 있는지에 대해서 한번 공부해 보는 시간에 가졌구요. 이렇게 있는것 같은
경우는 자주 사용
되진 않지만 한번쯤 사용되기 때문에 알아 놓으면 좋은 요소로써 이렇게
공부를 해 두어서 나중에 두고두고 요긴하게 사용해 보시기 바랍니다.
네 아무튼 이번 시간에는 이렇게 인용 표현까지 한번 다뤄 보는 시간을
가졌습니다.