스펀지 패드 디자인 시position 지정 방법

반응 설계(액체 레이아웃)할 때의 위치 양식에 대한 기술 방법.

지정 방법

left, right 값을 각각 내용 영역(부모 요소)의 백분율로 지정하면 하위 요소는 부모 요소의 너비에 따라 달라집니다.
top,bottom을 적당히 지정하세요.
또한 이미지의 경우 "Flid Image"를 잊지 마십시오.

예제

대체로 다음과 같다.

■ 설계

※ 콘텐츠 영역 640px 시 디자인

■태그

HTML

<div class="contentsArea">
  <div class="circle"><img src="circle.png" alt=""></div>
  <div class="rect"><img src="rect.png" alt=""></div>
</div>

※ 원형은 클래스circle, 직사각형은 클래스rect

css

.contentsArea {
  position: relative;
}
.contentsArea .circle,
.contentsArea .rect {
  position: absolute;
}
.contentsArea .circle {
  top: 20%;
  left: 15.625%;
  right: 62.5%;
}
.contentsArea .rect {
  top: 70.25%;
  left: 37.5%;
  right: 15.625%;
}
.contentsArea img{
  max-width: 100%;
}