Bootstrap All Functions #2 |
HTML 5 Doctype
<!DOCTYPE html>
<html lang="en">
..
</html>
Mobile First
<meta name="viewport" content="width=device-width, initial-scale=1,0">
BootStrap 3 부터는 기본적으로 responsive web page 이다. Bootstrap 3 부터는 모바일 단말들이 먼저이고, 데스크탑을 다음 순위로 지원한다.
추가적으로 user-scalable=no 를 넣을수도 있다. 이 녀석은 모바일 단말에서 zoom 을 막는 효과가 있다.
maximum-scale=1.0 은 user-scable=no 와 함께 쓰여서 native app 과 비슷한 효과를 볼 수는 있으나, responsiveness 는 떨어진다고 볼 수 있다.
Responsive Images
.img-responsive{
display: inline-block;
height: auto;
max-width: 100%;
}
Global display, Typography and links.
body{
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 14px;
line-height: 1.428571429;
color: #333333;
background-color: #ffffff;
}
a:hover,
a:focus{
color: #2a6496;
text-decoration: underline;
}
a:focus{
outline: thin dotted #333;
outline: 5px auto -webkit-focus-ring-color;
outline-offset: -2px
}
Get rid of cross browser inconsistencies
cross browser inconsistency 제거를 위해 normalize 기법이 쓰였다. ( 이전버전도 지원 )
.container{
margin-right: auto;
margin-left: auto;
}
.container:before,
.container:after{
display: table;
content: " "; // opera bug fix
}
'프로그래밍 놀이터 > Web' 카테고리의 다른 글
[기초강좌] HTML Layouts - w3schools 번역 (0) | 2014.03.19 |
---|---|
[기초강좌] HTML Blocks - w3schools 번역 (0) | 2014.03.18 |
[기초강좌] HTML Lists - w3schools 번역 (0) | 2014.03.17 |
[기초강좌] HTML Tables - w3schools 번역 (0) | 2014.03.13 |
Bootstrap All Functions #1 (0) | 2014.03.13 |
댓글