이 블로그에서는 부트스트랩(Bootstrap)을 사용하고 있어서 아래와 같이 사용하면 됩니다. 만약 부트스트랩이 아니면 아래와 같이 사용하면 안됩니다.
글자나 문장 정렬
글자나 문장 정렬도 쉽습니다. 아래 코드를 보듯이 여러분이 알고 있는 CSS를 클래스(class)에 써주면 정렬해 줍니다. 만약 특정 문장을 가운데로 정렬하고 싶다면 <p class="text-center">중앙 정렬</p>해주면 될 것입니다. 예는 더보기를 보면 됩니다. 참고로 위에서 이 블로그는 부트스트랩을 사용한다고 적었습니다.
<p class="text-left">...</p>
<p class="text-center">...</p>
<p class="text-right">...</p>
<p class="text-justify">...</p>
다른 예로 애드센스 정렬에 대한 것입니다. 아래 그림을 보듯이 가운데로 정렬하기 위해서 text-align:center를 이용했습니다. CSS에서는 text-align:center라고 해야 합니다. 참고로 어떤 사람에게는 이 블로그 하단에 애드센스가 안 보일 것입니다.
이미지 가운데 정렬
만약 요소가 이미지라면 부트스트랩 CSS에 아래와 같이 정의됐기 때문에 이미지에 클래스(class)에 center-block을 삽입하면 됩니다. 이미지를 가운데로 할 때 CSS를 아래와 같이 정의한다고 알고 있습니다. 이미지를 가운데로 정렬한 예는 더보기를 보면 됩니다. 그런데 티스토리 에디터에서는 가운데 정렬하면 간단히 이미지를 가운데 정렬할 수 있으므로 굳이 사용할 필요없을 것 같고 CSS 편집시 유용할 것 같습니다. 그리고 축약형으로 아래 부트스트랩을 배우는데 아래와 같이 나왔네요. 요소에 .center-block을 써도 요소가 가운데로 된다고...
<img src="이미지 경로" class="center-block">
Float
CSS를 자세히는 아니나 알고 있는데 요소를 오른쪽에 흐르게 하려면 float:right;로 왼쪽으로 흐르게 하려면 float;left;라고 알고 있습니다. 부트스트랩에서는 아래와 같이 pull-left와 pull-right를 쓰면 됩니다. 참고로 부트스트랩은 원하는 div를 특정 기기에서 안 보이게 할 수 있습니다. 그래서 스마트폰과 태블릿에서는 상단의 애드센스가 안 보이게 됩니다.
<div class="pull-left">...</div>
<div class="pull-right">...</div>
그리고 위 float 속성을 없애기 위해서 style="clear:both;"를 사용했는데 부트스트랩에서는 클래스에 clearfix를 쓰면 되네요. 이 블로그 상단 애드센스에 pull-left와 pull-right를 사용했으니 이것을 제거해주기 위해서 clearfix를 사용했습니다.
호스팅/도메인<div class="clearfix">...</div>
'IT.인터넷.생활 관련 > 부트스트랩' 카테고리의 다른 글
| 부트스트랩 테마, 동영상 배경 2 (0) | 2015.12.10 |
|---|---|
| 부트스트랩 테마, 동영상 배경 1 (2) | 2015.12.07 |
| 부트스트랩 소스,동영상 표시 아이콘 나타내기 (2) | 2015.12.04 |
| 부트스트랩 동영상 배경 (0) | 2015.11.28 |
| 부트스트랩을 배울 수 있는 다른 홈페이지 (0) | 2015.11.19 |
| 부트스트랩,요소 감추기 (0) | 2015.11.03 |
| 부트스트랩 무료 테마와 템플릿 (0) | 2015.10.23 |
| 부트스트랩, 쉬웠으나 반응형에 대해 몰랐다. (4) | 2015.10.19 |
