CSS Responsive
반응형 웹 디자인(Responsive Web Design)
하나의 웹 사이트에서 PC, 스마트폰, 태블릿 PC등 접속하는 장치의 디스플레이에 따라서 화면의 크기가 자동으로 변하도록 만든 웹페이지 접근 기법
반응형 웹 디자인은 웹 페이지가 다양한 크기의 디스플레이 즉, 다양한 기기에 대응(호환)할 수 있도록 웹 페이지가 출력되는 사이즈에 따라서 사용자에게 보여지는 웹 페이지의 레이아웃과 같은 디자인적 요소를 자동으로 변경하는 형태의 웹 페이지 제작기법을 말합니다.
지금처럼 스마트폰이나 태블릿같은 모바일 기기들이 없던 시절에는 사용자들이 웹 페이지에 접근하는 방식이 모두 일반 데스크톱이나 랩톱(노트북) 밖에 없었기 때문에 지금처럼 다양한 기기에 호환될 수 있도록 웹 페이지를 제작하는 것에 대한 고민을 그렇게 많이 할 필요가 없었습니다. 물론 사용자가 사용하는 모니터의 크기나 비율이 다를 수 있지만 일반적으로 PC나 모니터에 들어가는 모니터들은 그 비율이 대표적인 값들로 정형화 되어 있기 때문에 정형화된 기준으로 웹 페이지를 최적화 해서 제작한다면 하드웨어적 차이에 의한 호환성 문제를 크게 고민할 필요는 없었습니다.
하지만 스마트폰이 시장에 등장하고 보급화 되면서 다양한 종류의 스마트폰들이 시장에 쏟아져나오기 시작했고, 오히려 PC보다도 스마트폰을 하루 중에 더 많이 사용하는 시대가 오면서 더 이상 많은 웹 페이지들은 모바일기기 사용자의 비중을 무시할 수 없게 되었습니다. 이러한 이슈에 대응하기 위해서 처음부터 반응형 웹 이라는 개념이 나온 것은 아닙니다.
초기에 나왔던 방식은 적응형 웹(Adaptive Web)이라는 개념입니다. 이를 현재도 사용하고 있는 웹 사이트들도 다수 있습니다. 대표적으로 우리나라에서 가장 많이 사용하는 포털사이트인 "네이버(Naver)"의 경우 현재에도 이 적응형 웹 방식으로 서비스를 제공하고 있습니다. 적응형 웹은 반응형 웹과 상반되는 개념으로서 모바일 기기를 위한 페이지를 별도로 만듭니다.
네이버를 예시로 페이지를 살펴보도록 하겠습니다.
위의 이미지에서 왼쪽은 데스크탑으로 네이버에 접속한 모습, 오른쪽은 스마트폰을 이용해서 네이버에 접속한 모습입니다. 쉽게 인지할 수 있듯이 서로 디자인이 많이 다른 것을 확인할 수 있습니다. 그런데 주목할 점은 두 페이지의 주소가 다르다는 점 입니다. 즉, 하나의 페이지가 아닌 데스크탑용과 모바일용 페이지 2개를 운영하는 것 입니다.
반대로 반응형 웹의 경우에는 아래와 같이 하나의 웹 페이지에서 디스플레이의 크기에 따라서 적절히 대응할 수 있도록 웹 페이지의 디자인을 변경해 줍니다. 반응형 웹 페이지를 웹 브라우져로 열어서 브라우져의 크기를 다양하게 조절해본다면 아래와 같은 반응형 웹의 동작을 직접 눈으로 확인할 수 있을 것 입니다.
물론 적응형 웹이 가지는 장점들도 분명히 있습니다. 하지만 2개의 페이지를 따로 운영해야하고 어떠한 수정사항이나 업데이트 후 배포를 진행하려는 경우 하나의 페이지가 아닌 2개의 페이지에 대해서 작업이 이루어져야 한다는 부담이 있습니다. 즉, 비용적인 측면에서 더 많은 부담이 발생하게 됩니다. 그렇기 때문에 반응형 웹이 가지는 아래의 장점들은 반응형웹의 가치를 더 높여주게 됩니다.
1. 웹 사이트를 PC용, 모바일용 으로 구분해서 만들필요 없이 하나의 사이트만을 제작하고 다양한 기기에 대응할 수 있음
2. PC용 URL과 모바일용 URL이 모두 동일해서 검색포털 등 광고를 통한 사용자의 접속을 효율적으로 관리할 수 있음
3. 웹 페이지의 내용을 수정하는 경우 하나의 페이지만을 수정하면 다양한 장치에 동일하게 반영
최근에는 적응형 웹보다 반응형 웹을 선호하는 분위기 이며, 그만큼 많은 곳에서 활용되고 있는 기술입니다. 게다가 반응형웹은 javascript가 아니라 오직 html과 css 만을 이용해서 구현할 수 있기 때문에 구현에 대한 부담도도 낮은 편이라고 할 수 있습니다.
뷰포트(View Port)
웹페이지에서 사용자가 볼 수 있는 영역
반응형 웹에 대한 공부를 하기 위해서는 뷰포트(View Port)라는 개념에 대해서 알아야할 필요성이 있습니다. 위의 정의처럼 뷰포트(View Port)는 사람이 볼 수 웹 페이지에서 사용하자가 볼 수 있는 영역을 의미합니다. 즉, 뷰포트는 사용자가 사용하는 장치가 가진 디스플레이의 크기에 따라서 달라지게 됩니다. 예를 들어서 데스크톱의 뷰포트가 스마트폰의 뷰포트보다 크다고 이해하시면 됩니다.
초기에는 웹 페이지들이 모두 데스크탑을 기준으로 제작되었고, 또한 사람들이 거의 데스크탑만을 이용했었기 때문에 별 문제가 되지 않았지만 이전과 달리 작은 크기의 디스플레이를 가진 모바일 기기들이 많이 사용되기 시작하면서 이에 대응해야할 필요성이 생기게 되었습니다. 그래서 초기에 고안된 방식은 단지 웹페이지를 사용자 기기의 뷰포트에 억지로 맞춰서 웹페이지를 출력하는 것이었는 데 이는 사용자에게 그다지 좋은 경험을 주지 못했습니다.
www.youtube.com/watch?v=DIKbwNJpP9I
실제로 스티브잡스가 아이폰에 대한 프리젠테이션 영상에서 인터넷을 사용하는 장면을 보면 지금과 달리 모바일 전용 페이지가 아닌 데스크탑용 웹 페이지를 단순히 축소해서 나타는 것을 확인할 수 있습니다. (18분 30초 구간) 물론 이 때 당시 아이폰은 멀티터치, 더블탭 터치라는 기술을 이용해서 사용자가 이러한 웹 페이지에 조금 더 효율적으로 접근할 수 있도록 도왔지만 이것이 문제를 획기적으로 개선하지는 못했습니다.
뷰포트(View Port)를 설정하는 방법
그렇다면 웹 페이지의 뷰포트는 어떻게 설정할 수 있을까요? 생각보다 간단합니다. HTML5에서는 <meta>태그를 이용하여 해당 웹 페이지에 대한 뷰포트 값을 제어할 수 있습니다. 뷰포트를 제어하기 위해서는 다음 <meta> 요소를 모든 웹페이지에 포함해야 합니다.
<meta name="viewport" content="width=device-width, initial-scale=1.0"><meta> 태그는 웹 브라우져에게 로드하는 웹페이지의 크기를 어떻게 제어할 것인지에 대한 관련된 지침을 제공하는 역할을 합니다.
위의 <meta> 태그의 속성과 그 속성값들이 가지는 의미는 다음과 같습니다.
| width=device-width | 사용자 장치의 화면 너비에 따라서 페이지의 너비를 설정함 |
| initial-scale=1.0 | 페이지가 처음 웹 브라우져에 의해 로드될 때, 로드된 초기 확대 수준을 설정함 |
뷰포트의 내용크기
웹 페이지를 제작할 때 사용자에게 최상의 경험을 제공하기 위해서 권장되는 몇가지 규칙들이 있습니다. 지금 당장은 필요하지 않을 수도 있지만 알아두면 나중에 도움이 되는 정보이니 정리해보도록 하겠습니다.
컴퓨터, 모바일 기기를 모두 생각해보았을 때 우리가 웹 페이지를 사용하면서 가로로 스크롤 하는 경우는 거의 없습니다. 거의 세로로 스크롤하여 웹 페이지를 사용하게 되는 데 즉, 웹 페이지 상에서 가로로 스크롤 하는 경우가 생길 경우 사용자가 불편함을 느낄 것 임을 의미합니다.
그래서 사용자환경의 편의성을 최대화하고 이를 유지하기 위해서 다음의 규칙들이 보편적으로 권장되고 있습니다.
1. 페이지의 너비보다 큰 너비를 가지는 고정요소를 사용하지 말 것
-> 이미지가 웹페이지의 너비보다 큰 너비를 가진다면 이는 사용자가 모든 이미지를 보기 위해 가로 방향으로 스크롤을 해야한다는 의미이므로 바람직하지 않습니다. 그렇기 때문에 이미지 뿐만 아니라 다양한 요소들이 뷰포트의 너비를 넘어가지 않도록 신경써야 합니다.
2. 특정 뷰포트의 크기에만 의존해서 페이지를 제작하지 말 것
-> 앞서 본 것처럼 다양한 종류의 장치들이 있기 때문에 뷰포트도 정말 다양한 크기를 가지게 됩니다. 그렇기 때문에 웹 페이지를 제작할 때 다양한 뷰포트를 가질 수 있다는 점을 염두해두고 페이지를 제작하는 것이 바람직 합니다.
3. 요소의 너비를 설정할 때 절대적인 값보다는 상대적인 요소를 활용하여 속성값을 할당할 것(ex. width:100%)
-> 요소의 너비를 절대적인 값으로 할당하게 될 경우 뷰포트에 따라서 요소의 크기가 맞지 않게 되는 상황이 발생할 가능성이 매우 높습니다. 그렇기 때문에 요소의 너비를 지정할 때에는 절대적인 너비가 아닌 상대적인 너비를 할당하는 것이 중요 합니다.
그리드뷰(Grid-View)
많의 웹페이지들은 그리드뷰를 기반으로 디자인 됩니다.
즉, 위의 그림 같이 웹페이지가 열(column)로 나뉘게 됨을 의미합니다. 위와 같이 실제로 웹페이지 상에 구분선이 나타나지는 않지만 웹 페이지를 디자인할 때 존재하는 가상의 구분선들을 유용하게 활용할 수 있습니다. 즉, 그리드뷰를 사용하면 웹페이지에 다양한 요소들을 쉽게 배치할 수 있어서 웹 페이지 디자인에 매우 유용 합니다.
반응형 그리드뷰에는 보통 12개의 열이 있고, 총 너비가 100%이며, 브라우져 창의 크기를 조정하면 그 크기가 축소 또는 확장 됩니다.
반응형 그리드뷰(Responsive Grid-View) 작성
그렇다면 이번에는 반응형으로 그리드뷰를 작성하는 방법에 대해서 알아보도록 하겠습니다. 반응형 그리드뷰를 작성할 때에는 모든 html 요소에 box-sizing 속성이 border-box로 설정되었는 지 이를 확인 해야할 필요성이 있습니다. 여기서 box-sizing에 border-box 속성값을 할당 함으로서 얻는 효과가 무엇인지에 대해서 설명하자면, 일반적으로 우리가 어떤 html 요소에 padding과 margin을 사용하여 여백을 할당하는 경우 padding, margin 값은 우리가 설정한 요소의 너비에 포함되지 않게 됩니다. 즉, 우리가 설정한 요소의 크기를 넘어서는 공간을 차지할 수 있음을 뜻합니다. 이렇게 되면 각 요소간의 배치가 굉장히 불편해지게 되는 데 이러한 문제를 border-box 속성값을 통해서 해결할 수 있습니다.
box-sizing 속성에 border-box 속성을 할당하게 되면 html 요소에 지정하는 padding, margin 값이 모두 사용자가 지정한 width, height 안에 포함되기 때문에 html 요소의 너비, 높이가 초과하여 공간을 차지하는 일이 없게 됩니다.
CSS에 다음 코드를 추가하면 됩니다.
* {
box-sizing: border-box;
}
실제로 다음과 같이 웹페이지의 그리드를 구성하고자 한다면 다음과 같이 코드를 작성하면 됩니다.
.menu {
width: 25%;
float: left;
padding: 15px;
border: 1px solid red;
}
.main {
width: 75%;
float: left;
padding: 15px;
border: 1px solid red;
}
하지만 보다 체계적으로, 강력하게 웹페이지를 제어하기 위해서는 다음과 같이 열이 총 12개인 그리드 뷰를 사용하는 것이 바람직 합니다.
왜냐하면, 좀더 세부적으로 그리드를 구성해 놓는 것이 작은 단위로 그리드를 관리할 수 있기 때문에 디자인에 있어서 더 유리하고 보다 섬세한 디자인이 가능해 집니다.(요소들을 배치할 수 있는 선택지가 많아지기 때문)
그래서 웹 페이지를 총 12개의 그리드로 나누기 위해서 다음과 같은 코드를 작성해서 사용할 수 있습니다.
(col-1 ~ col-12 까지 12개의 그리)
[class*="col-"] {
float: left;
padding: 15px;
border: 1px solid red;
}
.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}다음은 100%를 12로 나눈 값이 8.33%라는 개념에서 고안된 것 입니다. 이를 html 상에서 활용하기 위해서는 다음과 같이 활용하면 된다.
<div class="row">
<div class="col-3">...</div> <!-- 25% -->
<div class="col-9">...</div> <!-- 75% -->
</div>각 html 요소들을 그리드를 이용해서 적절하게 배치하기 위해서는 html 코드 상에서 각 요소들을 <div> 태그로 감싸주는 것이 필요합니다.
단, 위와 같이만 코드를 작성하게 될 경우 모든 열들의 요소들이 왼쪽으로 몰려서 배치되기 때문에 요소들 간의 흐름을 정리해주는 코드가 필요 합니다. 아래의 코드를 추가함으로서 각 요소들의 흐름을 적절히 정리할 수 있게 됩니다.
.row::after {
content: "";
clear: both;
display: table;
}(각 코드들이 가지는 상세한 의미는 추후에 다시 다루는 것으로 하겠습니다.)
미디어 쿼리(Media Query)
미디어 쿼리(Media Query)는 CSS3에 도입된 CSS 기술로서 @media의 특정조건이 참인 경우에만 규칙을 적용하여 CSS 속성블록을 포함시키도록 할 수 있는 기술 입니다. 반응형 웹페이지를 만들때 유용하게 사용할 수 있는 구문이기 때문에 반드시 알고 넘어가야하는 중요한 개념이라고 할 수 있습니다.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
body {
background-color: tomato;
}
@media only screen and (max-width: 600px) {
body {
background-color: gold;
}
}
</style>
</head>
<body>
<h1>페이지의 가로너비가 600px 이하인 경우 배경색상이 tomato가 됨</h1>
</body>
</html>위와 같이 코드를 작성한 경우 웹 페이지의 너비 즉, width 값이 600px을 넘어가는 경우 해당 블록 안에 있는 css 구문이 적용됩니다. 그래서 해당 코드로 작성된 웹 페이지의 가로 너비(width)가 600px 이하로 줄어들게 될 경우 페이지의 배경색상이 gold가 됩니다.
위의 코드에서 처럼 웹 페이지 너비의 특정 값 or 특정 높이 값을 가지고 미디어 쿼리를 이용해서 css 디자인이 적용되는 여부를 결정하는 경우 이 특정값 or 특정높이를 우리는 "Break Point"라고 합니다. (위의 예시의 경우에는 width 600px가 Break Point 가 됩니다.)이 Break Point는 하나의 웹 페이지에서 하나 만이 아니라 여러개의 break point를 설정할 수 있습니다. 그래서 단순히 데스크톱, 스마트폰만을 구분하는 것이 아니라 위에서 봤던 것처럼 데스크톱, 태블릿, 스마트폰과 같은 기준으로 나누어서 반응형 웹 페이지를 제작할 수 있게 됩니다. 그리고 기존의 예시 코드들을 통해서 알 수 있었듯이 Break Point는 min-width or max-width와 같은 속성들을 사용함으로서 수행할 수 있습니다.
그리고 다음과 같이 break point를 사용함으로서 페이지에 적용하는 그리드뷰를 다르게 적용할 수도 있습니다.
/* For mobile phones: */
[class*="col-"] {
width: 100%;
}
@media only screen and (min-width: 600px) {
/* For tablets: */
.col-s-1 {width: 8.33%;}
.col-s-2 {width: 16.66%;}
.col-s-3 {width: 25%;}
.col-s-4 {width: 33.33%;}
.col-s-5 {width: 41.66%;}
.col-s-6 {width: 50%;}
.col-s-7 {width: 58.33%;}
.col-s-8 {width: 66.66%;}
.col-s-9 {width: 75%;}
.col-s-10 {width: 83.33%;}
.col-s-11 {width: 91.66%;}
.col-s-12 {width: 100%;}
}
@media only screen and (min-width: 768px) {
/* For desktop: */
.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}
}그래서 실제로는 다음과 같이 다양한 미디어 쿼리를 통해서 다양한 Break Point를 설정함으로서 다양한 기기들에서 최상 환경으로 사용자에게 서비스를 제공할 수 있도록 설정 합니다.
/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px) {
.example {background: red;}
}
/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (min-width: 600px) {
.example {background: green;}
}
/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) {
.example {background: blue;}
}
/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (min-width: 992px) {
.example {background: orange;}
}
/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (min-width: 1200px) {
.example {background: pink;}
}
항상 모바일을 위한 설계를 먼저 하자
데스크탑, 모바일 모두 지원하는 웹 페이지를 개발하고 싶은 경우, 우선 데스크탑을 위한 설계보다는 모바일을 위한 설계를 먼저 할 것을 권장하고 있습니다. 그 이유는 모바일을 주로 먼저 설계할 경우 해당 페이지의 성능, 최적화와 같은 기준들이 데스크탑이나 탭톱 같은 다른 컴퓨터들에 비해서 성능이 낮은 모바일 프로세서 기준으로 맞춰져서 설계가 이루어지기 때문에 이렇게 되면 해당 웹 페이지는 개발이 완료되고 서비스를 시작하였을 때 좋은 성능을 보여줄 가능성이 높습니다.
또한 디자인에 대한 기본값을 정할 때에도 모바일을 기준으로 잡습니다. 이 것의 의미는 이전의 예시에서 본 것처럼 모바일 디자인을 적용하는 기준이 웹 페이지의 너비(width)가 400px 이하인 경우라고 가정해본다면 이것을 데스크톱 기준으로 설계한 후에 400px 이하로 웹 페이지의 너비가 작아진 경우 모바일용 디자인으로 바꾸는 것이 아니라 페이지의 너비가 400px 이상인 경우 데스크톱용 디자인을 적용할 수 있도록 설계할 것을 의미합니다.
이렇게 하는 이유는 모두 상대적으로 성능이 불리한 모바일 기기에서 최상의 성능을 보장하기 위함 입니다. 이러한 방식이 무조건 의무는 아니지만 권장되는 사항이니 반응형 웹페이지를 제작하실 때 참고하신다면 많은 도움이 될 것 입니다.
이미지(image)
이번에는 이미지에 몇가지 속성들을 사용함으로서 원하는 데로 이미지의 크기를 조절할 수 있는 방법에 대해서 살펴보겠습니다.
width 속성을 활용한 경우
width 속성을 활용해서 다음과 같이 코드를 작성한 경우 웹 페이지의 크기 변화에 따라서 이미지가 비율을 유지하면서 사이즈가 변화 하는 것을 확인할 수 있습니다. (width에 백분율, height에 auto를 사용하였음에 주목)
img {
width: 100%;
height: auto;
}단, 이렇게 코드를 작성할 경우 이미지가 원본크기보다 확대되는 경우가 발생할 수 있습니다. 이래서 이에 대한 대안으로 max-width 속성을 사용할 수 있습니다.
max-width 속성을 활용한 경우
max-width 속성을 활용하여 다음과 같이 코드를 작성하면 웹페이지의 크기가 줄어드는 경우 이미지도 따라서 같이 줄어들지만
웹페이지가 커지는 경우 이미지가 원본의 크기를 넘어서 확대되지 않게 됩니다. 즉, 이미지가 가질 수 있는 최대 너비(width) 값을 지정함으로서 이러한 문제를 해결하는 것이 가능 합니다.
img {
max-width: 100%;
height: auto;
}min-width 속성을 사용한 경우
그렇다면 min-width 속성은 무슨 의미를 가질까요? min-width 속성은 이미지가 가질 수 있는 너비(width)의 최소값을 지정함으로서 특정 크기 이하로 이미지가 작아지는 것을 방지할 수 있습니다. 아래의 코드는 min-width를 활용한 코드의 예시 입니다.
img {
min-width: 100%;
height: auto;
}배경이미지(Background Image)
html 요소의 배경이미지 또한 웹페이지의 사이즈 변화에 반응하도록 할 수 있는데 이를 위한 방법으로는 모두 3가지 방법이 있다.
1. background-size: contain;
다음과 같이 background-size 속성에 contain 속성값을 주게되면 변화하는 내용영역의 크기에 맞춰서 배경이미지가 변경된다.
단, 배경이미지의 크기가 변경될 때 배경이미지는 가로세로 비율을 유지한다.
div {
width: 100%;
height: 400px;
background-image: url('img_flowers.jpg');
background-repeat: no-repeat;
background-size: contain;
border: 1px solid red;
}
2. background-size: 100% 100%;
다음과 같이 background-size 속성에 100% 100% 속성값을 주게되면 배경이미지가 가로세로 비율을 고려하지 않고 전체내용 영역을
커버하도록 설정된다.
div {
width: 100%;
height: 400px;
background-image: url('img_flowers.jpg');
background-size: 100% 100%;
border: 1px solid red;
}
3. background-size: cover;
다음과 같이 background-size 속성에 cover 속성값을 주게되면 배경이미지가 가로세로 비율을 고려하면서 전체내용 영역을 커버하도록 설정된다. 단, 가로세로 비율을 유지하기 때문에 이미지의 일부가 잘릴 수도 있다.
div {
width: 100%;
height: 400px;
background-image: url('img_flowers.jpg');
background-size: cover;
border: 1px solid red;
}비디오(Video)
비디오도 이미지와 유사한 방식으로 사이즈를 조절할 수 있다.
width 속성을 사용한 경우
width 속성을 사용하여 다음과 같이 코드를 작성한 경우 웹 페이지의 크기 변화에 따라서 비디오가 가로세로 비율을 유지하면서
크기를 변화시킨다. 단, 웹 페이지의 크기가 커져서 비디오의 크기가 확대될 때 원본의 크기보다 크게 확대될 수 있다.
video {
width: 100%;
height: auto;
}
max-width 속성을 사용한 경우
max-width 속성을 사용하여 다음과 같이 코드를 작성한 경우 웹 페이지의 크기 변화에 따라서 비디오가 가로세로 비율을 유지하면서 크기를 변화시킨다. 단, 웹 페이지의 크기가 켜져서 비디오의 크기가 확대되더라도 원본의 크기를 넘어서 확대되지 않는다.
video {
max-width: 100%;
height: auto;
}
min-width 속성을 사용한 경우
이전에 이미지에서 봤던 것처럼 비디도에도 min-width 속성을 적용하여 사용할 수 있습니다. min-width 속성을 사용함으로서 비디오가 가질 수 있는 너비(width)의 최솟값을 지정할 수 있게 되고, 일정 수준 이하로 비디오의 크기가 작아지지 않도록 만들고 싶은 경우 유용하게 활용할 수 있습니다.
video {
min-width: 100%;
height: auto;
}'Web Basic > CSS' 카테고리의 다른 글
| Html Form에 CSS를 이용한 디자인 적용하기 (0) | 2020.09.14 |
|---|---|
| CSS 관련요약 - 2 (0) | 2020.07.23 |
| CSS 관련 요약 - 1 (0) | 2020.07.23 |