Bootstrap(BS)를 활용한 블로그 페이지

IT 공부/JavaScript

Bootstrap(BS)를 활용한 블로그 페이지

toraa 2022. 7. 20. 16:21

Bootstrap(BS)
- 스타일시트와 자바스크립트를 미리 지정해놓고 가져다 사용하는 플러그 라이브러리이다.
- 클래스 이름으로 가져다 사용
- 웹개발에 있어서 보편적으로 널리 사용되는 구성요서들을 미리 디자인해둔 tool이다
- 웹개발자들에게 편리성을 주고, 빠르게 레이아웃을 구성하고 다양한 인터페이스를 지원한다.
- 스마트폰, 태블릿, PC, 대화면 등의 크기에 적용해서 구현하는 어려움을 해결할 수 있다.(반응형웹구현용이)
- css : <style>속성을 직접작성
BS : 미리 만들어진 클래스명을 여러개 사용하여 정해진 디자인 기능을 구현한다. - css+js

1) About me

<html>
<head>
<meta charset="UTF-8">
<title>about_me</title>
<!-- <link rel="stylesheet" type="text/css" href="../css/nav_style.css"> -->
<link rel="stylesheet" type="text/css" href="../css/bootstrap.min.css">

<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.min.js" integrity="sha384-w1Q4orYjBQndcko6MimVbzY0tgp4pWB4lZ7lr30WKz0vr/aWKhXdBNmNb5D92v7s" crossorigin="anonymous"></script>

<script type="text/javascript" src="../js/date.js">
</script>
</head>
<body>

	<!-- 부트스트랩에서 필요한 코드를 복사하여 편집하여 활용할 수 있다. -->
	<nav class="navbar navbar-expand-lg navbar-light bg-light">
	<div class="container">
		  <a class="navbar-brand" href="#">deok Home</a>
		  	
		  <div class="collapse navbar-collapse" id="navbarSupportedContent">
		    <ul class="navbar-nav mr-auto">
		      <li class="nav-item active">
		        <a class="nav-link" href="index.html">Home <span class="sr-only">(current)</span></a>
		      </li>
		      <li class="nav-item">
		        <a class="nav-link" href="blog_list.html">Blog</a>
		      </li>
		       <li class="nav-item">
		        <a class="nav-link" href="about_me.html">About me</a>
		  
		      <li class="nav-item dropdown">
		        <a class="nav-link dropdown-toggle" href="#" role="button" data-toggle="dropdown" aria-expanded="false">
		          Dropdown
		        </a>
		        <div class="dropdown-menu">
		          <a class="dropdown-item" href="#">자기소개</a>
		          <a class="dropdown-item" href="#">관심분야</a>
		          <div class="dropdown-divider"></div>
		          <a class="dropdown-item" href="#">게임</a>
		        </div>
		      </li>
		     
		    </ul>
		    <form class="form-inline my-2 my-lg-0">
		      <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
		      <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
		    </form>
		  </div>
		</div>
	</nav>

	<div class="container">
		<div class="row">
			<div class="col-9">
				<h1>About me</h1>
				<h2>광주에서 온 서대길입니당</h2>
				<p>HTML.CSS,JS,JSP로 재미있는 웹사이트를 만드는 것을 좋아합니다.</p>
				
				<button onclick="currentTime()">현재시간</button>
				<div><span id="time"></span></div>
				<hr>
				<a href="index.html">첫 화면으로 가기</a>
			</div>
			<div class="col-3">
				<img src="../images/dkk.jpg" class="img-fluid w-100">
			</div>
		</div>	
		<div class="row" height="500px">
			<div class="col-12">
				<h2>Portfolio</h2>
			</div>
			<div class="col-sm col-lg-6 bg-info">
				<img src="../images/dkkk.jpg" class="img-fluid w-100">
			</div>
			<div class="col-sm col-lg-3 bg-secondary">
				<img src="../images/dk.jpg" class="img-fluid w-100">
			</div>
			<div class="col-sm col-lg-3 bg-info">
				<img src="../images/rol2.png" class="img-fluid w-100">
			</div>
		</div>
	</div>


	<!-- <div class="container" style="background-color:	#B0E0E6">
		<h1>About Me</h1>
		<h2>광주에서 온 서대길입니당 </h2>
		<p>HTML,CSS,JS,JSP로 재미있는 웹사이트를 만드는 것을 좋아합니다!</p>
		
		<button onclick="currentTime()">현재시간</button>
		<div><span id="time"></span></div>  
		
		<a href="index.html">첫 화면으로 가기</a>
		<img src="../images/dkk.jpg" height="400px">
	</div> -->
	
	
</body>
</html>

2) Blog list

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Blog list</title>
<link rel="stylesheet" type="text/css" href="../css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="../css/nav_style.css">
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.min.js" integrity="sha384-w1Q4orYjBQndcko6MimVbzY0tgp4pWB4lZ7lr30WKz0vr/aWKhXdBNmNb5D92v7s" crossorigin="anonymous"></script>
	
