[Day 19] 반응형웹 & SVG

1. 반응형 웹

 

반응형웹을 만들기 위해선 기본적으로 

mata viewport를 설정해야 한다.

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

(vsc에서 자동적으로 완성되는 html 코드이지만 반응형웹을 위해 필수적이었다는 사실)

 

이후 미디어쿼리를 지정해야 하는데, 

 

미디어 쿼리는 특정 조건(단말기의 유형, 화면 해상도, 뷰포트 너비 등)에서

특정 스타일만 적용되도록 만들어주는 기능이다.

 

아래의 예시를 살펴보자

<div class="container">
        <div class="item">
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad consequuntur nemo nobis! Commodi doloribus iure fugiat odio corporis vel consequatur autem, hic accusantium optio, cum soluta vitae quasi sint. Quaerat!
        </div>
        <div class="item">
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad consequuntur nemo nobis! Commodi doloribus iure fugiat odio corporis vel consequatur autem, hic accusantium optio, cum soluta vitae quasi sint. Quaerat!
        </div>
        <div class="item">
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad consequuntur nemo nobis! Commodi doloribus iure fugiat odio corporis vel consequatur autem, hic accusantium optio, cum soluta vitae quasi sint. Quaerat!
        </div>
        <div class="item">
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad consequuntur nemo nobis! Commodi doloribus iure fugiat odio corporis vel consequatur autem, hic accusantium optio, cum soluta vitae quasi sint. Quaerat!
        </div>
        <div class="item">
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad consequuntur nemo nobis! Commodi doloribus iure fugiat odio corporis vel consequatur autem, hic accusantium optio, cum soluta vitae quasi sint. Quaerat!
        </div>
        <div class="item">
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad consequuntur nemo nobis! Commodi doloribus iure fugiat odio corporis vel consequatur autem, hic accusantium optio, cum soluta vitae quasi sint. Quaerat!
        </div>
    </div>

        body {
            background-color: tomato;
        }

        .container {
            display: flex;
            flex-wrap: wrap;
        }
        
        .item {
            width: 33.33%;
            padding: 1rem;
            border: solid 5px black;
            box-sizing: border-box;
            background-color: sienna;
        }

        @media screen and (max-width:1000px) {
            body {
                background-color: green;
            }

            .item {
                width: 50%;
            }
        }

        @media screen and (max-width:600px) {
            body {
                background-color: violet;
            }
            .item {
                width: 100%;
            }
        }

 

일반적인 크기에선 아래와 같은 화면이 나타날 것이지만

flex wrap:  wrap 으로 설정한 후 item 각각의 너비가 33.33%이므로 한 줄에 세 개씩 올 수 있도록 하였다.

그런데 여기서 스크린 너비를 1000px 이하로 줄이면 아래와 같이 바뀐다.

item의 너비가 50%로로 설정되어 한 줄당 2개씩 3줄로 재설정된다.

 

이런 식으로 반응형을 위해 미디어쿼리가 쓰이는데,

이런 식으로 반응형 웹사이트를 위한 프레임워크의 대표적인 예시가 바로 부트스트랩이다.

• xs (for phones - 768px 이하 )
• sm (for tablets - 768px 이상)
• md (for small laptops -992px 이상)
• lg (for laptops and desktops - 1200px 이상)

예를 들어 태그 안에

col-sm-n 이라는 클래스를 넣어주면, 

화면의 크기가 sm 이상일 경우 column이 row의 n칸을 차지하고,

그보다 작을 때는 column의 가로 사이즈가 화면 전체가 된다.

 

 

