처음 반응형 스킨으로 변경하려고 할때는 왠지 모를 거부감이 있었는데 일단 반응형 스킨으로 바꾸고 나니 이젠 반응형에 적응이 되었는지 예전 방식의 스킨은 이젠 답답해서 더 이상 사용하지 못할듯 하다. 변화가 두려워 진작에 바꾸지 못한게 안타깝다.
요즘 나는 반응형 블로그에서 글쓰기하는데 도움이 될만한 것들을 자주 알아보고 있다. 그중에 사진을 반응형에 맞게 본문의 왼쪽이나 오른쪽에 정렬하는 방법을 소개하고자 한다. 기본으로 제공되는 그림 정렬으로는 반응형 스킨에서는 제대로 작동하지 않는다.뭐 대부분 잘 이용하고 있겠지만 혹시나 아직 잘 몰라서 이용하지 못하는 경우도 있을테니 말이다. 사진 정렬을 자주 사용하는 경우에는 서식으로 저장해 두고 필요할때마다 활용하는것도 좋은 방법이다.
반응형 스킨의 블로그에서 사진을 왼쪽이나 오른쪽에 정렬하는 방법은 먼저 사진이나 동영상을 업로드한다. 동영상의 경우 링크할 iframe 부분을 복사한다.
글쓰기의 오른쪽 위에 위치한 HTML 모드를 클릭하여 상태를 변경한다.
그리고 HTML 모드에서 사진이 위치한 부분을 찾아 <p> [샵샵_1N | 파일명.jpg | width="900" height="675" filename = "IMG_0285.jpg" filemime="image/jpeg" | _샵샵] </p>의 맨앞에 <p> 태그의 스타일을 아래와 같이 수정한다.
<p style="width: 50%; float: right; margin-left: 20px; margin-top: 0; margin-bottom: 0;">
위의 문구는 전체 본문 크기의 50%에 오른쪽 정렬 그리고 사진의 왼쪽에 20px 의 공백을 가진다는 의미이다. 크기나 공백은 필요한 만큼 수정해서 사용하면 된다. 아래 예시로 올려둔 사진은 아래 공백은 제거한 상태이다.
반절이 아니라 원하는 크기로 사이즈를 조정하여 사용할 수 있다. 왼편에 사용할꺼라면 float: left; 로 교체하여 사용하면 된다. 동영상도 마찬가지이다. 동영상의 iframe 앞뒤에 <p style="width: 50%; float: right; margin-top: 0; margin-bottom: 0; margin-left: 20px;"><iframe>동영상주소 </iframe> </p> 형식으로 삽입하면 된다.
그럼 위의 사진을 이용하여 우측 정렬을 해본다.
샘플 1. 50% 의 크기로 사진 우측 정렬
알라딘의 경우 음반의 수도 많고 오프라인 매장의 음반 보유 목록을 인터넷으로 확인할 수 있는데다가 상태도 어느정도 보장받을 수 있어 편리하다. 가격은 정가 음반의 50% 정도에 판매되고 있어 음반을 구입하기에도 큰 부담은 없다. 아름다운 가게의 경우 음반을 취급하는 매장이 일부이고 알라딘에 비하면 음반의 상태가 좋지 않은 경우도 있다. 특히 음반의 알맹이가 없는 경우도 있으니 음반의 상태를 반드시 확인하고 구입해야 한다. 음반의 가격은 종류에 따라 500원에서 4,000원 정도로 알라딘보다 훨씬 저렴하게 구입할 수 있다. 이제까지 아름다운 가게에서 구하기 어려운 음반을 득템하는 경우도 있었다. 근데 오늘 드디어 몇년간 구하지 못해 안달이었던 음반을 이곳에서 발견하고 얼마나 기쁘던지 마음속으로 아싸를 외쳤다. ㅋㅋ
<p style="width: 50%; float: right; margin-left: 20px; margin-bottom: 0;">
[샵샵_1N|cfile8.uf@251C434756D37A9C08673F.jpg|
width="900" height="675" filename="IMG_0285.jpg"
filemime="image/jpeg"|_샵샵]
</p>
<p>알라딘의 경우 음반의 수도 많고 오프라인 매장의
음반 보유 목록을 인터넷으로 확인할 수 있는데다가
상태도 어느정도 보장받을 수 있어 편리하다....</p>샘플 2. 40%의 크기로 사진 우측 정렬
알라딘의 경우 음반의 수도 많고 오프라인 매장의 음반 보유 목록을 인터넷으로 확인할 수 있는데다가 상태도 어느정도 보장받을 수 있어 편리하다. 가격은 정가 음반의 50% 정도에 판매되고 있어 음반을 구입하기에도 큰 부담은 없다. 아름다운 가게의 경우 음반을 취급하는 매장이 일부이고 알라딘에 비하면 음반의 상태가 좋지 않은 경우도 있다. 특히 음반의 알맹이가 없는 경우도 있으니 음반의 상태를 반드시 확인하고 구입해야 한다. 음반의 가격은 종류에 따라 500원에서 4,000원 정도로 알라딘보다 훨씬 저렴하게 구입할 수 있다. 이제까지 아름다운 가게에서 구하기 어려운 음반을 득템하는 경우도 있었다. 근데 오늘 드디어 몇년간 구하지 못해 안달이었던 음반을 이곳에서 발견하고 얼마나 기쁘던지 마음속으로 아싸를 외쳤다. ㅋㅋ
샘플 3. 50%의 크기로 사진 좌측 정렬 - float: left;를 right로 margin-left를 margin-right: 20px; 로 변경
알라딘의 경우 음반의 수도 많고 오프라인 매장의 음반 보유 목록을 인터넷으로 확인할 수 있는데다가 상태도 어느정도 보장받을 수 있어 편리하다. 가격은 정가 음반의 50% 정도에 판매되고 있어 음반을 구입하기에도 큰 부담은 없다. 아름다운 가게의 경우 음반을 취급하는 매장이 일부이고 알라딘에 비하면 음반의 상태가 좋지 않은 경우도 있다. 특히 음반의 알맹이가 없는 경우도 있으니 음반의 상태를 반드시 확인하고 구입해야 한다. 음반의 가격은 종류에 따라 500원에서 4,000원 정도로 알라딘보다 훨씬 저렴하게 구입할 수 있다. 이제까지 아름다운 가게에서 구하기 어려운 음반을 득템하는 경우도 있었다. 근데 오늘 드디어 몇년간 구하지 못해 안달이었던 음반을 이곳에서 발견하고 얼마나 기쁘던지 마음속으로 아싸를 외쳤다. ㅋㅋ
샘플 4. 50%의 크기로 동영상 우측 정렬 - 사진과 같은 방식으로 iframe 에 동일한 p 태그를 적용한 것이다.
알라딘의 경우 음반의 수도 많고 오프라인 매장의 음반 보유 목록을 인터넷으로 확인할 수 있는데다가 상태도 어느정도 보장받을 수 있어 편리하다. 가격은 정가 음반의 50% 정도에 판매되고 있어 음반을 구입하기에도 큰 부담은 없다. 아름다운 가게의 경우 음반을 취급하는 매장이 일부이고 알라딘에 비하면 음반의 상태가 좋지 않은 경우도 있다. 특히 음반의 알맹이가 없는 경우도 있으니 음반의 상태를 반드시 확인하고 구입해야 한다. 음반의 가격은 종류에 따라 500원에서 4,000원 정도로 알라딘보다 훨씬 저렴하게 구입할 수 있다. 이제까지 아름다운 가게에서 구하기 어려운 음반을 득템하는 경우도 있었다. 근데 오늘 드디어 몇년간 구하지 못해 안달이었던 음반을 이곳에서 발견하고 얼마나 기쁘던지 마음속으로 아싸를 외쳤다. ㅋㅋ
