[잘난웹디] 한국소비자원 웹사이트 제작4강_section happy

 

 

 

1. ul > li > 로 텍스트와 이미지를 넣어준다,

 

▼ 1번 결과

 

 

 

2. main section과 동일하게 width 값은 1400px로 변경해준다.

 

 

 

 

3. 가운데로 오게끔 margin 값을 조정해주고 margin { 0 auto; } , 함께 행복한 소비생활 h2가 가운데로 올 수 있도록 text-align:center; 해준뒤, 아래의 ul과 여백을 주기 위해 h2에 margin-bottom:50px;준다.

 

 

▼ margin-bottom :50px 한 결과값

 

 

 

4. ul은 section happy의 width인 1400px에 꽉 찰 수 있도록 100%를 준다.

 

 

 

 

 

5. 보기 편하도록 li를 float : left로 정렬해준다.

정렬하고 나니 우리가 4번에서 적용한 ul이 날라간것을 볼 수 있다. (yellow bg가 날라간것으로 확인)

 

ul : 부모  /  li : 자식

 

 ☆중요☆

자식요소에 float를  주게 되면, 부모요소의 높이값이 상실 되기 때문에, 부모에게 overflow ; hidden을 주어야지 부모의 높이값을 유지 할 수 있다.  

 

 

 

 

 

6. 부모인 ul에 overflow : hidden 을 넣어주니 부모가 다시 높이값을 찾았다.

 

 

 

 

7. li에  width : 33% 를 주어 3개의 li를 정렬을 맞추고 li에 배경색을 두어 위치를 세밀하게 조정하도록한다.

 

 

8.  li 오른쪽으로 여백을 살짝 두기 위해 margin-right : 1.5% 를 하고 나니, 100%가 넘어버려서 마지막 li 하나가 아래로 내려가게 된다.

ㄴ> 이를 해결하기 위해 width : 33% > width : 31%로 수정한다.

 

 

▼ 수정 후 :  마지막 li가 100%에 들어오는것 (같은줄로 올라오는것)을 볼 수 있다.

ㄴ> 수정하고 나니 ul 전체에서 왼쪽 li의 여백과 오른쪽 li의 여백이 차이가 난다. 오른쪽 기존에 있던 여백에서 추가로

margin-right : 1.5% 가 동일하게 붙었기 때문이다.

 

이를 해결하기 위해 , 마지막 li 에는 margin-right 를 빼주도록 한다.

 

 

 

▼ 수정 후  :  육안상으로 확인은 어렵지만 결과적으로는 마지막 li에 margin-right는 빠져있다. 

 

 

 

 

 

9. 여백을 제거 한 뒤, li 아래로 완성본과 같게하기 위해 margin-bottom을 80정도 주고, 각각 li 마다 background 색상을 변경해 준다. 2번째 li와 3번째 li는  : nth-(n)을 이용해서 변경해준다.

ㄴ> 그런데 지금 보면 노란색이 ul의 배경색인데, 남는거 보면 li가 ul에 꽉 차지 않았다는 것이다. 그렇기 때문에

ul의 width 값과 margin-rigth 를 조정해준다.

- width : 31% > width : 32.1%

- margin-right :  1.5% > margin-right : 1.7%

 

 

 

▼ 수정 후  : 여백이 줄어든 것을 볼 수 있다.

 

 

 

 

10. 우리는 li안의 텍스트 요소들을 a태그로 감싸주었다. a태그 안에 있는 요소들의 여백을 조정하기 위해 padding으로 여백을 조정해본다.

padding : 50px  0   50px   30px ;               상    우    하     우

▼ padding 준 후

ㄴ> 문제 발생 ; 오른쪽 여백을 분명 0으로 주었는데 완전히 달라붙지 않았다. padding을 줌으로 인해서 전체적으로 틀어지게 된것이다. li의 width 값과 padding이 더해진 상태이다.

li { width : 32.1% } + li a{ padding 50px 0 50px 30px;} .....

그래서 넘치는 부분을 li안에 다 담길 수 있도록 box-sizing : border-box; 를 주어야 한다.

 

box-sizing은 박스의 크기를 화면에 표시하는 방식을 변경하는 속성이다. 

