상품 상세화면을 구현할 때 정보와 기능이 많아서인지 유난히 신경써야할 CSS 부분이 많았다.

CSS를 다룰 때 내용, 사진 등 어떤 인풋이 들어와도 사용자가 보기 불편하지 않게 일정하게 보여져야 하는 점에 집중하다보니 헷갈리는 부분들이 생겨서, 구체적으로 더 찾아보고 공부하게 된 내용을 정리하려고 한다.

Wrapper

**래퍼(Wrapper)**란 요소들을 그룹핑하는 최외각 요소이다. 즉, 요소 그룹이 다른 요소 안에 감싸져있음을 의미한다. 이렇게 Wrapper로 감싸고 CSS를 설정하여 원하는 대로 기능을 구현하여 웹페이지의 가독성을 높이고 요소들을 정돈할 수 있다.

우리 팀은 웹사이트 화면을 구현할 때 컴퓨터 화면이나 브라우저의 차이에 의해 흐트러져 보이는 CSS가 골칫덩이였다.

원인은 텍스트나 이미지 등의 콘텐츠가 고정되지 않고 늘어나서 화면 전체 너비를 채우려고 하는 점이었다.

이를 해결하기 위하여 사용하기로 한 것이 Wrapper이다.

다음과 같이 화면을 감싸는 wrapper 클래스를 만들고, css 코드를 작성했다.

#HTML
<div class="wrapper"></div>

#CSS
.wrapper {
    width: 900px;
    cursor: default;
    margin: auto;
    margin-top: 7%;
    text-align: center;
}

경매 상세화면

고정가격 상세화면