블로그 형태의 HTML에 스타일(CSS) 적용 코드 (css3_page.html)
<!DOCTYPE html>
<html>
<head>
<title>HTML5 + CSS3 Basic Page</title>
<!-- 1. 초기화 하기 -->
<style>
* {
margin: 0; padding: 0;
font-family: '맑은 고딕', 'Malgun Gothic', Gothic, sans-serif;
}
a { text-decoration: none;}
li { list-style: none;}
</style>
<!-- 기본 클래스 -->
<style>
.pull-left { float: left; }
.pull-right { float: right; }
</style>
<!-- 2. 페이지 구성하기 -->
<style>
body {
width: 960px; margin: 0 auto; /* 중앙 정렬 - 위아래 0, 왼쪽오른쪽 자동 */
background: #E6E6E6; /* 내부 흰색 */
}
#page-wrapper {
background: white; /* 웹 페이지 배경 회색 */
margin: 40px 0; padding: 10px 20px;
border-radius: 5px;
box-shadow: 0 2px 6px rgba(100, 100, 100, 0.3); /* 오른쪽 아래 흐림도 색상 */
}
</style>
<!-- 3. 헤더 구성하기 : 글꼴과 색상을 지정 -->
<style>
#main-header { padding: 40px 50px; }
.master-title {
font-size: 30px;
color: #181818;
}
.master-description {
font-size: 15px; font-weight: 500;
color: #383838;
}
</style>
<!-- 4. 내비게이션 및 풀다운 메뉴 구성하기 -->
<style>
#main-navigation {
border-top: 1px solid #C8C8C8;
border-bottom: 1px solid #C8C8C8;
margin-bottom: 20px;
height: 40px; /* 내비게이션 높이(height) 강제로 지정 */
/* 부모에게 height 속성 적용했음로 overflow: hidden 속성 적용하지 않음 */
}
.outer-menu-item {
float: left; /* 내비게이션 목록을 수평 정렬 */
position: relative;
}
.outer-menu-item:hover {
background: black;
color: white;
}
.menu-title {
display: block; /* 태그가 화면에 보이는 방식을 블록 박스 형식으로 지정 */
height: 30px; line-height: 30px;
text-align: center;
padding: 5px 20px;
}
.inner-menu {
display: none;
position: absolute;
top: 40px; left: 0;
width: 100%;
background: white;
box-shadow: 0 2px 6px rgba(5, 5, 5, 0.9);
z-index: 1000;
text-align: center;
}
.inner-menu-item > a {
display: block;
padding: 5px 10px;
color: black;
}
.inner-menu-item > a:hover {
background: black;
color: white;
}
</style>
<!-- 5. 검색 양식 추가하기(내비게이션 내부 검색)-->
<style>
.search-bar {
height: 26px;
padding: 7px;
}
.input-search {
display: block;
float: left;
background-color: #FFFFFF;
border: 1px solid #CCCCCC;
border-radius: 15px 0 0 15px;
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05); /* 흐림도와 색상 사이에 inset 키워드를 넣으면 그림자가 태그 안쪽에 생성 */
width: 120px; height: 24px;
padding: 0 0 0 10px;
font-size: 12px;
color: #555555;
}
.input-search:focus {
border-color: rgba(82, 168, 236, 0.8);
outline: 0;
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
}
.input-search-submit {
display: block;
float: left;
width: 50px; height: 26px;
border-radius: 0 15px 15px 0;
border: 1px solid #CCCCCC;
margin-left: -1px;
vertical-align: top;
display: inline-block;
}
</style>
<!-- 6. 본문 추가하기(중앙 내용) -->
<style>
/* body 태그의 너비: 960px */
/* #page-wrapper 태그의 padding 속성으로 내용물 너비는 920px */
#content { overflow: hidden } /* 자손에게 float 속성을 지정하고, 부모의 overflow 속성은 hidden으로 적용 */
#main-section {
float: left;
width: 710px;
}
#main-aside {
float: right;
width: 200px;
}
</style>
<!-- 6. 본문 추가하기(본문 포스트 위쪽) -->
<style>
article {
padding: 0 10px 20px 10px;
border-bottom: 1px solid #C8C8C8;
}
.article-header { padding: 20px 0; }
.article-title {
font-size: 25px;
font-weight: 500; /* 글자 두께 */
padding-bottom: 10px;
}
.article-date { font-size: 13px; }
.article-body { font-size: 14px; }
</style>
<!-- 6. 본문 추가하기(사이드 메뉴) -->
<style>
.aside-list { padding: 10px 0 30px 0; }
.aside-list > h3 {
font-size: 15px;
font-weight: 600;
}
.aside-list li a {
margin-left: 8px;
font-size: 13px;
color: #6C6C6C;
}
</style>
</head>
<body>
<!-- 전체를 감싸는 태그 -->
<div id="page-wrapper">
<!-- 헤더 -->
<header id="main-header">
<hgroup>
<h1 class="master-title">HTML5 + CSS3 Example Preview</h1>
<h2 class="master-description">인공지능 산업지능화 전문인력양성과정</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="#">데이터</a></li>
<li class="inner-menu-item"><a href="#">데이터</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="#">데이터</a></li>
<li class="inner-menu-item"><a href="#">데이터</a></li>
<li class="inner-menu-item"><a href="#">데이터</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="#">데이터</a></li>
<li class="inner-menu-item"><a href="#">데이터</a></li>
<li class="inner-menu-item"><a href="#">데이터</a></li>
<li class="inner-menu-item"><a href="#">데이터</a></li>
<li class="inner-menu-item"><a href="#">데이터</a></li>
<li class="inner-menu-item"><a href="#">데이터</a></li>
<li class="inner-menu-item"><a href="#">데이터</a></li>
<li class="inner-menu-item"><a href="#">데이터</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년 7월 14일</p>
</div>
<div class="article-body">
<img src="https://cdn.inflearn.com/wp-content/uploads/html_css.jpg" width="430" height="280">
<br><br>
<p>웹을 지탱하는 핵심 기술은 HTML5 입니다.</p>
<br>
<p>HTML5는 HTML의 새로운 버전으로 Client Side Technology 기술의 중심이 되는 마크업 언어입니다. 가장 특징적인 것은 기존의 웹 문서에서는 HTML 만으로 웹 서비스를 구성하는 것이 불가능하였지만 HTML5 로 넘어오면서 클라이언트와 서버와의 통신이 가능하며 이에 대한 부가 기능을 제공함으로써 다른 외부 Active-X와 같은 plug-ins 를 사용하지 않고도 웹 서비스를 제공할 수 있을 정도로 많은 기능이 추가되었다는 것입니다. HTML5 는 Client Side Technology 를 강력하게 지원하는 단순 표현 HTML을 그 이상의 의미를 가지도록 더 높은 차원으로 발전시킨 기술입니다. 즉, 기존의 HTML은 HTML 4.0 이후에도 W3C에 의해서 HTML 4.01, XHTML 1.0, 1.1, 2.0 등으로 발전해 왔지만 이런 그동안의 HTML 에서 의 한계를 극복하기 위해 HTML5 가 탄생하게 된 것입니다.</p>
<br>
<p>CSS는 HTML 등의 마크업 언어로 작성된 문서가 실제로 웹사이트에 표현되는 방법을 정해주는 스타일 시트 언어입니다.</p>
<br>
<p>웹 문서의 전반적인 스타일을 미리 저장해 둔 스타일시트이다. 문서 전체의 일관성을 유지할 수 있고, 세세한 스타일 지정의 필요를 줄어들게 하였다. 기존의 HTML은 웹 문서를 다양하게 설계하고 수시로 변경하는데 많은 제약이 따르는데, 이를 보완하기 위해 만들어진 것이 스타일 시트이고 스타일 시트의 표준안이 바로 CSS이다. 간단히 스타일 시트라고도 한다. HTML을 이용해서 웹 페이지를 제작할 경우 전반적인 틀에서 세세한 글꼴 하나 하나를 일일이 지정해주어야 하지만, 웹 페이지의 스타일(작성형식)을 미리 저장해 두면 웹 페이지의 한 가지 요소만 변경해도 관련되는 전체 페이지의 내용이 한꺼번에 변경되므로, 문서 전체의 일관성을 유지할 수 있고 작업 시간도 단축된다. 따라서 웹 개발자들은 보다 풍부한 디자인으로 웹을 설계할 수 있고, 글자의 크기, 글자체, 줄간격, 배경 색상, 배열위치 등을 자유롭게 선택하거나 변경할 수 있으며 유지·보수도 간편하게 할 수 있다. HTML과 XHTML에 주로 쓰이며, XML에서도 사용할 수 있다. W3C의 표준이며, 레이아웃과 스타일을 정의할 때의 자유도가 높다. 마크업 언어가 웹사이트의 몸체를 담당한다면 CSS는 옷과 액세서리 같은 꾸미는 역할을 담당한다고 할 수 있다. 즉, HTML 구조는 그대로 두고 CSS 파일만 변경해도 전혀 다른 웹사이트처럼 꾸밀 수 있다. 현재 개발 중인 CSS3의 경우 그림자 효과, 그라데이션, 변형 등 그래픽 편집 프로그램으로 제작한 이미지를 대체할 수 있는 기능이 추가되었다. 또한 다양한 애니메이션 기능이 추가되어 어도비 플래시를 어느 정도 대체하고 있다.</p>
</div>
</article>
<article>
<div class="article-header">
<h1 class="article-title">HTML5 응용과 실습</h1>
<p class="article-date">2022년 7월 14일</p>
</div>
<div class="article-body">
<img src="https://images.velog.io/images/limes/post/57abe9d3-a8c8-492f-8190-9a577201051e/HTML5.png" width="430" height="280">
<br><br>
<p>마크업을 구성하는 것은 어렵지 않으므로 간단하게 설명했습니다.</p>
<br>
<p>기술에 대한 고민과 이해는 자연스럽게 관련 직군에 대한 이해도도 증가시키기 때문에 요즘은 비전공자 혹은 비 개발 직군에게도 기초적인 개발 지식을 요구하는 경우가 점차 증가하고 있습니다. HTML5/CSS3는 웹 구성에 사용되는 언어라 웹 개발에 관심 있는 분들이 가장 먼저 시작하는 언어이기도 합니다. 여기에 JavaScript까지 묶으면 웹 페이지를 만들 수 있는 가장 기초적인 구성이 됩니다. 이 세 가지에 대해 학습한다면 단순한 기술을 습득하고 사용하는 것을 넘어 웹 서비스 및 IT 기술의 역사까지 이해하시게 될 거예요.</p>
</div>
</article>
</section>
<!-- 본문 우측 영역 -->
<aside id="main-aside">
<div class="aside-list">
<h3>카테고리</h3>
<ul>
<li><a href="#">데이터</a></li>
<li><a href="#">데이터</a></li>
<li><a href="#">데이터</a></li>
<li><a href="#">데이터</a></li>
<li><a href="#">데이터</a></li>
</ul>
</div>
<div class="aside-list">
<h3>최근 글</h3>
<ul>
<li><a href="#">데이터</a></li>
<li><a href="#">데이터</a></li>
<li><a href="#">데이터</a></li>
<li><a href="#">데이터</a></li>
</ul>
</div>
</aside>
</div>
<!-- 푸터 -->
<footer id="main-footer">
<a href="#">HTML5, CSS3, JavaScript Programming</a>
</footer>
</div>
</body>
</html>
댓글