</head>
<body>
<div class="container">
		<nav class="navbar navbar-expand-lg navbar-light bg-light">
	  <a class="navbar-brand" href="#">deok Home</a>
	  	
	  <div class="collapse navbar-collapse" id="navbarSupportedContent">
	    <ul class="navbar-nav mr-auto">
	      <li class="nav-item active">
	        <a class="nav-link" href="index.html">Home <span class="sr-only">(current)</span></a>
	      </li>
	      <li class="nav-item">
	        <a class="nav-link" href="blog_list.html">Blog</a>
	      </li>
	       <li class="nav-item">
	        <a class="nav-link" href="about_me.html">About me</a>
	  
	      <li class="nav-item dropdown">
	        <a class="nav-link dropdown-toggle" href="#" role="button" data-toggle="dropdown" aria-expanded="false">
	          Dropdown
	        </a>
	        <div class="dropdown-menu">
	          <a class="dropdown-item" href="#">Action</a>
	          <a class="dropdown-item" href="#">Another action</a>
	          <div class="dropdown-divider"></div>
	          <a class="dropdown-item" href="#">Something else here</a>
	        </div>
	      </li>
	     
	    </ul>
	    <form class="form-inline my-2 my-lg-0">
	      <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
	      <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
	    </form>
	  </div>
	</nav>
</div>
	<div class="container">
		<h1>Blog</h1>
		<p>아직 작성하지 않았습니다</p>
	</div>

</body>
</html>

3) Index (계산기와 구글 링크 넣기)

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="../css/nav_style.css">
<title>Insert title here</title>
<link rel="stylesheet" type="text/css" href="../css/bootstrap.min.css">
<script type="text/javascript" src="../js/cal.js">

</script>

</head>
<body>

<div class="container">
		<nav class="navbar navbar-expand-lg navbar-light bg-light">
	  <a class="navbar-brand" href="#">deok Home</a>
	  	
	  <div class="collapse navbar-collapse" id="navbarSupportedContent">
	    <ul class="navbar-nav mr-auto">
	      <li class="nav-item active">
	        <a class="nav-link" href="index.html">Home <span class="sr-only">(current)</span></a>
	      </li>
	      <li class="nav-item">
	        <a class="nav-link" href="blog_list.html">Blog</a>
	      </li>
	       <li class="nav-item">
	        <a class="nav-link" href="about_me.html">About me</a>
	  
	      <li class="nav-item dropdown">
	        <a class="nav-link dropdown-toggle" href="#" role="button" data-toggle="dropdown" aria-expanded="false">
	          Dropdown
	        </a>
	        <div class="dropdown-menu">
	          <a class="dropdown-item" href="#">Action</a>
	          <a class="dropdown-item" href="#">Another action</a>
	          <div class="dropdown-divider"></div>
	          <a class="dropdown-item" href="#">Something else here</a>
	        </div>
	      </li>
	     
	    </ul>
	    <form class="form-inline my-2 my-lg-0">
	      <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
	      <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
	    </form>
	  </div>
	</nav>
</div>

	<div class="container">
	<h1>첫번째 헤드라인</h1>
	<h2>두번째 헤드라인</h2>
	<h3>세번째 헤드라인</h3>
	<h4>네번째 헤드라인</h4>
	<h5>다섯번째 헤드라인</h5>
	<p>문단은 p태그를 활용합니다. p는 아마도 Paragraph의 앞글자를 따온 것이겠져</p>
	
	<label for="inputA">옵션1</label>
		<input id="inputA" value=1 onkeyup="doCal()">
	<label for="inputB">옵션2</label>
		<input id="inputB" value=2 onkeyup="doCal()">
		
	<p><span id="valueA">1</span>+<span id="valueB">2</span>=<span id="valueC">3</span>입니다.</p>
	
	<a href='http://www.google.com'>Go to google</a>
	<hr>
	<img src='../images/rol2.png'>
	</div>
	
	
	<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
   <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
   <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.min.js" integrity="sha384-w1Q4orYjBQndcko6MimVbzY0tgp4pWB4lZ7lr30WKz0vr/aWKhXdBNmNb5D92v7s" crossorigin="anonymous"></script>
	
</body>
</html>

* nav_style.css

@charset "UTF-8";

nav{
	background-color:#00CED1; font-size:150%; text-align:center;
	}
	
nav a{color:gold;}

저작자표시 (새창열림)

'IT 공부 > JavaScript' 카테고리의 다른 글

bootstrap 활용 (0)	2022.07.20
아이콘 참고 사이트 (0)	2022.07.20
여행사이트 만들기 (0)	2022.07.18
wow활용 (1)	2022.07.18
Jquery (1)	2022.06.21

현재글Bootstrap(BS)를 활용한 블로그 페이지

기록 저장소

Bootstrap(BS)를 활용한 블로그 페이지

'IT 공부 > JavaScript' 카테고리의 다른 글

'IT 공부/JavaScript'의 다른글

티스토리툴바

Bootstrap(BS)를 활용한 블로그 페이지

'IT 공부 > JavaScript' 카테고리의 다른 글

'IT 공부/JavaScript'의 다른글

관련글

티스토리툴바