Languages: English • 한국어 • (Add your language)

워드프레스 최신 버전에는 이미지를 배치할 수 있는 CSS가 정의되어 있다. 워드프레스는 이미지를 문단의 오른쪽, 왼쪽 및 중앙에 배치하는 CSS 클래스를 추가하고 있다. 이것을 사용하여 글을 이미지 주위에 배치할 수 있다.

중요한 테마 코드

이 새로운 CSS 클래스를 이용하여, 이미지 배치 및 이미지 주위를 글로 감싸려면, 워드프레스 테마에서 테마 디렉터리에 있는 style.css에 다음 코드가 포함되어 있어야 한다.

img.alignright {float:right; margin:0 0 1em 1em}
img.alignleft {float:left; margin:0 1em 1em 0}
img.aligncenter {display: block; margin-left: auto; margin-right: auto}
.alignright {float:right; }
.alignleft {float:left; }
.aligncenter {display: block; margin-left: auto; margin-right: auto}

워드프레스 블로그에 이미지를 추가할 때, 미디어 추가 화면에서 이미지를 오른쪽, 왼쪽 또는 중앙에 정렬을 선택할 수 있다.

이미지는 블로그 글에 선택한 스타일로 정렬되어 다음과 같이 표시된다:

<img src="http://example.com/images/leaf.jpg" 
 alt="leaf graphic" 
 title="leaf graphic" 
class="alignright size-medium wp-image-3109" 
height="25" width="30"/>

이미지 스타일

블로그에 이미지 사용을 위한 간단한 지침을 가지고 처음부터 시작해보자.

첫째, 아래는 이미지 주위에 글을 배치하는 명령이 없는 게시물의 일반적인 이미지 태그이다. 태그에 title 및 alt 속성을 추가하였다. ; alt 태그는 접근성에 중요하고, 태그는 이미지 툴팁(tooltip, 말풍선)을 위한 것이다.

<img src="http://example.com/images/leaf.jpg" 
 alt="leaf graphic" 
 title="leaf graphic" />

이미지를 감싸기 위해, 워드프레스 사이트를 제어하는 스타일시트를 조금 수정해야 한다. CSS 문서에 캐스케이딩 스타일시트(Cascading Style Sheets) 만들고 편집하는 많은 자료 목록이 있다.

워드프레스 테마 폴더에서, 텍스트 편집기로 style.css 파일을 연다. 중요! 편집하기 전에 백업 사본을 다른 곳에 저장한다! 이제, img검색을 한다. 모든 이미지 선택자는 함께 그룹화되어 있어야 한다. 아니면, 이 과정을 쉽게 하기 위해, 모든 이미지를 찾아 하나의 그룹으로 복사하여 붙여 넣기 한다.

테두리(Borders)

이미지 주위에 테두리를 만들 것인지를 결정해야 한다. 만든다면, 굵기, 색상 및 유형을 지정해야 한다. 테두리가 필요 없으면 코드는 다음과 같다.

img {border:0}

1 픽셀 빨간 실선 추가:

img {border:solid red 1px}

이미지에 링크를 만든다면, 방문자가 이 링크를 알 수 있도록 일부 브라우저에서는 이미지 주위에 테두리를 표시한다. 테두리를 넣지 않으려면, 다음 코드를 사용한다:

a img {border:0}

방문자가 이미지 위에 마우스를 올려 놓으면, 마우스가 손 모양을 변하고 이미지 테두리 색이 변하도록, 이미지에 호버(hover)를 추가할 수 있다:

a:hover img { border:solid red 1px; }

패딩 및 이미지 가로 크기

이미지가 콘텐츠 나머지 부분의 스타일과 잘 어울리도록 한 가지 더 정리하자.

이미지 주변의 패딩을 없애고, 이미지의 일부가 아닌 전체 가로 크기가 보일 수 있게 한다. 스타일시트에 없으면, 다음 코드를 추가한다:

p img { padding: 0; max-width: 100%; }

이미지 왼쪽, 오른쪽, 중앙 배치

이미지가 글의 한쪽 편에 배치될 때, 이미지와 텍스트 사이에 공간을 확보하여, 단어가 테두리 바로 위에 배열되지 않게 한다. 일부 브라우저에서 마진과 패딩을 다르게 처리한다. 다음 스타일은 대부분의 브라우저의 “공란 요구 사항(space requirements)”을 수용한다. 따라서 이미지가 텍스트 또는 이미지와 함께 인라인에 나타나는 목록과 겹쳐지지 않는다.

img.alignright { padding: 4px; margin: 0 0 2px 7px; display: inline; }
img.alignleft { padding: 4px; margin: 0 7px 2px 0; display: inline; }

