프로모션 페이지 제작

주요 태그 및 속성

• HTML
  h1, ol, ul, p, strong, a, div
• CSS
  position, width, height, background, margin

HTML 실습

<h1>알면 알수록 즐거운 네이버쇼핑 윈도시리즈</h1>
<p>쇼핑 즐기고 10%적립 혜택도 받으세요!</p>

<ol>
<li>
	<strong>100 포인트만 있으면!</strong>
	<p>포인트 100원 이상 보유 시 신청 가능(신청 확인용으로 차감되지 않습니다.)</p>
	<a href="#">포인트가 부족하다면?</a>
</li>
<li>
	<strong>쇼핑윈도 시리즈 즐기고~</strong>
	<p>11.15 ~ 11.30 누적 1만원 이상 구매</p>
</li>
<li>
	<strong>구매금액 10%적립</strong>
	<p>최대 1만원 네이버페이 포인트 적립</p>
</li>
</ol>

<a href="#">신청하기</a>

<h2>유의 사항</h2>
<ul>
<li>BIG3 쇼핑 이벤트와 중복으로 신청하실 수 없습니다.</li>
<li>내부 사정에 따라 공지 없이 신청 종료될 수 있습니다.</li>
</ul>
모든 텍스트를 화면에서 숨겨야 하기 때문에 복잡하게 DIV로 감싸거나 하지 않고, 우선 시멘틱하게 마크업을 하는데 집중해주시길 바랍니다.

<div class="wrap">
	<h1 class="blind">알면 알수록 즐거운 네이버쇼핑 윈도시리즈</h1>
	<p class="blind">쇼핑 즐기고 10%적립 혜택도 받으세요!</p>

	<ol>
	<li>
		<strong class="blind">100 포인트만 있으면!</strong>
		<p class="blind">포인트 100원 이상 보유 시 신청 가능(신청 확인용으로 차감되지 않습니다.)</p>
		<a href="#" class="link_point"><span class="blind">포인트가 부족하다면?</span></a>
	</li>
	<li class="blind">
		<strong>쇼핑윈도 시리즈 즐기고~</strong>
		<p>11.15 ~ 11.30 누적 1만원 이상 구매</p>
	</li>
	<li class="blind">
		<strong>구매금액 10%적립</strong>
		<p>최대 1만원 네이버페이 포인트 적립</p>
	</li>
	</ol>

	<a href="#" class="link_join"><span class="blind">신청하기</span></a>

	<h2 class="blind">유의 사항</h2>
	<ul class="blind">
	<li>BIG3 쇼핑 이벤트와 중복으로 신청하실 수 없습니다.</li>
	<li>내부 사정에 따라 공지 없이 신청 종료될 수 있습니다.</li>
	</ul>
</div>

모든 요소를 감싸고 있는 <DIV class="wrap">을 추가하여 전체 컨텐츠 영역에 이미지를 적용합니다.

텍스트를 한꺼번에 숨기기 위해서 부모 요소에 blind 클래스를 추가하면 됩니다. 하지만 이미지 안에서도 <a> 링크는 동작해야하기 때문에 <a>가 있는지 반드시 확인해야 합니다.

<a>에는 이미지 상의 버튼과 동일한 영역과 위치를 잡을 수 있도록 스타일을 적용하기 위해서 link_point와 link_join 이라는 클래스를 각각 추가합니다. 버튼의 텍스트는 다른 요소들과 마찬가지로 숨기기 위해서 <span>으로 한번 더 감싼 후, blind 클래스를 추가합니다.

CSS 실습

.wrap {
	position: relative;
	width: 1020px;
	height: 650px;
	margin: 0 auto;
	background: url(img/promotion.png) no-repeat 0 0;
}

DIV.wrap에 배경 이미지를 넣고, 컨텐츠 영역을 이미지 크기만큼 지정해 줍니다. margin: 0 auto로 화면 상으로 가운데에 위치하도록 정렬하였습니다.

ol {
	list-style: none;
}

body, ol {
	margin: 0;
	padding: 0;
}

.blind {
	position: absolute;
	clip: rect(0 0 0 0);
	width: 1px;
	height: 1px;
	margin: -1px;
	overflow: hidden;
}

CSS 리셋 강의에서 배운 대로 기본 스타일을 초기화하여 불필요한 여백이나 스타일이 노출되지 않도록 합니다. blind 클래스에 텍스트를 숨기기 위한 속성들도 모두 추가합니다.

.link_point {
	position: absolute;
	left: 100px;
	bottom: 130px;
	width: 133px;
	height: 22px;
}

.link_join {
	position: absolute;
	bottom: 32px;
    left: 340px;
    width: 340px;
    height: 70px;
}

마지막으로 이미지와 동일한 영역과 위치에 <a> 링크가 올 수 있도록 스타일을 추가하여 다음과 같이 CSS를 완성하였습니다.

ol {
	list-style: none;
}

body, ol {
	margin: 0;
	padding: 0;
}

.wrap {
	position: relative;
	width: 1020px;
	height: 650px;
	margin: 0 auto;
	background: url(img/promotion.png) no-repeat 0 0;
}

.blind {
	position: absolute;
	clip: rect(0 0 0 0);
	width: 1px;
	height: 1px;
	margin: -1px;
	overflow: hidden;
}

.link_point {
	position: absolute;
	left: 100px;
	bottom: 130px;
	width: 133px;
	height: 22px;
}

.link_join {
	position: absolute;
	bottom: 32px;
    left: 340px;
    width: 340px;
    height: 70px;
}