HTML 훈련 - (1) Ad Banner

 

훈련 (1) Ad Banner

 

위와 같은 광고 배너를 만들어보자.

우선 예제 이미지를 보고 각 파트로 나눠보면 총 3개의 파트로 나눌 수 있다.

 

 

- button을 누르면 URL로 이동하도록 하면 될 것 같다.

 

 

 

__ 코드 작성 __

 

 

<h1>    
   Unlimited downloads. <br/>
   Our best content. <br/>
   No attribution.
</h1>
    
 
 <p>
    As low as $9/mo <br/>
    Buy description or credit packs
 </p>
    
        
 <a href="#" target="_blank">
      Join Pro
 </a>

 

- 위와 같이 디자인상으로 줄을 띄고싶을 때에는 <br/>태그를 이용하자.

단, 문맥상 나누어져있는 'paragraph'의 경우에는 <p>태그로 구분!

 

 

- a 태그의 필수 속성인 href에는 URL을 입력해야한다.

예제의 경우 URL은 모르므로 그냥 임의로 #을 입력해주었다.

 

- a태그의 속성인 target의 value를 _blank로 주어 새창에서 열리도록 하였다.

 

 

---

** 참고 - href="#"의 용도

 

1. 클릭 이벤트 발생시 페이지 전환 x

 

2. 화면 최상단으로 이동하도록

-> 이 경우에는 href="#"보다는 아래 코드를 쓰는 것이 낫다.

 

<input id="Top" type="button" onclick="window.scrollTo(0,0);" value="TOP">

JavaScript의 window.scrollTo() 함수를 이용하자.

 

 

3. 만약에, 최상단으로 이동하지 않도록 하기 위해서는 세미콜론을 붙여준다.

 

href="#;"

href="#"은 이벤트를 수행하기 전 최상단으로 이동한 후 수행하지만,

href="#;"은 최상단으로 이동 없이 이벤트를 바로 수행한다.

 

href="#"에 대한 내용은 아래 포스팅에 따로 정리하였다.

https://mywebproject.tistory.com/80

html) a href="#"의 용도

 

---

 

위 코드 전체를 '디자인'적 요소로 감싸주기 위해서

<div>요소 안에 붙여넣어보자.

 

 

<div class="modal">
        <h1>    
            Unlimited downloads. <br/>
            Our best content. <br/>
            No attribution.
        </h1>
    
        <p>
            As low as $9/mo <br/>
            Buy description or credit packs
        </p>
    
        
        <a href="#" target="_blank">
            Join Pro
        </a>
</div>

 

그리고 나서, 'modal'이라는 이름의 class를 부여해주면

다음과 같이 완성된다.

 

 

 

 

+) style.css 를 따로 link태그로 링크해주었다.

 

    <link rel="stylesheet" href="./style.css">

 

 

 

++) style.css 에 대한 분석은 아래 포스팅을 통해 해보았다.

 

https://mywebproject.tistory.com/85

html_pr01) style.css Review

 

---

 

 

 

** REFERENCE LECTOR

김버그의 HTML&CSS는 재밌다 - 구름EDU

 

 

 

** style.css 파일

https://mywebproject.tistory.com/83

tmp) style.css