width와 height는 앨리먼트의 컨텐츠의 크기를 지정합니다. 따라서 테두리가 있는 경우에는 테두리의 두께로 인해서 원하는 크기를 찾기가 어렵습니다.

box-sizing 속성을 border-box로 지정하면 테두리를  포함한 크기를 지정할 수 잇기 때문에 예측하기 더 쉽습니다. 

 

 

ex) 지정한 사이즈보다 크게 벗어나는것 (생활코딩 영상강의를 참조했습니다.)

출처 : 생활코딩

출처 : 생활코딩

 

출처 ; 생활코딩

box-sizing: border-box를 주고 나니 두 div의 border 사이즈가 다름에도 불구하고 크기를 지정할때 border를 기준으로 지정할 수 있도록 모든 엘리먼트가 보더의 크기를 width 와 height 의 값으로 사용할 수 있게 해서 코딩을 좀더 수월하게 해주는 속성이라고 알고있으면 된다.

 

결론적으로 박스 크기를 결정할 때 저비와 높이 지정을 약간만 잘못돼도 박스의 너비는 균등하지않고, 컬럼이 무너져버리는 등 레이아웃의 균형이무너져버리게 되는데, 이럴때 앨리먼트의 너비와 요소를 균일하게 유지해주는 편리한 속성이라고 할 수 있다. 

 

따라서 콘텐츠 내용의 width , height, padding, border를 지정해야한다.  각각의 폭과 너비를 지정하면서 게산 실수로 예상치 못한 박스의 밸런스가 붕괴될때 box-sizing속성을 사용하면 유연한 대응이 가능한 박스크기를 지정할 수 있다.

 

더 자세한 내용은 box-sizing 게시글에서 작성하도록 하겠습니다.

<참고하기>

 

www.tabmode.com/homepage/box-sizing.html#gsc.tab=0

 

 

 

 

 여기 수정안된거니까 일단 넘기고 다시확인하기 !!!! 미친 왜안돼;; 

▼ 수정 후 어.........;; 코드는 수정햇는데 왜 화면이 수정이 안되냐,,, 재섭서..

 

 

 

 

 

11. 

ㄴ> p에 있는 img 에 float : right를 하고 나니 이미지들이 li 밖을 벗어났다. 

이를 해결하기 위해 p.img에 overflow : hidden ; 을 해준다.

 

▼ 수정 후 

 

 

 

12. 가상의 컨텐츠로 li안에있는 p태그 옆에 완성본과같이  선(ㅡ)을 만들어준다.

 

근데 나는 또 선이 안생김 모지..ㅋ..

일단 안중요하니까 패스하지만 코드는작성함..

2번째 li와 3번째 li에 p태그 길이가 다르기  때문에 각자 조정해준다.

 

css 적용해도 결과물 안나와서 사진은 패스;;

 

 

13. 완성본을 보면 img 에 마우스 hover했을 때 이미지가 부드럽게 확대되는것을 볼 수 있다.

transform : scale을 이용해 코드를작성한다.

ul li a : hover .img img { transform : scale (1.2); }

ul > li > a 에 마우스를 올렸을 때, class 가 img인 p태그 안에 img를 transform 해라 , 1.2배 사이즈를 확대해라.

 

1.2배 확대된것을 확인할 수 있음

ㄴ> scale1.2 적용하고 나니 마우스 hover 시에 너무 '띠용?' 하고 바로 커지는 느낌이 들기에

이를 조금더 자연스럽게 하기 위해 transition을 주겠음.. 

CSS transition은 css속성을 변경할 때 애니메이션 속도를 조절하는 방법을 제공한다. 즉 속성변경이 즉시 영향을 미치게 하는 대신 속성의 변화가 일정 기간에 걸쳐 일어날 수 있도록 설정할 수 있다.

 

 

▼ transition  추가 후 

 

 

ㄴ> 추가하고 나니 마우스를 올릴때는 1초동안 1.2배만큼 부드럽게 커지는것을 볼 수 있다.

하지만 마우스를 뗄 때에는 또다시 띠용? 하고 작아지는 느낌이 있다.

이를 조금더 자연스럽게 하기 위해 img자체에도 transition을 적용해준다,

 

 

▼ .happy ul li p.img img 에 transition 을 추가했다.

 

 

 

 

 

▼ 4강 완성본