CSS코딩 - 생활코딩 12 ~13강

주제 : CSS

 

교재 : 생활코딩

 

12강 미디어 쿼리 소개

 

1.반응형 디자인

화면의 크기에 따라서 웹페이지의 각 요소들이 반응해서 움직이는 디자인!

미디어 쿼리 코드 @media(~)를 사용해서 효과를 적용할 수 있다.

위 사진의 예시처럼 

@media(min-width:800px) {

   div {

     display:none;}

}

과 같이 설정하면, 화면 가로길이가 800보다  크면, 화면에서 사라지는 효과가 적용된다!

웹페이지 검사도구창을 통해 효과가 제대로 적용되는지 확인해보자!

*검사도구창 들어가기 : 내가 만든페이지->오른쪽버튼클릭 후 검사 클릭->화면크기를 늘렸다 줄일때 화면크기가 픽셀단위로 나옴

800전에는 div태그가 표시되지만

800이 되는순간 div태그가 사라진다!

 

이처럼 화면가로크기가 최소 800픽셀부터는 div태그에 효과가 적용되고 @media(min-width:800px)

반대로 화면가로크기가 최대 800픽셀까지는 div태그에 효과가 적용되게 할 수도 있다 @media(max-width:800px)

 

이처럼 어떤 조건에서만 css의 내용이 동작되도록 설정하는 것이 미디어쿼리이다!

미디어쿼리를 활용해서 스마트폰 - 태블릿pc - 노트북 등 다양한 매체에 적합하게 화면을 구성할 수 있다!

 

13강 미디어 쿼리를 이용해서 반응형 디자인 구현하기

 

1.800픽셀을 기준으로 반응형 디자인을 구현해보자!

 

1)@media(max-width:800px){#grid{display: block;}}로 설정하면 가로 너비가 800픽셀 미만일 때 ol과 div태그가 줄바꿈 된다.

*display 속성 

display:inline - 기본값, 줄바꿈 안됨

display:block - block요소처럼 표시,  줄바꿈 됨

display:none - 박스 생성 안됨

 

2)그리드에 이어서 미디어 쿼리 안에 ol{border-right:none;} 넣어주면 가로 너비가 800픽셀 미만일 때 ol태그의 구분선도 사라짐 

 

3)이어서 h1{border-bottom:none;}도 넣어주면 h1태그의 언더라인을 없앨 수 있다.

미디어쿼리 코드를 사용해서 조건을 걸어주고 효과를 요렇게 붙여주면

 

선들이..

사라진다!

느낀점

-강의를 들으며 반응형 웹페이지에 대한 경험을 떠올려봤다. 가장 크게 느낀건 아마 스마트폰을 이용할 때가 아닐까 싶다. 나는 스마트폰이 나오고 몇년이 지나 사용하게 되었는데, 그 때까지만 해도 pc화면의 크기에 최적화된 디자인이 많아 스마트폰으로 보기에는 작은 화면안에 오밀조밀 표현되는 콘텐츠들을 다 확인하기 어려웠다. 지금은? 스마트폰을 넘어 패드를 쓰는 사람도 점점 많아지고 있으니 다양한 웹페이지 디자인이 필수적인 것 같다. 강의를 들으며 그런 부분에 대해 한 번 더 생각하게 된 것이 흥미로운 부분이었다!

-웹페이지검사 도구창을 계속 쓰시는 이고잉샘.. 디테일적인 요소 수정을 위해 정확한 위치를 확인할 때 꼭 필요한 듯 하다!