display:inline 선언으로 함게 있는 텍스트와 이미지를 같은 라인에 배치(inline)할 수 있다.

이제, 이미지에 float 선언을 추가해야 한다. 하지만 기다린다. 왜 이미지의 왼쪽과 오른쪽 공간(floats)을 낭비해야 하는가? 왜 페이지의 오른쪽 또는 왼쪽에 이미지를 배치하고, 텍스트가 이 이미지 주위를 흐르도록 하지 않는가? 그렇게 할 수 있다. 스타일 시트에 없다면, 다음 코드를 추가한다: :

.alignright { float: right; }
.alignleft { float: left; }

참고: 기본/Kubrick 테마는 이 기술을 사용하지만 alignleft 및 alignright 클래스를 사용한다. alignleft 및 alignright를 사용하면 기억하고 사용하기 쉽다. 이 중 하나를 선택하여 사용하면 작동하게 된다.

이미지를 중앙에 배치할 수도 있다. center 태그는 더 이상 유효하지 않다. 그러므로 아래 코드를 사용하여 중앙에 배치하는 스타일을 만들 수 있다:

img.aligncenter { display: block; margin-left: auto; margin-right: auto; }

왼쪽, 오른쪽, 중앙 배치 예제

이것은 복잡할 것 같지만, 한 번 적용하고 나면. 다시는 엉망이 되지 않을 것이다. 이것을 사용하기 위해, 이미지에 링크를 만들고, class="alignright", class="alignleft", class="aligncenter"를 추가한다. 그러면 이미지는 오른쪽, 왼쪽 또는 중앙으로 이동하고, 글이 그 주위를 감싸게 될 것이다. 매우 간단하다.

This is some text that will wrap around the image that sits on the right side of the text that you are writing about the leaf that is there. That is, if you are writing about leaves in the first place and you want to write about this specific leaf.

This is text that sits above the leaf image that you might be writing about in your post if you were to write about leaves.

This is some text that will sit below the text image and you can continue to write about the leaf that is there.

대체 텍스트 글자 크기

일부 브라우저에서 ALT 태그로 생성되는 대체 텍스트의 글자 크기를 설정할 수 있다. 이것은 이미지에 마우스를 올려놓았을 때, 또는 이미지가 로드되지 않았을 때 나타나는 텍스트이다. 어떤 크기로도 설정할 수 있지만, 콘텐츠의 글자 크기보다 작은 것이 좋다

img {font-size:60%}

이미지 캡션

이미지는 단순하게 배치되어 있지만, 멋있게 보인다. alt 및 title 속성으로 이미지 모습을 조금 설명할 수 있다. 하지만 이미지에 약간의 텍스트를 추가하지 않으면, 자리만 차지하고 있게 된다. 약간의 “양념(spice)”을 추가하는 캡션 스타일을 만들어 보자.

위 예제에서, 테두리와 배경색을 설정해보았지만, 이제 원하는 스타일을 설정할 수 있다. 콘텐츠의 나머지 부분과 구별하기 위해 전체 컨테이너에 패딩을 설정하고, 텍스트 글자 크기를 다르게 설정해보자.

Red Leaf

This is text that wraps around the leaf image that features a caption. You might want a caption under the picture of the leaf if you were writing about leaves in your post. The caption sits below the text and helps the user to understand what the picture is about.

위 예제에서, 컨테이너에 alignright 클래스만을 추가하였다. 이것으로 이미지는 오른쪽에 배치되고 텍스트는 그 주위로 이동할 것이다. 이미지를 alignleft 클래스는 왼쪽, aligncenter는 중앙에 배치할 것이다.

Clear 속성

이미지가 이미지를 둘러싸고 있는 글의 양보다 클 경우, 이미지가 아래에 있는 요소 위에 깃발처럼 떠 있게 된다. 그러면 텍스트의 한 지점에서 깨끗하게 표시할 수 있다. 이 division 안에는 텍스트가 없음에 주목한다. 그러나 WYSIWYG 에디터를 사용한다면, division (like a hard rule)안에 어떤 것을 설정해야 한다. 그렇지 않으면 WYSIWYG 에디터는 div을 모두 삭제할 것이다(WYSIWYG 에디터가 사용하는 TinyMCE 에디터의 idosyncracy/bug 때문이다).

“HTML” 과 “Visual” 에디터 양쪽에서 작동하는 방법으로 표시된 내용을 지우려면, 아래와 같이 작성한다:

자료

• 이미지 사용
• WordPress Theme|테마 사용
• CSS