도서 생활코딩 HTML+CSS+자바스크립트

반응형 웹이 있다. 화면은 항상 크기가 변한다. 같은 내용을 모니터로 볼 수도 있고 스마트폰으로 볼 수도 있다. 이 때 웹 페이지를 구성하는 요소들이 화면 크기에 맞춰 알아서 최적화되는 것을 반응형 웹이라고 한다고 한다(나도 공부하는 중이라 잘 모른다). 이런 반응형 웹을 위해서는 미디어쿼리라는 기술?방법? 아무튼 미디어쿼리가 필요하다. 오늘도 늘 그렇듯 '생활코딩! HTML+CSS+자바스크립트' 책의 에제를 따라가보자.

위의 코딩을 치니 화면에는 다음과 같이 표시된다.

원래 책에서는 한 줄 전체를 쓰도록 하였는데 display: inline;을 추가하여 자신의 부피만큼만 사용하도록 조절하였다. 특별할 것은 없다. Responsive에 아무 의미 없는 div 태그를 사용했고 거기에 내가 원하는 효과를 준 것이다. 이제 코드를 다음과 같이 수정해보자.
------------------------
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style>
          @media(min-width: 800px){
            div{
              display: inline;
              border: 10px solid green;
              font-size: 60px;
            }
        </style>
    </head>

    <body>
        <div>
            Responsive
        </div>
    </body>
</html>
------------------------
@media(min-widht: 800px)를 추가하였다. 이렇게 효과를 주면 나타나는 화면은 다음과 같다.

- 화면이 클 때는 변함이 없다.

- 화면이 작을 때는 변함이 있다.

잘 안보이겠지만 화면 왼쪽에 조그맣게 Responsive라고 적혀 있다. 즉 div에 대한 효과가 사라져서 <style>...</style> 스타일 안에 있는 효과는 모두 사라지고 <div> Responsive </div>만 남게 된 것이다. <style>안의 div가 효과가 사라지면 <body>...</body>안에 있는 div 또한 아무 효과가 없다. 결국 Responsive만 덩그러니 남아 표현되었다고 보면 된다.

이것이 내가 이해한 미디어 쿼리다. 여기서 하나만 더하자. 조금 헷갈리는 내용이다. @media(min-width: 800px)다. min-widht는 최소넓이가 800px이상이라는 의미다. 즉 이 경우 800px이상의 넓이일 때 즉, 이 조건을 갖추었을 때 div{display: inline... font-size: 60px}가 발생된다고 보면 된다. 그렇다면 반대의 경우는 max-widht: 800px일 것이다. 이 경우는 최대 800px까지 저 div가 발동된다고 보면 된다. 따라서 화면이 줄어들면 오히려 Responsive가 초록색 border에 둘러싸이게 되고 커지면 Responsive 글자만 나오게 된다. 끝.

참 div태그를 공부했던 내용은 아래에 있다.

2020/12/13 - [코딩] - 도서 생활코딩 HTML+CSS+자바스크립트 -

저작자표시

'코딩' 카테고리의 다른 글

도서 생활코딩 HTML+CSS+자바스크립트 - <div 태그> (2)	2020.12.13
도서 생활코딩 HTML+CSS+자바스크립트 - <border, padding, margin> (0)	2020.12.03
도서 생활코딩 HTML+CSS+자바스크립트 - <style 태그, style 속성> (0)	2020.12.02

THming's Days

도서 생활코딩 HTML+CSS+자바스크립트 - <미디어 쿼리>

'코딩' 카테고리의 다른 글

댓글

티스토리툴바

도서 생활코딩 HTML+CSS+자바스크립트 - <미디어 쿼리>

'코딩' 카테고리의 다른 글

관련글

댓글

티스토리툴바