그냥 그래
CSS를 이용한 하단 고정 배너를 만들어보자. 본문
안녕하세요 도롱군입니다.
이번 포스팅은 CSS를 이용한 하단고정배너 (bottom fixed banner)를 만들어 보려고합니다.
준비할 것 html와 css, 배너 닫기 기능을 넣기 위해 Javascript 약간의 지식? 이 필요합니다.
하단고정배너? 그게 뭔가요?
위의 사진과 같이, 스크롤 영역에 상관 없이 창의 하단부분에 고정되어 자리하는 배너입니다.
많은 웹사이트에서 이를 이용한 웹디자인이 되어있고 광고 효과도 괜찮게 평가되는
알아두면 괜찮을 법 한 녀석입니다.
1. html 작성
모든 웹의 기초가 되어주는 html.
독타입 선언을 한, <html><head><body>이 들어가있는,
기본적인 html 구조를 잡아주셔야합니다.
이제 html 문서의 몸체 부분의 내용을 기입해주어야 하는데요.
기본적으로 레이아웃을 나눌때 자주 사용되는 <div> 태그와 배너안에 들어갈 내용을 집어넣기 위해선 <p> 태그가 필요하겠죠?
기입해줍시다.
아무 내용이나 적어주시면 되겠습니다.
하지만 생각을 조금 해보면 배너 영역 안에 글씨가 닫기와 본문 내용 2개의 영역이 나누어져 있다는 것을 알 수 있습니다.
1번 영역 - <p>태그가 들어가는 일반 본문영역
2번 영역 - <p>태그에 클래스를 주어 차별시켜도 되지만, 귀찮은 바람에 <span>태그를 이용했습니다.
Javascript를 이용한 배너 닫기 기능을 추가할 영역
그럼 추가적으로 영역을 나눠주기 위하여 <div>를 2개정도 더 추가해봅시다.
왜 <span>태그에 javascript를 한번에 적은 것인가요?
또한 this선택자는 무엇인가요?
우선 아래의 사진을 보고 알려드리겠습니다.
이런식으로 닫기를 누르면 사라지는 것을 볼 수 있습니다.
this는 나 자신을 정의하는 선택자입니다.
자바스크립트를 이용하여 style을 조작할 수 있는데요.
display='none' 을 이용하여 display style을 사라지게 만들었습니다.
이를 응용하면 퍼블리싱할때 요긴하게 쓰이는 닫기/열기 기능을 만들 수 있습니다.
이제 어느정도 html 문서의 틀을 잡았다면 옷을 입혀줘야겠죠?
(용량이 너무 커서 코딩하는 것을 모두 담을 수 없어 아래 사진으로 대체합니다.)
나머지 class들을 적용시켜줍니다 html문서에.
또한 외부 스타일시트를 html에서 불러오게 한 뒤에 적용시켜 미리보기를 실행해봅시다.
이상입니다.
*해당 포스트는 하단 배너의 위치 및 자바스크립트를 이용하여 하단 배너가 사라지는 것을 보여주기 위해 만들어졌으며,
해당 코드로 실사 시, 본문 텍스트가 하단에 깔리게 됩니다. 이럴땐 div에 id로 묶어서 스크립트로 처리해야합니다.
감사합니다.
'Web > CSS3' 카테고리의 다른 글
| CSS 애니메이션 라이브러리 간단하게 애니메이션 구현 (1) | 2018.03.02 |
|---|---|
| CSS 기초부터 활용하기 3편 (색상 편) (0) | 2017.08.24 |
| CSS3 그라디언트 배경화면 만들기 (0) | 2017.08.20 |
| CSS 기초부터 활용하기 2편 (스타일 시트 편) (0) | 2017.08.15 |
| CSS 기초부터 활용까지 1편 (0) | 2017.08.14 |
