일반웹으로 모바일웹으로 바꾸려면 다음과 같이 head에 viewport를 설정해 주어야 한다. 이것은 기본적으로 화면 사이즈에 맞게 표시해주고, 화면 확대를 방지하는 코드이다.
<head>
<meta name="viewport" content="user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, width=device-width">
</head>
Showing posts with label HTML5. Show all posts
Showing posts with label HTML5. Show all posts
Thursday, October 22, 2015
Wednesday, September 2, 2015
HTML5 아이폰 채팅 말풍선
<style>
body {
font-family: "Helvetica Neue";
font-size: 20px;
font-weight: normal;
}
section {
max-width: 450px;
margin: 50px auto;
}
section div {
max-width: 255px;
word-wrap: break-word;
margin-bottom: 20px;
line-height: 24px;
}
.clear {
clear: both;
}
.from-me {
position: relative;
padding: 10px 20px;
color: white;
background: #0B93F6;
border-radius: 25px;
float: right;
}
.from-me:before {
content: "";
position: absolute;
z-index: -1;
bottom: -2px;
right: -7px;
height: 20px;
border-right: 20px solid #0B93F6;
border-bottom-left-radius: 16px 14px;
-webkit-transform: translate(0, -2px);
}
.from-me:after {
content: "";
position: absolute;
z-index: 1;
bottom: -2px;
right: -56px;
width: 26px;
height: 20px;
background: white;
border-bottom-left-radius: 10px;
-webkit-transform: translate(-30px, -2px);
}
.from-them {
position: relative;
padding: 10px 20px;
background: #E5E5EA;
border-radius: 25px;
color: black;
float: left;
}
.from-them:before {
content: "";
position: absolute;
z-index: 2;
bottom: -2px;
left: -7px;
height: 20px;
border-left: 20px solid #E5E5EA;
border-bottom-right-radius: 16px 14px;
-webkit-transform: translate(0, -2px);
}
.from-them:after {
content: "";
position: absolute;
z-index: 3;
bottom: -2px;
left: 4px;
width: 26px;
height: 20px;
background: white;
border-bottom-right-radius: 10px;
-webkit-transform: translate(-30px, -2px);
}
</style>
<section>
<div class="from-me">
<p>Hey there! What's up?</p>
</div>
<div class="clear"></div>
<div class="from-them">
<p>Checking out iOS7 you know..</p>
</div>
<div class="clear"></div>
<div class="from-me">
<p>Check out this bubble!</p>
</div>
<div class="clear"></div>
<div class="from-them">
<p>It's pretty cool!</p>
</div>
<div class="clear"></div>
<div class="from-me">
<p>Yeah it's pure CSS & HTML</p>
</div>
<div class="clear"></div>
<div class="from-them">
<p>Wow that's impressive. But what's even more impressive is that this bubble is really high.</p>
</div>
</section>
Subscribe to:
Posts (Atom)