JunO3O
응용하기
응용하기
2023. 3. 21. 03:02ㆍHTML
블로그(?) 뼈대 만들어보기!
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>페이지 만들기</title>
</head>
<body>
<!-- 전체를 감싸는 태그 -->
<div id="page-wrapper">
<!-- 헤더 -->
<header id="main-header">
<hgroup>
<h1 class="master-title"> HTML5 Example </h1>
<h2 class="master-description"> PHJ </h2>
</hgroup>
</header>
<!-- 네비게이션 -->
<nav id="main-navigation">
<div class="pull-left">
<ul class="outer-menu">
<li class="outer-menu-item">
<span class="menu-title"> HTML5 </span>
<ul class="inner-menu">
<li class="inner-menu-item"><a href="#"> 데이터 1 </a></li>
<li class="inner-menu-item"><a href="#"> 데이터 2 </a></li>
</ul>
</li>
<li class="outer-menu-item">
<span class="menu-title"> CSS3 </span>
<ul class="inner-menu">
<li class="inner-menu-item"><a href="#"> 데이터 1 </a></li>
<li class="inner-menu-item"><a href="#"> 데이터 2 </a></li>
<li class="inner-menu-item"><a href="#"> 데이터 3 </a></li>
</ul>
</li>
<li class="outer-menu-item">
<span class="menu-title"> JavaScript </span>
<ul class="inner-menu">
<li class="inner-menu-item"><a href="#"> 데이터 1 </a></li>
<li class="inner-menu-item"><a href="#"> 데이터 2 </a></li>
<li class="inner-menu-item"><a href="#"> 데이터 3 </a></li>
<li class="inner-menu-item"><a href="#"> 데이터 4 </a></li>
<li class="inner-menu-item"><a href="#"> 데이터 5 </a></li>
</ul>
</li>
</ul>
</div>
<div class="pull-right">
<div class="search-bar">
<form>
<input type="text" class="input-search">
<input type="submit" class="input-search-submit" value="검색">
</form>
</div>
</div>
</nav>
<!-- 논문 -->
<div id="content">
<!-- 본문 좌측 영역 -->
<section id="main-section">
<article>
<div class="article-header">
<h1 class="article-title"> HTML5 관련 내용 </h1>
<p class="article-date"> 2022년 07월 09일 </p>
</div>
<div class="article-body">
<img src="E_alXVJVcAspn6h.jpg" width="300" height="300">
<br>
<p> 강아지 귀엽네요 ㅎ </p>
<br>
<p> 키우고 싶습니다 ! </p>
<br>
</div>
</article>
<article>
<div class="article-header">
<h1 class="article-title"> HTML5 응용하기 </h1>
<p class="article-date"> 2022년 07월 10일 </p>
</div>
<div class="article-body">
<img src="Unknown.jpeg" width="300" height="300">
<br>
<p> 이미지를 하나 더 추가해봅니다 </p>
<br>
<p> 이 친구도 귀엽네요 </p>
</div>
</article>
</section>
<!-- 본문 우측 영역 -->
<aside id="main-aside">
<div class="aside-list">
<h3> 카테고리 </h3>
<ul>
<li><a href="#"> 데이터 1 </a></li>
<li><a href="#"> 데이터 2 </a></li>
<li><a href="#"> 데이터 3 </a></li>
<li><a href="#"> 데이터 4 </a></li>
<li><a href="#"> 데이터 5 </a></li>
</ul>
</div>
<div class="aside-list">
<h3> 최근 작성 항목 </h3>
<ul>
<li><a href="#"> 데이터 1 </a></li>
<li><a href="#"> 데이터 2 </a></li>
<li><a href="#"> 데이터 3 </a></li>
</ul>
</div>
</aside>
</div>
<!-- footer -->
<footer id="main-footer">
<a href="#"> 개발을 배우고 있는 어느 누군가가... </a>
</footer>
</div>
</body>
</html>
 |
 |
