- 폴더구조
코드
1.다음 코드가 어떤 의미인지 설명하세요.
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=2.0,user-scalable=yes">
viewport는 스마트 기기상에서 최초에 페이지를 로딩할때 확대정도, 최소,최대 확대비율등을 다루는 meta data에 속하는 속성으로 모바일 장치에서 최적화된 웹페이지를 만들기 위해 설정함.
[width=device-width]
기기의 너비에 맞춰 화면의 크기를 맞춤
ex)
[initial-scale=1.0]
뷰포트의 초기 화면의 크기값으로 1.0은 확대,축소 없는 본 크기 그대로값
초기값 : 1, 범위 : 1 ~ 10
'user-scalable' 값이 'no'로 설정되지 않는 한, 'minimum-scale','maximum-scale' 속성의 의해
축소/확대가 가능하다.
[minimum-scale=1.0, maximum-scale=2.0]
minimum-scale=1.0 으로 설정하면 비율의 최적화 화면으로 표시, 축소 작동은 하지 않음.
초기값 : 0.25, 범위 : 0 ~ 10
maximum-scale=2.0 으로 설정하면 최대 2배까지 확대가능
초기값 : 1.6, 범위 :0 ~ 10
[user-scalable=yes]
'user-scalable' 속성은 사용자가 스케일을 조절할 수 있는지 여부를 지정하는 값으로
'yes' or 'no' 값을 지정할 수 있으며, yes가 기본값이고, 이는 사용자가 스케일을 조정할 수 있도록 함.
'user-scalable' 속성은 되도록이면 yes를 유지하는게 좋다고 함.
예전에 'user-scalable' 속성을 아이폰에서 landscape 모드가 되면 폰트가 커지는 이슈로 'no'로 지정하는경우가 많았는데,
-webkit-text-size-adjust
속성을 사용하면 폰트 사이즈를 고정하는것이 가능함.
body { -webkit-text-size-adjust : none }
따라서 확대, 축소는 사용성에 크게 영향을 미칠 수 있기 때문에 되도록이면 막는것을 지양하는것이 좋다고 함.
8.아래 조건에 맞게 미디어쿼리문을 작성해야합니다. 대괄호에 알맞은 단어를 채우세요.
@media [screen] and (max-width:639px) {
body{
background:#000;
}
}
@media [screen] and (min-width:640px) {
body{
background:#dadada
}
}
@media [print] {
body{
background:#000;
}
}
[HTML4.01과 CSS2에서는 media type에 대응하는 스타일 시트를 따로 구성할 수 있는 방식 제공]
<STYLE type="text/css" media="projection">
H1 { color: blue}
</STYLE>
<link rel="stylesheet" type="text/css" media="screen" href="sans-serif.css">
<link rel="stylesheet" type="text/css" media="print" href="serif.css">
참고URL
http://www.w3.org/TR/REC-html40/present/styles.html#h-14.2.4
[CSS2에서 정의된 media type 정의 방법]
@media screen {
* { font-family: sans-serif }
}
참고URL
http://www.w3.org/TR/CSS21/media.html
위 방법은 media type만 결정 할 수 있었기 때문에 같은 미디어의 다양한 환경을 모두 수용하기 어려웠음.
하지만, CSS media quries modies을 이용하면서 디바이스 종류뿐만 아니라 다양한 조건을 이용하여 Style을 분기할 수 있게됨.
[Media Type]
[외부 파일을 사용하는 방법]
<link rel="stylesheet" media="screen and (min-device-width: 200px)" href="common.css" />
<link rel="stylesheet" media="screen and (min-device-width: 800px)" href="common2.css" />
['<'style'>' 태그 이용하는 방법]
<style type="text/css" media="screen and (min-device-width: 200px)">
body { background-color: #0F0; }
</style>
<style type="text/css" media="screen and (min-device-width: 800px)">
body { background-color: #F00; }
</style>
[css 파일내에 사용하는 방법]
<style type="text/css">
@media screen and (min-device-width: 200px) {
body { background-color: #0F0; }
}
@media screen and (min-device-width: 800px) {
body { background-color: #F00; }
}
</style>
[only, not]
media type을 선별하는 접두어
[ only ]
미디어 쿼리를 지원하는 사용자 agent만 media query 구문을 해석하라는 뜻이고 생략이 가능함.
생략했을때 기본값이 only로 처리됨.
@media only screen {
body { background-color: #F00; }
}
[ not ]
전체 미디어 쿼리를 부정하기 위해 사용, 뒤에 오는 모든 조건을 부정하는 연산
@media not screen {
body { background-color: #F00; }
}
*only 나 not을 사용하려면 미디어 타입을 규정해야 함.
*미디어 쿼리는 대소문자 구별하지 않음.
[width]
user-agent의 현재 width값에 대응해서 반응
@media screen and (width:640px) {
body{
background:#000;
}
}
[min-width]
최소 가로 너비를 지정하고 지정된 값 이상이면 그 값에 대해 반응
@media screen and (min-width:640px) {
body{
background:#000;
}
}
[max-width]
최대 가로 너비를 지정하고 지정된 값 이하이면 그 값에 대해 반응
@media screen and (max-width:639px) {
body{
background:#000;
}
}
[min-width / max-width and 연산자 사용하여 응용]
@media screen and (min-width: 768px) and (max-width: 1024px) {
body{
background:#000;
}
}
[min-width / max-width or 연산자 사용하여 응용]
@media screen and (width: 320px) , (width: 768px) {
body{
background:#000;
}
}
이 외에도 device-width/divice-height(출력장치의 너비,높이) , orientation(portrait/landscape 화면이 가로모드인지, 세로모드인지 지정) , aspect-ratio(화면영역의 가로,세로 비율), device-aspect-ratio(출력장치의 가로,세로 비율), color(출력 장치의 색상 구성요소 당 비트 수), color-index(장치가 표시 할 수 있는 수), monochrome(흑백 장치에 색상 당 비트 수),resolution(출력 장치의 해상도),scan(tv출력 장치의 스캐닝 과정),grid (출력 장치가 그리드 장치 또는 비트맵 장치냐에 따라 결정)등 여러가지 조건문이 될 수 있는 특징들이 있음.
참고URL
https://developer.mozilla.org/ko/docs/Web/Guide/CSS/Media_queries
<meta name="format-detection" content="telephone=no">
그러나, iOS에서는 자동 링크가 제거 되지만, 안드로이드에서는 적용되지 않는 문제가 있다.
안드로이드는 해당 엘리먼트에 style="pointer-events:none"로 자동 링크를 막을 수 있다.
(iOS도 적용은 되지만, 간혹 앱을 통해 확인할 경우 안되는경우도 있음.)
<span style="pointer-events:none">01044050909</span>
해결할 수 있다.A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.