국비지원 26일차

요번 주는 반응형 웹 만드는 거 위주로 실습을 하는 주이다.

점점 어려워지기 시작한다...

특히 구조를 기본적인 구조뿐만 아니라 반응했을 시 즉 widht 값이 작아졌을 때 변하는 구조를 같이 생각하면서 해야 되므로 

더 머리가 아프고 중간에 기능이 하나 추가되면 구조도 이상하게 바뀌어져 있고.. 

기본구조만 생각하면서 하다가 변하는 구조까지 생각하면서 하려니 머리가 복잡해지는 것 같다....

오늘도 복습을 했는데도 머리에 안 들어오는 날인 것 같습니다.. 하루종일 구조 짜는데 머리 쓰니 끝나고 집에 올 때면 머리가 하얗게 되는 것 같다...

그래서 오늘은 그냥 복습 차원에서 개념을 정리하고자 합니다...

(끝나고 집 와서 1가지 반응형 웹만 주야장천 봤는데 혼자서 다시 해보려고 하니 다시 안 되는 게 반복이었다...)

오늘 할 일을 못한 게 너무 많다... 이 웹구조 때문에..

 

※ 개념 복습

1. 반응형 웹구조 할 때는  max-width를 주로 쓴다.

- min-width는 거의 안 쓰는데 쓴다 하면 순서 바꿔서  높은 값이 아래로 가야지 max 쓸 때처럼 사용가능하다.

( 대부분  max만 써서 구조 구분하는데 충분하다)

 

2. body에 background :gradient 줄 수 있고 (반복되는 거 없애려면 no-repeat으로 없애기 가능) 

- 색을 자연스레 반반 주려고 하면 % 를 이용해 사용한다 2개의 색을 적용한다 했을 시 둘 다 50% 쓰면 딱딱 떨어지는 값을 가져 색이 평평하게 적용되는데 2번째 색에만 50% 를 적용하면 자연스럽게 2 가지색을 이어서 적용가능하다.

 

3. hover 시 테두리 나올 때 이미지가 테두리 두께 때문에 크기가 변할 수 있다 (아래와 같은 방법으로 해결)

- border로 테두리 적용 시 : 원래 박스 css에 테두리 1px solid #fff (흰색 : 투명)을 적용하다가 hover 시 테두리색을 (검정)으로 적용하면 img에 별다른 영향을 없을 것이다.

- shadow-box에 테두리를 적용하면 별다른 css 없이 img의 크기도 영향을 안 받을 것이다.( 왜냐하면 box-shadow는 말 그대로 그림자에 테두리를 주는 거라 직접적으로 박스를 건드리지 않게 된다.

 

4. 반응형 구조 만들 때

부모에 높이값을 주는 것보단 자식들에게 높이를 주면서 세로 크기를 맞추면 좋고, 가로 사이즈도 나중에 반응형 생각하여 % 를 잘 생각하면서 짜는 것이 수월 한 것 같다.

- 반응형 할 때 건드릴 필요 없는 건 복사해서 붙여 넣지 않아도 되지만 바꿀 css 가있으면 원래 쓰던 css 내용들을 그대로 복사해서 값을 변경하거나 그 기존 css에서 추가해서 쓰는 걸 추천한다.

 

5. 배너 같은 거에 이미지 줄 때

-  img 태그 안에 a 태그 넣어서 사용하거나( img 태그랑 a태그 같이 사용할 시 둘 다 영역끝가지 먹어서 img태그를 position으로 띄워서 붙여주던가 해야 된다) , background로 부모 박스 안에 쓰고 그 안에 a태그 넣고 만들어준다.(a태그 글씨는 text-indent:-999px 이렇게 밖으로 보내준다 : text-indent는 블록레벨 태그만 가능하다, 그래서 a태그를 display:block으로 바꿔서 적용해줘야 한다.)

- 이제 누르면 이동하거나 반응하는 박스 줄 시 a태그를 기본적으로 걸어주는 게 좋다.

 

6. 가로 사이즈가 정해져 있지 않는 박스에 padding을 주고 boxsizing-borderbox를 적용 안 해도 터져 나오지 않는다 (왜냐면 가로 사이즈가 정해져 있지 않기 때문이다.

 

7. ul 은 기본적으로 padding과 margin이 40px 적용된 상태라 초기화시키려면 ( margin:0 , padding: 0, list-style : none(기본 도형을 없애준다) )을 적용해 준다 

 

8. 부모 박스에 float 돼있으면 반응형 다른 웹 만들 때 float 없애려면 float:none 이렇게 적용해 초기화해줘야 한다.

그래야지 박스가 지면에 자리 잡아서 밑에 박스들이 올라오지 않는다.

 

9. 화면 커지면 그림 가로 크기에 맞춰서 세로도 같이 커지는 방법

 1) 부모박스 :width100%, height 39vw( 개발자 도구에서 이미지에 맞게 찾아주고 적용해줘야 한다)

     자식박스 :width100%, height 100% , background로 img 불러오기

 2) 부모박스 :width100%, padding-bottom:39%( 이 이미지 크기 구하는 방법은 이미지의 크기에서 작은 크기 나누기 긴 크기 하면 대충 소수점으로 나오는데 여기에 100% 으 곱해서 % 값으로 구해서 사용할 수 있다.)

     자식박스(img태그사용) :width 100% 로 만 적용해 준다.