국비지원 28일차

※CSS를 활용한 슬라이드 구조

 

슬라이드 결과값

※ 우선 반응형 2번째 페이지 (max-width:960px)에서 생기는 슬라이드 구조를 만들어보려고 한다.

- 햄버거 버튼(화면 상단 맨 왼쪽: 햄버거처럼 생겼다 하여 불린다..)을 누르면 원래 페이지가 오른쪽으로 이동하면서 왼쪽에서 숨겨놓은 페이지가 같이 딸려오면서 화면의 원래 페이지에 햄버거버튼도 오른쪽으로 페이가 이동함에 따라 화면에선 같이 움직이는 것처럼 보이도록 만들어줄 것이다. 그리고 원래 페이즈에 보이는 부분은 불투명하게 표현해 줄 것이다.

- 슬라이드 된 페이지를 보면 x 버튼이 보일 것인데 이 버튼을 누를 시 원래 페이지로 돌아가도록 할 것이다.

 

@html 구조

1. 우선 wrap이라는 박스 (전체적인 페이지를 감싸고 있는 부분) 위에다 input(checked) 박스를 만들어줄 것이고 이 1개 input 요소를 가지고 2개의 label을 연결해 줄 것이다.

- checkbox 사용 시 1개의 input으로 2개의 label을 연결해 페이지 열 때 (첫 번째 버튼) , 페이지 닫을 때 (두 번째 버튼)을 연결해 줄 수 있다.

- radio 버튼 사용 시에는 2개의 input으로 2개의 label을 연결해 위 와 같이 연결해 줄 수 있는데 기능적인 부분에서 약간의 애매모호하다 ,, 

그래서 위와 같은 상황(2개 라벨에 (동일페이지 열기, 닫기)를 적용할 경우 checkbox를 사용하는 게 좋다.

(둘 다 해보니 결론적으로 checkvbox 가 훨씬 편했습니다)

 

2.  h_bottom_box라는 박스 안에 white 박스와 (본래 페이지 옆에 붙어서 이동해 줄 때 나타날 페이지) 그 안에 label (1번째 btx_x_box 클래스--> x 버튼을 뜻한다) 만들어줄 것이다.

 

3. white 박스 바로 아래다가 다른 하나의 label (2번째 ham_box2 클래스 --> 햄버거 버튼을 뜻한다) 만들어줄 것이다.

 

@css 구조

1. h_bottom_box를 max-width:1705px ( 최대 늘어날 수 있는 가로길이를 뜻한다 -> header2에 width:100%가 잡혀있는 중이다) , height:82px , margin :auto(해당 박스에 가운데 정렬) , position:relative(white 박스의 기준점) 이렇게 설정해 맨 위에 헤더 부분의 영역을 잡아줍니다.

 

2. h_bottom_box 박스 안에다 white 박스, ham_box2 박스를 를 만든다 

1) white 박스는 (왼쪽에 숨길 박스를 말한다) width:180% (부모가 대비로 넓이 설정, 반응형 구조라 부모가 960px에 꽉 차게 잡고 있다(그니까 화면에 100%를 먹고 있는 상태로 보면 된다.)

height:100vh (화면대비 세로넓이를 뜻하고: 그야말로 화면을 늘려도 그만큼의 세로 사이즈를 다 먹을 것이다.) 

background- color :rgba(0,0,0,0.0) (평소에는 이 배경색을 안 보여주게 할 것이다, check 될 시 해당 영역을 검은색 불투명하게 만들어줄 것이다.)

position:absolute를 설정해서 left:-80% top:0 ( 이 박스의 부모 박스는 h_bottom_box이고, 여기에 left: 0 붙인상태서 왼쪽으로 -80% 이동하면 white 박스의 80% 영역은 안 보일 것이고 나머지 100%가 wrap 박스에 위에 위치하게 될 것이다.

display:none (평소에는 안 보이게 해 줄 것이다.)

 

2) white_box  박스는 white 안에 위치할 하얀색 배경의 박스를 뜻한다.

-width: 80vw (전체화면에서 80% 넓이만큼 적용되게 설정해 준다.--> 나머지 20% 부분은( white 박스에 배경색을 불투명하게 했을 시) h_bottom_box 박스가 화면에서 같이 보일게 적용해 줄 것이다.

-height: 100vh ( 세로 화면대비 100% 센트 먹게 해 줄 것이다 부모의 박스인 white 가 벌써 100vh를 먹고 있으니  그냥 여기엔 100% 라고 설정해도 100vh와 같은 효과로 적용될 것이다.) 

- position: relative ( btx_x_box라는 label 태그의 기준점)

 

3) white_box  안에 x버튼을 만들어줄 것이다

- btx_x_box라는

 

4) ham_box2 박스를 만들어줄 것이다.

- 햄버거 버튼 이될 것이다 

- label이라는 태그에 만들 것이고 white: 60px height: 100% (세로는 부모세로크기 h_bottom_box 만큼 먹을 것이다)

padding으로 안에 여백을 적용해 줄 것이다 

그리고 그 안에 ham2라고 width:100% height:5px 배경색:검은색, 인 작대기 박스들을 위치해 줄 것이고 위아래 크기에 맞춰 정렬해 label 버튼을 만들어줄 것이고 , h_bottom_box  박스에 float :left를 하여( 상단 헤더바에 화면 왼쪽에 위치하게끔 해줄 것이다.)

 

3.checked 속성이용해 css를 적용.

 

1) ham2_btn이라는 input을 checked 할시 같은 레벨 중에서(~) wrap 박스를 자기 위치에서 오른쪽으로 80% 이동시킬 것이다.( 이렇게 하면 기존에 wrap 화면이 80% 만큼 오른쪽으로 이동하면서 왼쪽에 있던 white박스가 같이 딸려올 것이다.

#ham2_btn:checked ~ .wrap {

    transform: translate(80%,0);

2) ham2_btn이라는 input을 checked 할시 같은 레벨 중에서(~) wrap 박스 안에 자식요소인. header2의 자식요소인. h_bottom_box 안에. white 박스를 display:block , 배경색은 rgba(0.0.0.0.5) 적용

(위에 1)과 같이 80% 이동시 display:block으로 해당 white 박스가 보일 것이고  white_box는 화면에 80vw에 위치할 것이고 나머지 20vw에  h_bottom_box  (햄버거버튼이 보이는 부분) 박스가 보일 것이고, 이 부분에 white 박스의 배경색을 

rgba(0.0.0.0.5)와 같이 불투명하게 표현하여 h_bottom_box  박스가 희미하게 보이게 해 줄 것이다.

#ham2_btn:checked ~ .wrap > .header .header2 > .h_bottom_box .white {

    display: block;

    background-color: rgba(0,0,0,0.5);

}