<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>GUI 상세디자인 시험 기본 템플릿</title>
<style>
*{
margin:0;
padding:0;
box-sizing:border-box;
}
body{
font-family:Arial, sans-serif;
color:#222;
background:#fff;
}
a{
text-decoration:none;
color:#222;
}
.wrap,
.visual,
.section_title,
.card_wrap,
.info_wrap{
width:90%;
max-width:1200px;
margin-left:auto;
margin-right:auto;
}
/* 헤더 */
.header{
border-bottom:1px solid #ddd;
position:sticky;
top:0;
background:#fff;
z-index:100;
}
.header .wrap{
min-height:80px;
display:flex;
justify-content:space-between;
align-items:center;
position:relative;
}
.logo{
font-size:28px;
font-weight:bold;
}
/* PC 메뉴 */
.menu{
display:flex;
gap:50px;
}
.menu a{
font-weight:bold;
transition:0.3s;
}
.menu a:hover{
color:#666;
}
/* 햄버거 버튼 */
.ham{
width:35px;
height:28px;
display:none;
flex-direction:column;
justify-content:space-between;
cursor:pointer;
}
.ham span{
width:100%;
height:4px;
background:#222;
border-radius:10px;
transition:0.3s;
}
/* 메인 비주얼 */
.visual{
margin-top:40px;
min-height:420px;
background:#eee;
padding:100px 60px;
display:flex;
flex-direction:column;
justify-content:center;
}
.visual h2{
font-size:80px;
margin-bottom:20px;
line-height:1.1;
}
.visual p{
font-size:18px;
line-height:1.8;
color:#555;
}
/* 섹션 제목 */
.section_title{
margin-top:80px;
margin-bottom:30px;
font-size:30px;
}
/* 카드 */
.card_wrap{
display:flex;
gap:30px;
}
.card{
flex:1;
border:1px solid #ddd;
background:#fff;
transition:0.3s;
}
.card:hover{
transform:translateY(-8px);
box-shadow:0 10px 30px rgba(0,0,0,0.08);
}
.img_box{
width:100%;
height:240px;
overflow:hidden;
background:#ccc;
}
.img_box img{
width:100%;
height:100%;
object-fit:cover;
display:block;
transition:0.5s;
}
.card:hover img{
transform:scale(1.05);
}
.card_text{
padding:25px;
}
.card_text h3{
font-size:24px;
margin-bottom:15px;
}
.card_text p{
font-size:15px;
line-height:1.7;
color:#555;
}
/* 정보 영역 */
.info_wrap{
margin-top:80px;
display:flex;
gap:30px;
}
.info_box{
flex:1;
min-height:240px;
padding:40px;
}
.info_left{
background:#f2f2f2;
}
.info_right{
background:#222;
color:#fff;
}
.info_box h3{
font-size:28px;
margin-bottom:20px;
}
.info_box p{
font-size:15px;
line-height:1.8;
}
/* 푸터 */
.footer{
margin-top:80px;
background:#111;
color:#fff;
text-align:center;
padding:40px 20px;
font-size:14px;
}
/* 태블릿 */
@media screen and (max-width:768px){
/* 햄버거 표시 */
.ham{
display:flex;
}
/* 모바일 메뉴 */
.menu{
position:absolute;
top:80px;
left:0;
width:100%;
background:#fff;
border-top:1px solid #ddd;
flex-direction:column;
gap:0;
display:none;
}
.menu.active{
display:flex;
}
.menu a{
padding:22px;
border-bottom:1px solid #eee;
}
.visual{
padding:80px 40px;
min-height:350px;
}
.visual h2{
font-size:56px;
}
.card_wrap{
flex-direction:column;
}
.info_wrap{
flex-direction:column;
}
}
/* 모바일 */
@media screen and (max-width:480px){
.logo{
font-size:24px;
}
.visual{
padding:60px 25px;
min-height:300px;
}
.visual h2{
font-size:38px;
}
.visual p{
font-size:15px;
}
.section_title{
font-size:24px;
margin-top:60px;
}
.img_box{
height:200px;
}
.card_text{
padding:20px;
}
.card_text h3{
font-size:22px;
}
.info_box{
padding:30px;
}
.info_box h3{
font-size:24px;
}
.footer{
font-size:12px;
}
}
</style>
</head>
<body>
<!-- 헤더 -->
<header class="header">
<div class="wrap">
<h1 class="logo">
<a href="#">LOGO</a>
</h1>
<!-- 햄버거 버튼 -->
<div class="ham" id="ham">
<span></span>
<span></span>
<span></span>
</div>
<!-- 메뉴 -->
<nav class="menu" id="menu">
<a href="#">CLASS</a>
<a href="#">GALLERY</a>
<a href="#">TOOLS</a>
<a href="#">NEWS</a>
</nav>
</div>
</header>
<!-- 메인 비주얼 -->
<section class="visual">
<h2>
GUI DETAIL<br>
DESIGN
</h2>
<p>
화면 구성 요소를 정확하게 배치하고<br>
간격과 정렬을 맞추는 상세 디자인 연습입니다.
</p>
</section>
<!-- 카드 섹션 -->
<h2 class="section_title">Skill Categories</h2>
<section class="card_wrap">
<article class="card">
<div class="img_box">
<img src="https://goyos.kr/img/category_design.png" alt="">
</div>
<div class="card_text">
<h3>DESIGN</h3>
<p>
Figma, Photoshop, Illustrator를 활용한
디자인 영역입니다.
</p>
</div>
</article>
<article class="card">
<div class="img_box">
<img src="https://goyos.kr/img/category_pub.png" alt="">
</div>
<div class="card_text">
<h3>PUBLISHING</h3>
<p>
HTML과 CSS를 사용하여
웹 페이지 구조를 구현합니다.
</p>
</div>
</article>
<article class="card">
<div class="img_box">
<img src="https://goyos.kr/img/category_dev.png" alt="">
</div>
<div class="card_text">
<h3>DEVELOPMENT</h3>
<p>
웹 서비스 구현을 위한
기본 개발 구조를 이해합니다.
</p>
</div>
</article>
</section>
<!-- 정보 영역 -->
<section class="info_wrap">
<div class="info_box info_left">
<h3>About Class</h3>
<p>
GUI 상세디자인은 화면 구조,
여백, 정렬, 이미지 배치 등을
정확하게 구현하는 과정입니다.
</p>
</div>
<div class="info_box info_right">
<h3>Design Point</h3>
<p>
먼저 큰 박스를 만들고
작은 요소를 순서대로 배치하면
안정적인 화면을 만들 수 있습니다.
</p>
</div>
</section>
<!-- 푸터 -->
<footer class="footer">
COPYRIGHT 2026. CURSAMAN.
ALL RIGHTS RESERVED.
</footer>
<script>
/* 햄버거 메뉴 */
const ham = document.getElementById('ham');
const menu = document.getElementById('menu');
ham.addEventListener('click', function(){
menu.classList.toggle('active');
});
</script>
</body>
</html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>GUI 상세디자인 시험 기본 템플릿</title>
<style>
*{
margin:0;
padding:0;
box-sizing:border-box;
}
body{
font-family:Arial, sans-serif;
color:#222;
background:#fff;
}
a{
text-decoration:none;
color:#222;
}
.wrap,
.visual,
.section_title,
.card_wrap,
.info_wrap{
width:90%;
max-width:1200px;
margin-left:auto;
margin-right:auto;
}
/* 헤더 */
.header{
border-bottom:1px solid #ddd;
position:sticky;
top:0;
background:#fff;
z-index:100;
}
.header .wrap{
min-height:80px;
display:flex;
justify-content:space-between;
align-items:center;
position:relative;
}
.logo{
font-size:28px;
font-weight:bold;
}
/* PC 메뉴 */
.menu{
display:flex;
gap:50px;
}
.menu a{
font-weight:bold;
transition:0.3s;
}
.menu a:hover{
color:#666;
}
/* 햄버거 버튼 */
.ham{
width:35px;
height:28px;
display:none;
flex-direction:column;
justify-content:space-between;
cursor:pointer;
}
.ham span{
width:100%;
height:4px;
background:#222;
border-radius:10px;
transition:0.3s;
}
/* 메인 비주얼 */
.visual{
margin-top:40px;
min-height:420px;
background:#eee;
padding:100px 60px;
display:flex;
flex-direction:column;
justify-content:center;
}
.visual h2{
font-size:80px;
margin-bottom:20px;
line-height:1.1;
}
.visual p{
font-size:18px;
line-height:1.8;
color:#555;
}
/* 섹션 제목 */
.section_title{
margin-top:80px;
margin-bottom:30px;
font-size:30px;
}
/* 카드 */
.card_wrap{
display:flex;
gap:30px;
}
.card{
flex:1;
border:1px solid #ddd;
background:#fff;
transition:0.3s;
}
.card:hover{
transform:translateY(-8px);
box-shadow:0 10px 30px rgba(0,0,0,0.08);
}
.img_box{
width:100%;
height:240px;
overflow:hidden;
background:#ccc;
}
.img_box img{
width:100%;
height:100%;
object-fit:cover;
display:block;
transition:0.5s;
}
.card:hover img{
transform:scale(1.05);
}
.card_text{
padding:25px;
}
.card_text h3{
font-size:24px;
margin-bottom:15px;
}
.card_text p{
font-size:15px;
line-height:1.7;
color:#555;
}
/* 정보 영역 */
.info_wrap{
margin-top:80px;
display:flex;
gap:30px;
}
.info_box{
flex:1;
min-height:240px;
padding:40px;
}
.info_left{
background:#f2f2f2;
}
.info_right{
background:#222;
color:#fff;
}
.info_box h3{
font-size:28px;
margin-bottom:20px;
}
.info_box p{
font-size:15px;
line-height:1.8;
}
/* 푸터 */
.footer{
margin-top:80px;
background:#111;
color:#fff;
text-align:center;
padding:40px 20px;
font-size:14px;
}
/* 태블릿 */
@media screen and (max-width:768px){
/* 햄버거 표시 */
.ham{
display:flex;
}
/* 모바일 메뉴 */
.menu{
position:absolute;
top:80px;
left:0;
width:100%;
background:#fff;
border-top:1px solid #ddd;
flex-direction:column;
gap:0;
display:none;
}
.menu.active{
display:flex;
}
.menu a{
padding:22px;
border-bottom:1px solid #eee;
}
.visual{
padding:80px 40px;
min-height:350px;
}
.visual h2{
font-size:56px;
}
.card_wrap{
flex-direction:column;
}
.info_wrap{
flex-direction:column;
}
}
/* 모바일 */
@media screen and (max-width:480px){
.logo{
font-size:24px;
}
.visual{
padding:60px 25px;
min-height:300px;
}
.visual h2{
font-size:38px;
}
.visual p{
font-size:15px;
}
.section_title{
font-size:24px;
margin-top:60px;
}
.img_box{
height:200px;
}
.card_text{
padding:20px;
}
.card_text h3{
font-size:22px;
}
.info_box{
padding:30px;
}
.info_box h3{
font-size:24px;
}
.footer{
font-size:12px;
}
}
</style>
</head>
<body>
<!-- 헤더 -->
<header class="header">
<div class="wrap">
<h1 class="logo">
<a href="#">LOGO</a>
</h1>
<!-- 햄버거 버튼 -->
<div class="ham" id="ham">
<span></span>
<span></span>
<span></span>
</div>
<!-- 메뉴 -->
<nav class="menu" id="menu">
<a href="#">CLASS</a>
<a href="#">GALLERY</a>
<a href="#">TOOLS</a>
<a href="#">NEWS</a>
</nav>
</div>
</header>
<!-- 메인 비주얼 -->
<section class="visual">
<h2>
GUI DETAIL<br>
DESIGN
</h2>
<p>
화면 구성 요소를 정확하게 배치하고<br>
간격과 정렬을 맞추는 상세 디자인 연습입니다.
</p>
</section>
<!-- 카드 섹션 -->
<h2 class="section_title">Skill Categories</h2>
<section class="card_wrap">
<article class="card">
<div class="img_box">
<img src="https://goyos.kr/img/category_design.png" alt="">
</div>
<div class="card_text">
<h3>DESIGN</h3>
<p>
Figma, Photoshop, Illustrator를 활용한
디자인 영역입니다.
</p>
</div>
</article>
<article class="card">
<div class="img_box">
<img src="https://goyos.kr/img/category_pub.png" alt="">
</div>
<div class="card_text">
<h3>PUBLISHING</h3>
<p>
HTML과 CSS를 사용하여
웹 페이지 구조를 구현합니다.
</p>
</div>
</article>
<article class="card">
<div class="img_box">
<img src="https://goyos.kr/img/category_dev.png" alt="">
</div>
<div class="card_text">
<h3>DEVELOPMENT</h3>
<p>
웹 서비스 구현을 위한
기본 개발 구조를 이해합니다.
</p>
</div>
</article>
</section>
<!-- 정보 영역 -->
<section class="info_wrap">
<div class="info_box info_left">
<h3>About Class</h3>
<p>
GUI 상세디자인은 화면 구조,
여백, 정렬, 이미지 배치 등을
정확하게 구현하는 과정입니다.
</p>
</div>
<div class="info_box info_right">
<h3>Design Point</h3>
<p>
먼저 큰 박스를 만들고
작은 요소를 순서대로 배치하면
안정적인 화면을 만들 수 있습니다.
</p>
</div>
</section>
<!-- 푸터 -->
<footer class="footer">
COPYRIGHT 2026. CURSAMAN.
ALL RIGHTS RESERVED.
</footer>
<script>
/* 햄버거 메뉴 */
const ham = document.getElementById('ham');
const menu = document.getElementById('menu');
ham.addEventListener('click', function(){
menu.classList.toggle('active');
});
</script>
</body>
</html>
#스타일시트 반응형 연습1