마크 업 : 이미지의 배치

이미지의 배치 테스트test에 오신 것을 환영합니다.자 시작합시다. 이미지의 배치에서는, 유저가 「지정 없음」 「오른쪽」 「왼쪽 도착」 「중앙 갖추기」중에서 자신이 좋아하는 것을 선택할 수 있도록 할 필요가 있습니다.게다가 「섬네일」 「중사이즈」 「대 사이즈」 「풀사이즈」라고 하는 선택지 중에서 크기를 선택할 수 있도록 해야 합니다.

위의 이미지는 중앙 집중이 될 것입니다. 이 단락의 나머지 이미지를 왼쪽으로 했을 때, 문장이 150픽셀의 이미지 주위를 둘러싸게 되는지 보기 위한 것입니다. 보시다시피, 이미지의 위·아래·오른쪽에 공간이 비어 있는 것을 알 수 있다고 생각합니다.텍스트는 이미지에 몰래 잠입하지 않습니다, 잠입하는 것은 좋지 않습니다.이미지도 충분히 호흡할 수 있는 공간이 필요합니다.이미지가 문장에 짜증 없이 역할을 완수할 수 있도록 해 주세요.다음 문장에서는 텍스트가 이미지의 오른쪽에서 아래로 원활하게 중단되지 않고 계속되고 있음을 알 수 있습니다.이것으로 완료! 다음은 매우 큰 이미지의 테스트test입니다.그리고, 이 이미지에는 배치의 지정이 없습니다. 위의 이미지는 1200픽셀도 있지만, 컨텐츠 지역에서 빠져나오는 일은 없고 들어가 있습니다. 그리고 앞으로는 오른쪽으로 옮기고 싶습니다.또 이번에도, 이미지 위, 아래, 왼쪽에 충분한 여백이 있다고 생각합니다.호라, 저쪽에 있는 그를 봐 주세요!우측쪽에 있는 그 이미지!왼쪽 이미지가 뭐라고 해도 좋습니다, 아름다운 배치예요다른 사람의 의견은 신경쓰지 마세요. 그리고 이 근처에서 텍스트가 오른쪽의 이미지 아래로 돌아와서, 딱 좋은 상태에 맞는 것을 알 수 있다고 생각합니다.치고 딱 좋은 상태로 공간이 남아 있고 모든 것이 깨끗하게 표시되어야합니다.그렇습니다…。오른쪽 이미지로 돌아가는 것은 기분 좋네요. 자, 이것으로 끝이라고 생각했을지도 모릅니다만, 앞으로 캡션의 테스트test에 들어갑니다! 위의 이미지는 중앙 집중이 될 것입니다.캡션에는 링크가 포함되어 있습니다만, 이상한 표시가 되어 있지 않은지 확인합시다. 이 패러그래프의 나머지 부분은 150×150 사이즈의 왼쪽 이미지의 회전을 테스트test 하기 위한 연결입니다.  보시다시피 이미지 위·아래·오른쪽에 공간이 필요합니다.텍스트는 이미지에 몰래 잠입하지 않습니다, 잠입하는 것은 좋지 않습니다.이미지도 충분히 호흡할 수 있는 공간이 필요합니다.이미지가 문장에 짜증 없이 역할을 완수할 수 있도록 해 주세요.다음 문장에서는 텍스트가 이미지의 오른쪽에서 아래로 원활하게 중단되지 않고 계속되고 있음을 알 수 있습니다.이것으로 완료! 그러면 매우 큰 이미지의 테스트test입니다.그리고, 이 이미지에도 배치의 지정은 없습니다. 위의 이미지는 1200픽셀 폭이지만, 콘텐츠 영역에서 벗어나서는 안됩니다.콘텐츠의 흐름을 시각적으로 방해하지 않는 형태로 지정된 영역 내에 있어야 합니다. 그리고 앞으로는 오른쪽 이미지로 이동하고 싶습니다.또 이번에도, 이미지 위, 아래, 왼쪽에 충분한 여백이 있다고 생각합니다.호라, 저쪽에 있는 그를 봐 주세요!우측쪽에 있는 그 이미지!왼쪽 이미지가 뭐라고 해도 좋습니다, 아름다운 배치예요다른 사람의 의견은 신경쓰지 마세요. 그리고 이 근처에서 텍스트가 오른쪽의 이미지 아래로 돌아와서, 딱 좋은 상태에 맞는 것을 알 수 있다고 생각합니다.치고 딱 좋은 상태로 공간이 남아 있고 모든 것이 깨끗하게 표시되어야합니다.그렇습니다…。오른쪽 이미지로 돌아가는 것은 기분 좋네요. 그럼 이것으로 끝입니다.이미지 배치의 테스트test, 수고하셨습니다!