티스토리 뷰

웹프로그래밍/네이버 부스트코스 배운 내용

프로모션 페이지 제작 1

이바다강 2022. 3. 22. 14:42

https://www.boostcourse.org

 

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

부스트코스(boostcourse)는 모두 함께 배우고 성장하는 비영리 SW 온라인 플랫폼입니다.

www.boostcourse.org

출처입니다.

 

프로모션 페이지를 이미지로 처리한 경우가 많은데 눈에 보이지 않더라도 시멘틱 하게 마크업 하는 게 좋다.

 

예시로 준 과제가 있는데 이를 먼저 해보는 과정을 적고 밑에 강의를 보고 피드백할 예정이다.

 

먼저 과제는 이렇게 진행되었다.

 

이 이미지를 시멘틱하게 바꾸는 과정인데 조금 어려울 수 있어서

필요한 태그가 뭔지 다 알려주셨다.

 

HTML : h1, ol, ul, p, strong, a, div

<내가 쓴 코드>

해보면 이런 식으로 작성했는데

<body>
    <h1>알면 알수록 즐거운 네이버쇼핑 윈도시리즈</h1>
    <p>쇼핑 즐기고 10%적립 혜택도 받으세요!</p>
    <ol>
        <li>
            <div>
                <strong>100 포인트만 있으면!</strong>
                <p>포인트 100원 이상 보유시 신청 가능<br>(신청 확인용으로 차감되지 않습니다.)</p>
                <a href="">포인트가 부족하다면?</a>
            </div>
        </li>
        <li>
            <div>
                <strong>쇼핑윈도 시리즈 즐기고~</strong>
                <p>11.15 ~ 11.30<br>누적 1만원 이상 구매</p>
            </div>
        </li>
        <li>
            <div>
                <strong>구매금액 10%적립!</strong>
                <p>최대 1만원<br>네이버페이 포인트 적립</p>
            </div>
        </li>
    </ol>
    <ul>
        <p>신청하기</p>
        <li>big3 쇼핑 이벤트와 중복으로 신청하실 수 없습니다.</li>
        <li>내부 사정에 따라 공지없이 신청 종료될 수 있습니다.</li>
    </ul>
</body>
 

1.

    <h1>알면 알수록 즐거운 네이버쇼핑 윈도시리즈</h1>
    <p>쇼핑 즐기고 10%적립 혜택도 받으세요!</p>
 
 
느낌상 제목 느낌인 두꺼운 글씨여서 h1을 주고 밑글씨는 그냥 추가 내용임으로 p를 줬다

2.

<ol>
        <li>
            <div>
                <strong>100 포인트만 있으면!</strong>
                <p>포인트 100원 이상 보유시 신청 가능<br>(신청 확인용으로 차감되지 않습니다.)</p>
                <a href="">포인트가 부족하다면?</a>
            </div>
        </li>
        <li>
            <div>
                <strong>쇼핑윈도 시리즈 즐기고~</strong>
                <p>11.15 ~ 11.30<br>누적 1만원 이상 구매</p>
            </div>
        </li>
        <li>
            <div>
                <strong>구매금액 10%적립!</strong>
                <p>최대 1만원<br>네이버페이 포인트 적립</p>
            </div>
        </li>
    </ol>
 
밑에는 그림 3개가 있는데
처음에는 ol로 설정했는데 
밑에 잘 보니 버튼 아래에 작은 글자가 ul을 써야될 것 같았다.
근데 사용하라는 거에 ol이 있어서 이건 ol로 써야되는 거 같아 수정했다.
 

3.

    <p>신청하기</p>
 
버튼은 button을 쓰는 걸로 알고 있는데 여기는 선택지에 없었다. 아마 선생님께서 다 생각이 있으셨겠지 싶어서 걍 P를 썼다.
 

4.

    <ul>
        <li>big3 쇼핑 이벤트와 중복으로 신청하실 수 없습니다.</li>
        <li>내부 사정에 따라 공지없이 신청 종료될 수 있습니다.</li>
    </ul>
 
마지막 부분을 자세히 보면 중앙에 작은 점 두개가 있는 걸로 보아
이건 그냥 한 문장이 아니라 나눠놓은거라고 알려주고 있었다.
그래서 순서없는 리스트로 나눴다.
 
일단 난 이렇게 잡았는데 선생님꺼 봐야겠다.

<선생님이 쓴 코드>

 

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

 

1과 2는 거의 비슷했는데 충격적인 사실을 깨닳았다.

 

일단 3을 보면

    <p>신청하기</p>

나는 버튼만 생각했는데 사실 신청하기는 신청하는 페이지로 넘어가는 것이기 때문에

a태그를 쓰는 것이었다!!!

 

가장 충격적인 것은 4번이다.

 

    <ul>
        <li>big3 쇼핑 이벤트와 중복으로 신청하실 수 없습니다.</li>
        <li>내부 사정에 따라 공지없이 신청 종료될 수 있습니다.</li>
    </ul>

리스트를 묶는 것은 비슷했는데

가장 중요한 것은 이를 <h2>를 이용해서

<h2> 유의사항 </h2>으로 표현해야 된다는 것이다.

눈에 보이진 않지만

화면에 없는 내용을 파악해서 숨김 테스트를 추가하는 게 중요하다는 것을 배웠다,,,

 

'웹프로그래밍 > 네이버 부스트코스 배운 내용' 카테고리의 다른 글

다단 레이아웃 제작하기 1,2  (0) 2022.03.22
1단 레이아웃 제작 방법  (0) 2022.03.22
float 해제 방식  (0) 2022.03.22
프로모션 페이지 제작 2  (0) 2022.03.22
IR (Image Replacement) 적절한 대체 텍스트 처리 방식/ 요소 숨김 처리  (0) 2022.03.22