국비지원 16일차

※ html와 css을 활용해 탑배너 지우는 버튼 만들기.

탑 배너 지우기 전상태.

x버튼눌러 탑배너 지운상태.

1. 우선 input에 radio와 label 속성을 이용해서 만들어보고자 합니다.

2.input. readio 버튼 안에  top_banner의 전체적인 크기를 정하고 banner_box1로 이미지가 들어갈 박스(가로:980px 세로:80px )로 만들어줍니다.

3. 위에 이미지박스 안에 img태그나 div(background)를 활용해서 이미지를 넣어줍니다. 그음에 바로 label태그도 banner_box1안에 만들어서 id값을 input이랑 동일하게 하여 연결시켜 줍니다.

4.label 태그에 x값을 display:block을 제공하여 x의 영역크기를 잡아주고 포지션을 활용하여 banner_box1을 기준점으로 하여 right와 top을 활용하여 적당하게 위치를 맞춰줍니다.

5.radio의 동그라미 버튼은 #rad에 display:none; 으로 없애주고,

  #rad를 checked 할 때 + 그 자식속성인 top_banner가 사라지게(display:none) 만들어줍니다.

6. 이렇게 하여 탑배너의 지우는 기능을 다시 복습하였습니다 그리고 fixed를 활용하면 화면이 이동해도 따라오는 고정 탑배너도 만들 수 있게 됩니다.

 

 

※html와 css를 활용해 슬라이드 메인배너 만들기.

 

메인배너 1의 모습

 

슬라이드활용해 메인배너2로 이동한모습.

 

1. 먼저 이 배너 부분을 다 포괄할 수 있는 main_banner라는 클래스를 만들어줍니다.

2. 위 main_banner로 전체적인 배너의 크기를 잡고 나서  안에 input을활용해 radio속성을 2개 만들어줍니다.

3. 각가의 radio 속성 안에는 banner라는 공통 클래스가 들어가고 각각 banner1, banner2 클래스를 정의할 수 있는

 div 태그 2개를 만들어주고  안에다가 w_980(common라는 css에 만들어준 공통클래스이름인데 가로 980px magin:auto를 ) 선언한 것이다. 이 div를 만들어주고 이미지 박스 안에 들어갈 txt_box 만들어줍니다. 

4.banner부분에 가로*세로(100%* 100%(500px) )를 적용해 주고 banner1, banner2에 (left:0, left:100% 각각 다른 색으로) 선언해 준다  banner에 position을 먹이고 기준점으로 main_banner로 잡아주면 left:0을 준 banner1 번은 기본으로 배너에 위치할 것이고 left:100%을 준 banner2는 왼쪽에서 100% (즉, 해당 banner1의 넓이만큼 왼쪽으로 이동할 것이다 화면에 숨겨질 것이다.)

5. 그리고 txt_box,, 980px 넓이의 박스에 왼쪽 가운데로 위치하게  position :absolute을 쓰고 기준점을 w_980 클래스에 맞춰서 left, top:calc(50% - (txt_box 세로넓이 / 2) 하여서 전체 박스 세로 넓이의 중아에 위치하도록 해준다.

6. 마지막으로 label을 2개를 main_banner안에 만들어서 for에다 (bn1, bn2) 선언해 main_benner id 값을 각각 지정해 적용시켜 줍니다. 그리고 이 label 태그 클래스를 btn_slide의 공통 클래스와 각각의 btn_slide_l , btn_slide_r을 지정해 주고 양쪽에 버튼을 만들어줍니다

- 우선 가로* 세로 크기를 박스 크기에 맞춰서 정해주고 'ㄴ'의 한자키를 이용해 〈,〉를 만들어서 폰트 weight , size을 적용해 크기를 키워준다.

- rgba로 투명도를 조절한 배경색을 적용해 주고 position:absolute을 쓰고 기준점을 main_banner기준으로 left:0, right:0으로 양쪽에 붙여줍니다. 그리고 radio버튼은 display:none으로 없애주고 , input의 id값인 #bn2 가 checked 되면 + 그 자식태그인. banner2 {가 left:0;}으로 이동하게끔 하면  오른쪽라벨 즉 bn2가 적용된 라벨을 눌렀을 시 left:100% 에 위치하던 banner2 가 left:0으로 이동해서 원래 메인배너 화면에 보이게 될 것이다.

-그리고 input 2객의 각각 같은 name을 적용하여 다른한곳을 누르면 다시 radio가 적용되게 해 주면 편리할 것이다.