프로모션 페이지 제작 2

https://www.boostcourse.org

다 함께 배우고 성장하는 부스트코스

출처입니다.

<선생님의 html 코드>

<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>

<선생님의 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;
}

---

보면 선생님은 백그라운드에 이미지로 처리했는데

여기서 선택을 할 수 있다.

div로 다 감싸서 글씨를 안 보이게 할 건지

아니면 부분만 안 보이게 할지

나중에 내용이 많아진다면 일일이 class를 부여해서 하기 번거로운 경우

묶어서 진행한다고 하시는데

 

여기서는 class를 이용했다. 거기다 번거롭게 하지 않기 위해서 blind라는 클래스 명을 통일해서 진행했고

 

보면 link_point와 link_join가 이 쓰는데 이는 실질적으로 눌려져야 되는 버튼이다,

<span class="blind"> 신청하기 </span> 보면 a태그 안에 이런 식으로 글자만 안 보이게 설정했다.

클릭이 되어야 되는 부분이기에 a태그로 각 클래스를 지정했고

원래는 display:block을 지정해주었는데 position:absolute를 사용하면 자동으로 block이 되므로 선언하지 않았다.

absolute를 이용해서 위치를 잡아주었다 물론. wrap클래스는 relative속성을 부여했다.

 

여기서 꿀팁은 개발자 도구를 이용해서 숫자를 넣어가면서 박스 크기와 위치를 맞춰갔다는 점이다.

 

결론 : 개발자 도구와 친해지자!