2024.04.02
뷰포트
<!--
뷰포트: 스마트폰 화면에서 실제 내용이 표시되는 영역
속성 설명 사용 가능한 값 기본값
width 뷰포트의 넓이 device-width 또는 크기 브라우저 기본 값
height 뷰포트의 높이 device-height 또는 크기 브라우저 기본 값
user-scalable 확대/축소 가능 여부 yes 또는 no 선택
initial-salce 초기 확대/축소 값 1~10 1
minimum-scale 최소 확대/축소 값 1~10 0.25
maximum-scale 최대 확대/축소 값 11~10 1.6
-->
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>media query</title>
<style>
body{
font-size:30pt;
}
/* 767px이하 */
@media screen and (max-width:767px){
h1{color:red;}
ul{
list-style:none;
}
ul li{
font-size:40%;
}
}
/* 768px ~ 991px */
@media screen and (min-width:768px) and (max-width:991px){
h1{
color:blue;
}
ul{
list-style:none;
}
ul li {
display:inline;
background-color:skyblue;
font-size:60%;
}
}
/* 992px 이상 */
@media screen and (min-width:992px){
h1{
color:green;
}
ul{
list-style:none;
}
ul li{
background-color:green;
color:white;
display:inline;
}
}
</style>
시맨틱 태그
<body>
<!--
헤더를 정의할 때 사용
사이트에 대한 소개 정보나 메인 메뉴, 사이트 로고 등이 포함
-->
<header>
<!-- 제목과 부제목을 묶어주는 역할 -->
<hgroup>
<!-- 제목 -->
<h1>서울 고등학교 홈페이지</h1>
<!-- 부제목 -->
<h4>우리들만의 즐거운 공간</h4>
</hgroup>
<!-- 사이트의 메뉴나 링크 같은 내비게이션 요소들이 포함 -->
<nav>
<ul>
<li><a href="1.html">1학년</a>
<li><a href="2.html">2학년</a>
<li><a href="3.html">3학년</a>
</ul>
</nav>
</header>
<!-- 실제 문서 내용이 들어감 -->
<section>
<header>
<h3>이달의 인물</h3>
</header>
<!-- 문서 내용이 많을 경우 여러 개의 <article> 요소로 나눌 수 있음 -->
<article>
교내 영상제에서 <strong>최우수상</strong>을 받은
<mark>이빛나양</mark>을 만나봅니다.
</article>
</section>
<!-- 작성자 정보나 저작권 정보, 또는 관련 문서 링크 등 부가 정보들을 담고 있음. 주로 문서 하단에 배치 -->
<footer>
<address>서울시 강남구 역삼동</address>
© 서울고등학교
</footer>
</body>
시맨틱 태그를 활용한 간단한 사이트(사이드 바, footer 등)
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Blog Site</title>
<style>
/* 여백 및 기본적인 폰트를 설정 */
body{
margin:0;
padding:0;
font-family:Arial, "MS Trevuchet",sans-serif;
}
/* 페이지의 내용을 가운데에 놓음 */
#wrap {
width:960px;
margin:0 auto;
}
/* 헤더의 넓이를 정함 */
header#page_header {
width:100%;
}
/* 내비게이션 리스트의 점 아이콘을 제거 */
header#page_header nav ul,footer#page_footer nav ul{
list-style:none;
margin:0;
padding:0;
}
/* 내비게이션을 가로로 배치 */
header#page_header nav ul li,footer#page_footer nav ul li{
padding:0;
margin:0 20px 0 0;
display:inline;
}
/* 가로 방향으로 표시 */
section#posts {
float:left;
width:74%;
}
section#posts aside{
float:right;
width:35%;
margin-left:5%;
font-size:20px;
line-height:40px;
}
section#sidebar {
float:right;
width:25%;
}
/* float를 해제해서 페이지 하단에 안착시킴 */
footer#page_footer{
clear:both;
width:100%;
text-align:center;
}
</style>
</head>
<body>
<div id="wrap">
<!-- header : 회사의 로고, 검색 상자 등 -->
<header id="page_header">
<h1>Star Blog</h1>
<!-- nav : 메뉴, 페이지 연결 링크 -->
<nav>
<ul>
<li><a href="1.html">최근 글</a></li>
<li><a href="2.html">이전 글</a></li>
<li><a href="3.html">공헌자 글</a></li>
<li><a href="4.html">연락처</a></li>
</ul>
</nav>
</header>
<!-- section : 페이지의 논리적 영역 (내용 부분) -->
<section id="posts">
<!-- article : 세부 내용 -->
<article class="post">
<!-- 내용의 작은 제목 -->
<header>
<h2>얼마나 많이 기록해 둬야 되겠습니까?</h2>
<p>Posted by Brain on 2024.04.02</p>
</header>
<!-- aside : 인용구, 덧붙이고 싶은 생각, 관련된 링크 -->
<aside>
<p>"물건을 팔 때는 거절할 기회를 주어선 안됩니다."</p>
</aside>
<p>
고객을 대할 때는 적극적인 자세를 취해야 합니다.
고객을 대할 때는 적극적인 자세를 취해야 합니다.
고객을 대할 때는 적극적인 자세를 취해야 합니다.
고객을 대할 때는 적극적인 자세를 취해야 합니다.
고객을 대할 때는 적극적인 자세를 취해야 합니다.
</p>
<p>
3년 서비스 플랜과 5년 서비스 플랜이 있는데, 어느 것을
3년 서비스 플랜과 5년 서비스 플랜이 있는데, 어느 것을
3년 서비스 플랜과 5년 서비스 플랜이 있는데, 어느 것을
3년 서비스 플랜과 5년 서비스 플랜이 있는데, 어느 것을
3년 서비스 플랜과 5년 서비스 플랜이 있는데, 어느 것을
</p>
<!-- 내용의 아래에 반복적인 문구 -->
<footer>
<p>
<a href="comments.html">25 Comments</a>
</p>
</footer>
</article>
</section>
<!-- 사이드 바 -->
<section id="sidebar">
<h3>이전 글</h3>
<nav>
<ul>
<li><a href="202311.html">2023년11월</a></li>
<li><a href="202312.html">2023년12월</a></li>
<li><a href="202401.html">2024년1월</a></li>
<li><a href="202402.html">2024년2월</a></li>
</ul>
</nav>
</section>
<!-- footer : 저작권이나 사이트 소유자에 대한 정보 -->
<footer id="page_footer">
<p>© Star Blog</p>
<nav>
<ul>
<li><a href="home.html">홈페이지</a></li>
<li><a href="about.html">회사소개</a></li>
<li><a href="address.html">연락처</a></li>
<li><a href="board.html">게시판</a></li>
</ul>
</nav>
</footer>
</div>
</body>
</html>
블로그 만들기
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>IT Blog</title>
<style>
/* 기본 설정 */
*{
margin:0;
padding:0;
}
body{
font-family:맑은 고딕,Malgun Gothic,Gothic,sans-serif;
width:960px;
margin:0 auto;
background:#E6E6E6;
}
#page_wrap{
background:white;
margin:40px 0;
padding:10px 20px;
border-radius:5px;
box-shadow:0 2px 6px rgba(100,100,100,0.3);
}
a{
text-decoration:none;
}
ul{
list-style:none;
}
/* 헤더 구성하기 */
#main_header{
padding:40px 50px;
}
.master-title{
font-size:30px;
color:#181818;
}
.master-desc{
font-size:15px;
font-weight:500;
color:#383838;
}
/* 내비게이션 및 풀다운 메뉴 구성하기 */
#main_nav{
border-top:1px solid #c8c8c8;
border-bottom:1px solid #c8c8c8;
margin-bottom:20px;
height:40px;
}
.pull-left{
float:left;
}
.pull-right{
float:right;
}
/* 메뉴 타이틀 */
.menu-title{
display:block;
height:30px;
line-height:30px;
text-align:center;
padding:5px 20px
}
/* 메뉴를 가로 방향으로 배치 */
.outer-menu-item{
float:left;
position:relative;
}
/* 메뉴 위에 커서를 올려놓았을 때 스타일 */
.outer-menu-item:hover{
background:black;
color:white;
}
/* 커서를 메뉴에 올려 놓았을 때 하위 메뉴 설정 */
.outer-menu-item:hover .inner-menu{
display:block;/* 하위 메뉴 노출 */
}
/* 기본 하위 메뉴 설정 */
.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:100;
text-align:center;
}
/* 하위 메뉴 링크 스타일 적용 */
.inner-menu-item > a{
display:block;
padding:5px 10px;
color:black;
}
.inner-menu-item > a:hover{
background:black;
color:white;
}
/* 검색 양식 추가하기(내비게이션 내부 검색) */
.search-bar{
height:26px;
padding:7px;
}
.input-search{
display:block;
float:left;
background-color:#FFFFFF;
border:1px solid #CCCCCC;
/* border에서 선을 원하는 곳에만 그릴 수 있음 */
/* 상좌 상우 하우 하좌 */
border-radius:15px 0 0 15px;
width:120px;
height:26px;
padding:0 0 0 10px;
font-size:12px;
color:#555555;
}
.input-search:focus{
border-color:rgba(82,168,236,0.8);
/* border 바깥 외곽선 */
outline:0;
box-shadow:0 1px 1px rgba(0,0,0,0.05);
}
/* 검색 버튼 스타일 처리 */
.input-search-submit{
width:50px;
height:26px;
/* 상좌 상우 하우 하좌 */
border-radius:0 15px 15px 0;
border:1px solid #CCCCCC;
margin-left:-1px;
}
/* 본문 */
#content{
overflow:hidden;
}
#main_section{
float:left;
width:710px;
}
#main_aside{
float:right;
width:200px;
}
/* 내용 */
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;
}
/* 사이드 메뉴 */
.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;
}
/* 커서 처리 */
.outer-menu-item, .input-search-submit{
cursor:pointer;
}
</style>
</head>
<body>
<div id="page_wrap">
<!-- 머릿말 시작 -->
<header id="main_header">
<hgroup>
<h1 class="master-title">HTML5 Example Preview</h1>
<h2 class="master-desc">서울동아리</h2>
</hgroup>
</header>
<!-- 머릿말 끝 -->
<!-- 내비게이션 시작 -->
<nav id="main_nav">
<!-- 메뉴 시작 -->
<div class="pull-left">
<!-- main 메뉴 -->
<ul class="outer-menu">
<li class="outer-menu-item">
<span class="menu-title">HTML5</span>
<!-- sub 메뉴 -->
<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>
<!-- sub 메뉴 -->
<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>
<!-- sub 메뉴 -->
<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>
</ul>
</li>
</ul>
</div>
<!-- 메뉴 끝 -->
<!-- 검색 시작 -->
<div class="pull-right">
<div class="search-bar">
<form>
<input type="search" 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">2024년 04월 01일</p>
</div>
<div class="article-body">
<img src="../files/landscape.jpg" width="430" height="280">
<br><br>
HTML과 CSS를 이용해서 웹사이트를 디자인하세요~
<br>
HTML 태그의 속성을 사용하기 보다 css 스타일을 이용해서 디자인 하세요!!
</div>
</article>
<article>
<div class="article-header">
<h1 class="article-title">JavaSrcript의 시작</h1>
<p class="article-date">2024년 04월 02일</p>
</div>
<div class="article-body">
<img src="../files/poster.jpg" width="430" height="280">
<br><br>
자바스크립트는 동적인 데이터를 처리하는 프로그래밍 언어입니다.
<br>
이벤트가 발생하면 자바스크립트는 CSS 스타일을 태그에 적용할 수 있습니다.
</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="#">HTML</a></li>
<li><a href="#">css</a></li>
</ul>
</div>
<div class="aside-list">
<h3>최신 글</h3>
<ul>
<li><a href="#">JDK 설치 방법</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="#">HTML Programming</a>
</footer>
<!-- 꼬리말 끝 -->
</div>
</body>
</html>
