'bootstrap'에 해당되는 글 1건
- 2015.05.07 [05] 간단한 웹페이지 작성, index.html, main.css
- 2015.03.13
1. iptables 동작 중지
# cd /etc/sysconfig
# rm -rf iptables
# iptables -F
# iptables -X
하면 재부팅 후에 다시 동작 안함
2. 간단한 웹 페이지 작성
1) <head>
설정(폰트 등), script
2) <body>
내용
3) bootstrap
이미 만들어진 코드를 이용
다운로드 하지 않고도 Bootstrap CDN 을 head만 붙여넣어도 된다.
* Tip - Linux 기본 환경 확인
# locale
# cd /var/www/html
# vi index.html
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<link href="main.css" rel="stylesheet">
</head>
<body>
<div class="nav">
<div class="container">
<ul class="pull-left">
<li> <a href="#">home</a> </li>
<li> <a href="#">sitemap</a> </li>
</ul>
<ul class="pull-right">
<li> <a href="#">sign up</a> </li>
<li> <a href="#">Log In</a> </li>
<li> <a href="#">Help</a> </li>
</ul>
</div>
</div>
<div class="jumbotron">
<div class="container">
<h1> GFriend Fan Page's </h1>
<p> I Love Girl Friends ... </p>
</div>
</div>
<div class="learn-more">
<div class="container">
<div class="row">
<div class="col-md-4">
<h3> member </h3>
<p> Introduce member .. </p>
<a href="#"> member profile </a>
</div>
<div class="col-md-4">
<h3> schedule </h3>
<p> blar blar blar ... </p>
<a href="#"> more schedule </a>
</div>
<div class="col-md-4">
<h3> empty </h3>
<p> ..... </p>
</div>
</div>
</div>
</div>
</body>
</html>
# vi main.css
.nav a {
color: gray;
padding: 14px 10px;
font-weight: bold;
text-transform: uppercase;
}
.nav li {
display: inline;
}
.jumbotron {
height: 400px;
background-image:url('https://pbs.twimg.com/profile_images/551756034780311552/Nvpilgd9_400x400.jpeg');
}
.jumbotron h1 {
color: #ee82ee;
font-size: 50px;
font-family: Arial;
}
.jumbotron p {
color: #000000;
font-size: 20px;
font-weight: bold;
}