TIL 0402

먼지·2024년 4월 2일

Today I Learned

목록 보기

32/89

뷰포트

스마트폰 화면에서 실제 내용이 표시되는 영역

속성	설명	사용 가능한 값	기본값
width	뷰포트의 넓이	device-width 또는 크기	브라우저 기본 값
height	뷰포트의 높이	device-height 또는 크기	브라우저 기본 값
user-scalable	확대/축소 가능 여부	yes 또는 no	yes
initial-scale	초기 확대/축소	값 1~10	1
minimum-scale	최소 확대/축소	값 1~10	0.25
maximum-scale	최대 확대/축소	값 1~10	1.6

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1"> 
<title>media query</title>
<style type="text/css">
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>
</head>
<body>
<h1>미디어 쿼리</h1>
<ul>
	<li>서울</li>
	<li>부산</li>
	<li>대구</li>
	<li>광주</li>
	<li>인천</li>
</ul>
</body>
</html>

시맨틱 태그

헤더를 정의할 때 사용ㅡ 사이트에 대한 소개 정보나 메인 메뉴, 사이트 로고 등이 포함

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>시맨틱 태그의 사용</title>
</head>
<body>
	<header>
		<!-- 제목과 부제목을 묶어주는 역할 -->
		<hgroup>
		    <!-- 제목 -->
			<h1>서울 고등학교 홈페이지</h1>
			<!-- 부제목 -->
			<h4>우리들만의 즐거운 공간</h4>
		</hgroup>
		<!-- 사이트의 메뉴나 링크 같은 내비게이션 요소들이 포함 -->
		<nav>
			<ul>
				<li><a href="1.html">1학년</a></li>
				<li><a href="2.html">2학년</a></li>
				<li><a href="3.html">3학년</a></li>
			</ul>
		</nav>
	</header>
	<!-- 실제 문서 내용이 들어감 -->
	<section>
		<header><h3>이달의 인물</h3></header>
		<!-- 문서 내용이 많을 경우 여러 개의 <article> 요소로 나눌 수 있음 -->
		<article>
			교내 영상제에서 <strong>최우수상</strong>을 받은 
			<mark>이빛나양</mark>을 만나봅니다.
		</article>
	</section>
	<!-- 작성자 정보나 저작권 정보, 또는 관련 문서 링크 등 부가 정보들을 담고
	     있음. 주로 문서 하단에 배치 -->
	<footer>
		<address>서울시 강남구 역삼동</address>
		&copy; 서울고등학교
	</footer>     
</body>
</html>

스타일 추가

