Class / id 의 차이
<!DOCTYPE html>
<html>
<head>
<link href="2.css" rel="stylesheet" media="all">
</head>
<body>
<div id="top-menu">
<p>호텔예약서비스:호예 서울|뉴욕|파리|판교</p>
</div>
<div class="hotel_detail"></div>
<div class="hotel_detail"></div>
<div class="hotel_detail"></div>
<div id="footer">
<p>개인정보 책임자 : 이두희</p>
<p>회사주소 : 네오위즈판교타워</p>
</div>
</body>
</html>
#top-menu {
background-color: #FFB90F;
height: 80px;
}
.hotel_detail {
height: 50px;
width: 80%;
background-color: blue;
margin-top: 20px;
border: 10px solid black;
}
#footer {
height: 80px;
width: 100%;
background-color:#FFB90F;
margin-top: 50px;
}
<!DOCTYPE html>
<html>
<head>
<!-- 합쳐지고 최소화된 최신 CSS -->
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0-wip/css/bootstrap.min.css">
<!-- 합쳐지고 최소화된 최신 자바스크립트 -->
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0-wip/js/bootstrap.min.js"></script>
</head>
<body>
<nav class="navbar navbar-default" role="navigation">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">호텔예약서비스 호예</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse navbar-ex1-collapse">
<ul class="nav navbar-nav">
<li><a href="#">서울</a></li>
<li><a href="#">뉴욕</a></li>
<li><a href="#">파리</a></li>
<li><a href="#">판교</a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a href="#">로그인</a></li>
<li><a href="#">회원가입</a></li>
</ul>
</div><!-- /.navbar-collapse -->
</nav>
</body>
<div class="row">
<div class="col-md-8 col-md-offset-2">
<div class="well">
<div class="media">
<a class="pull-left" href="#">
<img class="media-object" src="http://imagizer.imageshack.us/v2/xq90/673/7wGIU5.jpg" alt="...">
</a>
<div class="media-body">
<h4 class="media-heading">서울에서 전망좋은 호텔</h4>
내가 보기좋아하는 호텔입니다
</div>
</div>
</div>
<div>
<div class="col-md-8 col-md-offset-2">
<div class="well">마이네임이즈호텔</div>
</div>
<div class="col-md-8 col-md-offset-2">
<div class="well">마이네임이즈호텔</div>
</div>
</div>
<div class="well">회사이름 호예</div>
</html>
HTML/CSS -> Bootstrap
Java
[Python + Django]
[Ruby + Rails]
Sinatra 입문.
require 'sinatra'
get '/' do
end
--- 기본틀
require 'sinatra'
get '/' do
erb : index
end
c.html -> c.erb
<% 1.upto(500) do %> - 루비
<p style="margin-left:200px;">반복 하는 내용입니다.</p> - HTML
<% end %> - 루비
do -> end를 만날때까지 계속 돌려라.
do |t| -> t에다가 몇번째 돌고있는건지 저장
<%=t%> 를 하게되면 t에 있는 숫자가 찍혀서 나온다.
출력을 할거면 =을 붙혀줌
HTML 은 그냥 쓰는데 루비는 <%,%>를 해주어야 한다.
출력하는 값이 있으면 =을 붙혀줌
<% a = ["서울","뉴욕", "파리", "판교"] %>
a에 여러가지 값들을 넣어 놓은 배열? 변수 같은 느낌
<% c_set = ["서울","뉴욕", "파리", "판교"] %> -> .rb 파일로 집어넣고 c_set앞에 @를 붙혀준다.
<% c_set.each do |z|%>
<li><a href="#"><%= z %></a></li>
<% end %>
루비파일(app.rb)에서
get '/login' do
erb :login
end
추가(login.erb)
sinatra render partial -> 여러 페이지에 걸쳐서 공통적으로 사용되는 부분을 파일로 생성하여 사용
-> <%= erb :navi %>
app.rb
require 'sinatra'
get '/' do
@c_set = ["서울", "뉴욕", "파리", "판교", "케이프타운"]
erb :index
end
get '/login' do
@c_set = ["서울", "뉴욕", "파리", "판교", "케이프타운"]
erb :login
end
index.erb
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css">
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
</head>
<body>
<%= erb :navi %>
<div class="row">
<% 1.upto(5) do %>
<div class="col-md-8 col-md-offset-2">
<div class="well">
<div class="media">
<a class="pull-left" href="#">
<img class="media-object" src="http://imagizer.imageshack.us/v2/150x100q90/907/wkvloM.jpg" alt="...">
</a>
<div class="media-body">
<h4 class="media-heading">서울에서 전망좋은 호텔</h4>
<p>내가 제일 좋아하는 호텔입니다.</p>
</div>
</div>
</div>
</div>
<% end %>
</div>
<%= erb :footer%>
</body>
</html>
login.erb
<!DOCTYPE html>
<html>
<head>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap-theme.min.css">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<%= erb :navi %>
<div class="row"style="margin-top:100px;margin-bottom:100px;">
<div class="col-md-6 .col-md-offset-3">
<form class="form-horizontal" role="form">
<div class="form-group">
<label for="inputEmail3" class="col-sm-2 control-label">아이디</label>
<div class="col-sm-10">
<input type="email" class="form-control" id="inputEmail3" placeholder="아이디">
</div>
</div>
<div class="form-group">
<label for="inputPassword3" class="col-sm-2 control-label">비밀번호</label>
<div class="col-sm-10">
<input type="password" class="form-control" id="inputPassword3" placeholder="비밀번호">
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" class="btn btn-default">로그인</button>
</div>
</div>
</form>
</div>
</div>
<%= erb :footer%>
</body>
</html>
navi.erb
<nav class="navbar navbar-default" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">호텔예약서비스:호예</a>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<% @c_set.each do |z|%>
<li><a href="#"><%= z %></a></li>
<% end %>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a href="/login">로그인</a></li>
<li><a href="#">회원가입</a></li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
footer.erb
<div class="well">회사이름 : 호예</div>
'잡동사니' 카테고리의 다른 글
| [코드스터디] 4주차 (0) | 2015.06.25 |
|---|---|
| [코드스터디] 3주차 (0) | 2015.06.25 |
| [코드스터디] 1주차 (0) | 2015.06.25 |
| Linux 기초 2 (0) | 2015.06.24 |
| Linux 기초 1 (0) | 2015.06.24 |