아래 예시를 통해 살펴보자.

 

   <style>
        .item {
            box-sizing: border-box;
            border: 1px solid black;
        }
    </style>
   <div class="container">
        <div class="row">
            <div class="item col-lg-4 col-md-6 col-sm-12">
                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad consequuntur nemo nobis! Commodi doloribus iure fugiat odio corporis vel consequatur autem, hic accusantium optio, cum soluta vitae quasi sint. Quaerat!
            </div>
            <div class="item col-lg-4 col-md-6 col-sm-12">
                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad consequuntur nemo nobis! Commodi doloribus iure fugiat odio corporis vel consequatur autem, hic accusantium optio, cum soluta vitae quasi sint. Quaerat!
            </div>
            <div class="item col-lg-4 col-md-6 col-sm-12">
                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad consequuntur nemo nobis! Commodi doloribus iure fugiat odio corporis vel consequatur autem, hic accusantium optio, cum soluta vitae quasi sint. Quaerat!
            </div>
            <div class="item col-lg-4 col-md-6 col-sm-12">
                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad consequuntur nemo nobis! Commodi doloribus iure fugiat odio corporis vel consequatur autem, hic accusantium optio, cum soluta vitae quasi sint. Quaerat!
            </div>
            <div class="item col-lg-4 col-md-6 col-sm-12">
                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad consequuntur nemo nobis! Commodi doloribus iure fugiat odio corporis vel consequatur autem, hic accusantium optio, cum soluta vitae quasi sint. Quaerat!
            </div>
            <div class="item col-lg-4 col-md-6 col-sm-12">
                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad consequuntur nemo nobis! Commodi doloribus iure fugiat odio corporis vel consequatur autem, hic accusantium optio, cum soluta vitae quasi sint. Quaerat!
            </div>
        </div>
    </div>
</body>

페이지를 열면 이런 결과가 나타나게 되는데, 

이 상태에서 개발자도구를 열면, 

 

 

너비가 992px을 넘기 때문에 자동적으로 저렇게 미디어쿼리가 적용된 것을 볼 수 있다.

(나머지 조건들은 충족이 안되므로 밑줄이 그어져 있다.)

 

이경우 col-lg-4 클래스가 적용된 것이다.

따라서 한 아이템 당 row의 4칸을 차지하는 모습을 볼 수 있다.

 

(부트스트랩에 대한 자세한 내용은 다음주에 다룰 예정 기대기대😊)

 

---

2. SVG

 

 

확장 가능한 벡터 그래픽(scalable vector graphics)으로 XML 기반의 2차원 그래픽이다.

HTML 태그의 집합으로 이루어져 있어 css와 javascript로 컨트롤이 가능하다.

장점

아무리 확대를 해도 이미지가 깨지지 않고, 이미지의 크기를 키워도 용량이 늘어나지 않는다.

단점

코드로 이루어진 이미지이기 때문에 복잡한 이미지일수록 파일 사이즈가 커져서 단순한 이미지일수록 효율이 좋다.

그래서 주로 단순한 아이콘, 로고, 도형 등을 구현할 때 많이 사용한다.

 

HTML에 SVG를 적용할 수 있는 방법엔 크게 4가지가 있는데,

1,2번은 svg을 삽입만 한 형태라 수정이 어렵지만,

3,4번 방법은 수정이 가능하다.

 

1. img 태그로 사용하기: img 태그 안 src에 파일경로를 넣는다.

2. css파일에서 background로 사용하기: background-image 속성에 파일경로를 넣는다.

3. inline으로 html 코드 내에 사용하기

4. object 태그로 사용하기

 

예제로 아래의 개구리 svg 파일을 수정하여 html에 넣어보자.

깨굴

 

3. 인라인으로 수정하기

 

svg 파일 코드를 html에 복사하고 

코드에 클래스나 아이디를 부여해서 style로 꾸밀 수 있다.

수정 후 svg

 

4. object 태그로 수정하기

 

한마디로 object 태그로 svg를 링크로 연결하는 거라고 생각하면 편하다. 

<object data="./image.svg" type="image/svg+xml"></object>

이런 식으로 html에서 적어준 후 수정은 svg파일에서 따로 해주는 것이다.

3번 방법처럼 파란눈으로 바꾸기 위해서 svg파일에서 검정 색상을 파란색으로 컬러만 바꾸면 끗!

 

 

깨달은 점

 

- 요새는 mobile-first인만큼 반응형을 고려해서 레이아웃을 짜야 한다.. 늘 데스크탑 기준으로 코딩을 해왔던 나한텐 새로운 챌린지지만 계속 연습해서 언젠간 반응형 슉슉슉 만들 수 있길!

 

- svg 를 이용해서 amchart 사이트에서 지도를 불러올 수 있다! 라이브 코로나에서 봤던 그게 이거였다니...신기방기... 나중에 웹페이지 만들 때 다시 한 번 써먹어봐야겠다.

 

- perspective 도 배웠지만.. 사실 소실점에서 우주로 날라갔다.. 일단 지금 당장은 keep 해두고 (밴딩머신 재수정과 반응형 과제, js까지 할일이 많으므로 ㅠ) 나중에 쓸일이 생길 때 다시 천천히 보고 응용해봐야 겠다.