아래와 같은 코드로 반응형 웹을 만들어볼 수 있습니다.
<!DOCTYPE html>
<html>
<head>
<title>타이틀이에요 뿌우^^</title>
<style type="text/css">
div {
width: 50%;
float: left;
}
body {
background-color: blue
}
@media only screen and (max-width: 500px){
div {
width: 100%;
}
body {
background-color: red;
}
}
</style>
</head>
<body>
<div>
a
</div>
<div>
b
</div>
</body>
</html>
아래와 같은 코드로 부트스트랩을 이용할 수 있습니다.
<!DOCTYPE html>
<html>
<head>
<title>타이틀이에요 뿌우^^</title>
<!-- 합쳐지고 최소화된 최신 CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<!-- 부가적인 테마 -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap-theme.min.css">
<!-- 합쳐지고 최소화된 최신 자바스크립트 -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
</head>
<body>
<!-- Standard button -->
<button type="button" class="btn btn-default">Default</button>
<!-- Provides extra visual weight and identifies the primary action in a set of buttons -->
<button type="button" class="btn btn-primary">Primary</button>
<!-- Indicates a successful or positive action -->
<button type="button" class="btn btn-success">Success</button>
<!-- Contextual button for informational alert messages -->
<button type="button" class="btn btn-info">Info</button>
<!-- Indicates caution should be taken with this action -->
<button type="button" class="btn btn-warning">Warning</button>
<!-- Indicates a dangerous or potentially negative action -->
<button type="button" class="btn btn-danger">Danger</button>
<!-- Deemphasize a button by making it look like a link while maintaining button behavior -->
<button type="button" class="btn btn-link">Link</button>
<a class="btn btn-default" href="#" role="button">Link</a>
<button class="btn btn-default" type="submit">Button</button>
<input class="btn btn-default" type="button" value="Input">
<input class="btn btn-default" type="submit" value="Submit">
문맥 특정 사용 (Context-specific usage)
<div>A</div>
<div>B</div>
<form>
<div class="form-group">
<label for="exampleInputEmail1">이메일 주소</label>
<input type="email" class="form-control" id="exampleInputEmail1" placeholder="이메일을 입력하세요">
</div>
<div class="form-group">
<label for="exampleInputPassword1">암호</label>
<input type="password" class="form-control" id="exampleInputPassword1" placeholder="암호">
</div>
<div class="form-group">
<label for="exampleInputFile">파일 업로드</label>
<input type="file" id="exampleInputFile">
<p class="help-block">여기에 블록레벨 도움말 예제</p>
</div>
<div class="checkbox">
<label>
<input type="checkbox"> 입력을 기억합니다
</label>
</div>
<button type="submit" class="btn btn-default">제출</button>
</form>
</body>
</html>
'인프런 - 강의 > 슈퍼초보를 위한 웹개발 기초' 카테고리의 다른 글
| 9 - 자바스크립스 연습 (0) | 2019.12.28 |
|---|---|
| 8 - 자바스크립트(Javascript) 맛보기 (0) | 2019.12.28 |
| 6 - CSS 좀 더 알아보기 More (0) | 2019.12.27 |
| 5 - CSS 시작하기 (0) | 2019.12.27 |
| 4 - HTML 조금 더 more 연습하기 (0) | 2019.12.27 |