<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Blog Site</title>
<style type="text/css">
/*여백 및 기본적인 폰트를 설정*/
body{
	margin:0;
	padding:0;
	font-family:Arial,"MS Trebuchet",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 class="post">
			<!-- 내용의 작은 제목 -->
			<header>
				<h2>얼마나 많이 기록해 둬야 되겠습니까?</h2>
				<p>Posted by Brain on 2024.04.02</p>
			</header>
			<!-- aside : 인용구, 덧붙이고 싶은 생각, 관련된 링크 -->
			<aside>
				<p>&quot;물건을 팔 때는 거절할 기회를 주어선 안 됩니다.&quot;</p>
			</aside>
			<p>
				고객을 대할 때는 적극적인 자세를 취해야 합니다.
				고객을 대할 때는 적극적인 자세를 취해야 합니다.
				고객을 대할 때는 적극적인 자세를 취해야 합니다.
				고객을 대할 때는 적극적인 자세를 취해야 합니다.
				고객을 대할 때는 적극적인 자세를 취해야 합니다.
				고객을 대할 때는 적극적인 자세를 취해야 합니다.
			</p>
			<p>
				3년 서비스 플랜과 5년 서비스 플랜이 있는데, 어느 것을 
				3년 서비스 플랜과 5년 서비스 플랜이 있는데, 어느 것을 
				3년 서비스 플랜과 5년 서비스 플랜이 있는데, 어느 것을 
				3년 서비스 플랜과 5년 서비스 플랜이 있는데, 어느 것을 
				3년 서비스 플랜과 5년 서비스 플랜이 있는데, 어느 것을 
				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="20241.html">2024년1월</a></li>
				<li><a href="20242.html">2024년2월</a></li>
				<li><a href="20243.html">2024년3월</a></li>
				<li><a href="20244.html">2024년4월</a></li>
			</ul>
		</nav>
	</section>
	<!-- footer : 저작권이나 사이트 소유자에 대한 정보 등 -->
	<footer id="page_footer">
		<p>&copy; 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>

실습 1

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Cafe</title>
<style type="text/css">
/*폰트 지정*/
@import url(http://fonts.googleapis.com/earlyaccess/jejugothic.css);
@import url(http://fonts.googleapis.com/css?family=Oleo+Script);
/*기본 설정*/
*{
	margin:0;
	padding:0;
}
body{
	font-family:"Jeju Gothic",serif;
}
#container{
	width:995px;
	margin:0 auto;
	border:1px solid #ccc;
}
/*header 스타일 지정*/
header{
	width:100%;
	height:500px;
	background:url(../files/header.jpg) center no-repeat;
	background-size:cover;
}
/*메뉴*/
nav{
	height:50px;
	background:#000;
}
nav ul#main_nav{
	list-style:none;
	padding:10px;
	text-align:center;
}
nav ul#main_nav li{
	display:inline-block;
	font-family:"맑은 고딕",돋움;
	font-size:0.9em;
	margin:5px 15px;
}
nav a{
	text-decoration:none;
}
nav a:link,nav a:visited{
	color:#FFF;
}
nav a:active{
	color:yellow;
}
/*내용*/
section{
	height:280px;
	padding:30px;
}
section:nth-child(odd){ /*홀수 section에 스타일 적용*/
	background:#eee;
}
.page-title h1{
	font-size:1.8em;
}
.content{
	padding:30px;
}
.content ol{
	margin-top:20px;
}
.content ol li{
	font-size:12pt;
	line-height: 2;
}
#intro .photo, #map .photo{
	float:left;
	margin-right:5%;
}
#choice .photo{
	float:right;
	margin-right:5%;
}
.text{
	float:left;
	width:46%;
}
.text p {
	font-size:1.3em;
	line-height:2.5;
}
/*footer 스타일 지정*/
footer{
	width:100%;
	height:100px;
	background:#000;
}
footer p{ 
	font-family:'Oleo Script',cursive;
	font-size:1.5em;
	line-height: 100px;
	color:white;
	text-align:center;
}
</style>
</head>
<body>
<div id="container">
	<!-- 머리말 시작 -->
	<header>
		<nav>
			<ul id="main_nav">
				<li><a href="#intro">카페 소개</a></li>
				<li><a href="#map">오시는 길</a></li>
				<li><a href="#choice">이 달의 추천</a></li>
			</ul>
		</nav>
	</header>
	<!-- 머리말 끝 -->
	<!-- 내용 시작 -->
	<section id="intro">
		<div class="page-title">
			<h1>카페 소개</h1>
		</div>
		<div class="content">
			<div class="photo">
				<img src="../files/coffee.jpg" alt="커피 이미지">
			</div>
			<div class="text">
				<p>영업 시간 : 오전 9시 ~ 밤 10시</p>
				<p>
					휴무 : 매주 수요일<br>
					<i><small>(수요일이 공휴일일 경우 수요일 영업, 다음날 휴무)</small></i>
				</p>
			</div>
		</div>
	</section>
	
	<section id="map">
		<div class="page-title">
			<h1>오시는 길</h1>
		</div>
		<div class="content">
			<div class="photo">
				<img src="../files/map.jpg" 
				     alt="사계 포구에서 서쪽 방향으로 000미터 진행">
			</div>
			<div class="text">
				<p>서귀포시 안덕면 사계리 000-000</p>
				<p>제주 올레 10코스 산방산 근처</p>
			</div>
		</div>
	</section>
	
	<section id="choice">
		<div class="page-title">
			<h1>이 달의 추천</h1>
		</div>
		<div class="content">
			<div class="photo">
				<img src="../files/ice.jpg" alt="아이스 커피">
			</div>
			<div class="text">
				<h2>핸드드립 아이스커피</h2>
				<ol>
					<li>1인분 기준으로 각얼음 5조각(한 조각의 20cc)를 넣고 추출을 시작한다.</li>
					<li>평상시 보다 원두의 양은 2배 정도 (20g)과 추출액은 얼음 포함해서 200cc까지 내린다.</li>
					<li>아이스 잔에 얼음 6~7개 섞어서 시원하게 마신다.</li>
				</ol>
			</div>
		</div>
	</section>
	<!-- 내용 끝 -->
	<!-- 꼬리말 시작 -->
	<footer>
		<p>My times with Coffee</p>
	</footer>
	<!-- 꼬리말 끝 -->
</div>
</body>
</html>

실습 2

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>IT Blog</title>
<style type="text/css">
/*기본 설정*/
*{
	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-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">JavaScript의 시작</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="#">HTML5 Programming</a>
	</footer>
	<!-- 꼬리말 끝 -->
</div>
</body>
</html>