방법 1. 외부 CSS 파일로 정의하기
<link> 태그 사용하기
외부 스타일 시트 파일을 연결할 때 <link> 태그를 이용하는 방법을 가장 많이 사용한다
<link> 태그는 <head> 태그와 </head> 태그 사이에 삽입한다
기본형식
<link rel="stylesheet" media="미디어 쿼리 조건" href="css 파일 경로" >
Ex.
css 폴더에 인쇄용 스타일 시트 print.css를 만들어 놓은 경우
<link rel="stylesheet" media="print" href="css/print.css">
화면 너비가 768px 이하일 때 적용할 태블릿용 스타일 시트 파일을 만든 경우
<link rel="stylesheet" media="screen and (max-width:768px)" href="css/tablet.css">
@import 구문 사용하기
외부 CSS 파일을 연결할 때 <link> 태그 대신 @import 구문을 사용할 수 있다
이 구문은 CSS를 정의하는 <style> 태그와 </style> 태그 사이에서 사용한다
기본 형식
@import url(css 파일 경로) 미디어 쿼리 조건
예시
@import url("css/tablet.css") screen and (min-width:321px) and (max-width:768px);
방법 2. 웹 문서에서 직접 정의하기
<style> 태그에서 조건 지정하기
기본 형식
<style media="미디어 쿼리 조건">
스타일 규칙들
</style>
예시 / 최대 너비가 320px 일때 배경색을 바꾸는 미디어 쿼리
<style media="screen and (max-width:320px)">
body{
background-color: orange;
}
</style>
@media 구문으로 조건 지정하기
기본 형식
<style>
@media 미디어 쿼리 조건 {
스타일 규칙들
}
</style>
예시 / 화면 너비가 320px 이하일 때 배경색을 주황색으로 바꾸는 미디어 쿼리
<style>
@media screen and(max-width:320px){
body{
background-color:orange;
}
}
</style>
반응형 내비게이션 만들기
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>반응형 내비게이션</title>
<meta name="viewport" content = "width=device-width,initial-scale=1,maximum-scale=1">
<style>
*{
margin:0;
padding:0;
box-sizing:border-box;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
}
body{
background:url("windmill.jpg")no-repeat right bottom fixed;
background-size:cover;
}
a:link,a:hover,a:visited{
color:#fff;
text-decoration:none;
text-shadow:1px 1px 0 #283744;
}
nav{
width:100%;
height:auto;
background:#34495e;
font-size:1.2em;
font-weight:bold;
position: relative;
}
nav ul{
display:none;
height:auto;
}
nav ul li{
display:block;
width:100%;
text-align:center;
border-bottom: 1px soild #576979;
}
nav ul li a{
line-height:50px;
}
nav a#trigger{
display:block;
background-color:#283744;
width:100%;
padding-left:15px;
line-height:40px;
position:relative;
}
nav a#trigger::after{
content:"";
background:url('nav.png')no-repeat;
width:30px;
height:30px;
display:inline-block;
position:absolute;
right:15px;
top:10px;
}
@media screen and (min-width:721px){
nav{
height:40px;
border-bottom:2px soild #34495e;
}
nav ul{
display:block;
width:720px;
height:40px;
padding:0;
margin:0 auto;
}
nav ul li{
display:inline-block;
width:120px;
border-bottom:0;
border-right:1px solid #576979;
margin-right:-6px;
}
nav ul li:last-child{
border-right:0;
}
nav ul li a{
font-size:1em;
line-height: 40px;
}
nav a#trigger{
display:none;
}
}
</style>
</head>
<body>
<nav>
<ul>
<li><a href = "#">HOME</a></li>
<li><a href = "#">ABOUT</a></li>
<li><a href = "#">WEB</a></li>
<li><a href = "#">DESIGN</a></li>
<li><a href = "#">MAP</a></li>
<li><a href = "#">CONTACT</a></li>
</ul>
<a href = "#" id = "trigger">MENU</a>
</nav>
<script src="js/jquery-2.2.4.min.js"></script>
<script>
$(function(){
var trigger = $('#trigger');
var menu = $('nav ul');
$(trigger).on('click',function(e){
e.preventDefault();
menu.slideToggle();
});
$(window).resize(function(){
var w=$(window).width();
if(w>320 && menu.is(':hidden')){
menu.removeAttr('style');
}
});
});
</script>
</body>
</html>
'프론트 개발' 카테고리의 다른 글
| [ FE ] Do it! 프런트엔드 웹디자인 입문 08-1 원페이지 사이트 만들기 (0) | 2026.02.19 |
|---|---|
| [ FE ] Do it! 프런트엔드 웹디자인 입문 07-4 가변 동영상 (0) | 2026.02.18 |
| [ FE ] Do it! 프런트엔드 웹디자인 입문 07-3 가변 이미지 (0) | 2026.02.17 |
| [ FE ] Do it! 프런트엔드 웹디자인 입문 07-1 뷰포트와 미디어 쿼리 알아보기 (0) | 2026.02.16 |
| [ FE ] Web1 HTML (0) | 2026.02.15 |