카카오페이같은 반응형 웹을 그누보드5에서도 구현 가능한가요?
본문
브라우저 크기를 줄여도 스크롤이 생기지 않고
모바일 버전에서는 스크롤 방향이 다르게 구현되는데
이런것들이 그누보드에서도 구현이 가능한가요?
카카오페이 사이트를 모티브로 삼아 원페이지 형식의 간단한 브랜드 사이트 하나 만들어보고 있는데
워낙 초보자라 카카오페이처럼 로고넣는것도 쉽지가 않네요 ㅠㅠ
답변 2
<!DOCTYPE html>
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<div class="jumbotron">
<h1>My First Bootstrap Page</h1>
<p>Resize this responsive page to see the effect!</p>
</div>
<div class="row">
<div class="col-sm-4">
<h3>Column 1</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>
</div>
<div class="col-sm-4">
<h3>Column 2</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>
</div>
<div class="col-sm-4">
<h3>Column 3</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>
</div>
</div>
</div>
</body>
</html>
다운 받을 필요없어요..저렇게 링크시키면 되고요..저소스 받아서 실행해보시면 부트스트랩이 어떤거구나 아실거에요..단지
<div class="container">
<div class="jumbotron">
제목이나 로고(한줄짜리임)
</div>
<div class="row>
<div class="col-md-4> //row 는 12칼럼으로 구성되요 md는 데스크탑,sm은 태블릿,xs휴대폰
여기다 내용쓰면 자동으로 크기 조정
</div>
<div class="col-sm-4> //row 는 12칼럼으로 구성되요 md는 데스크탑,sm은 태블릿,xs휴대폰
여기다 내용이나 이미지넣으면 자동으로 크기 조정
</div>
<div class="col-md-4> //row 는 12칼럼으로 구성되요 md는 데스크탑,sm은 태블릿,xs휴대폰
여기다 내용쓰면 자동으로 크기 조정
</div> //row에는 4,4,4해도 되고 3,3,3,3 해도 되고 6,6으로 두개만 줘도 됩니다.
</div>
</div>
헛! 감사합니다^^
내일부터 공부 해야겠네요 ㅎㅎ
<div class="row">
<div class="col-md-8">
<div class="row">
<div class="col-md-4">
</div>
<div class="col-md-4">
</div>
<div class="col-md-4">
</div>
</div>
</div>
<div class="col-md-4">
</div>
</div>
이렇게 화면 구성하면 그누보드처럼 꾸밀수 있습니다.
부트스트랩 이용하시면 되요
화면크기에 따라 보여질 칼럼을 정할수 있어요
감사합니다.
혹시 부트스트랩 초보자가 입문할 수 있게 쉽게 설명된 곳 알고 계시면 추천좀 부탁드립니다.
지금 살펴보니 좋은거 같은데 그누보드하고 연동하려면 뭐부터 해야하는지 감이 안오네요..
다운은 받아놨는데 ㅠㅠ