CSS 스타일링

<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>GUI 상세디자인 시험 기본 템플릿</title>

<style>
*{
margin:0;
padding:0;
box-sizing:border-box;
}

body{
font-family:Arial, sans-serif;
color:#222;
}

a{
text-decoration:none;
color:#222;
}

.wrap{
width:1200px;
margin:0 auto;
}

/* 헤더 */
.header{
height:80px;
border-bottom:1px solid #ddd;
}

.header .wrap{
height:80px;
}

.logo{
float:left;
font-size:28px;
font-weight:bold;
line-height:80px;
}

.menu{
float:right;
}

.menu a{
display:block;
float:left;
margin-left:50px;
line-height:80px;
font-weight:bold;
}

/* float 해제 */
.clear::after{
content:"";
display:block;
clear:both;
}

/* 메인 비주얼 */
.visual{
width:1200px;
height:350px;
margin:40px auto 0;
background:#eee;
padding:80px 50px;
}

.visual h2{
font-size:40px;
margin-bottom:20px;
}

.visual p{
font-size:18px;
line-height:1.6;
}

/* 섹션 제목 */
.section_title{
width:1200px;
margin:60px auto 30px;
font-size:28px;
}

/* 카드 3개 */
.card_wrap{
width:1200px;
margin:0 auto;
}

.card{
width:380px;
float:left;
margin-right:30px;
border:1px solid #ddd;
}

.card:last-child{
margin-right:0;
}

.img_box{
width:100%;
height:240px;
background:#ccc;
}

.img_box img{
width:100%;
height:100%;
object-fit:cover;
display:block;
}

.card_text{
padding:25px;
}

.card_text h3{
font-size:24px;
margin-bottom:15px;
}

.card_text p{
font-size:15px;
line-height:1.6;
color:#555;
}

/* 2단 정보 */
.info_wrap{
width:1200px;
margin:70px auto 0;
}

.info_box{
width:580px;
height:220px;
padding:35px;
}

.info_left{
float:left;
background:#eee;
}

.info_right{
float:right;
background:#333;
color:#fff;
}

.info_box h3{
font-size:26px;
margin-bottom:20px;
}

.info_box p{
font-size:15px;
line-height:1.7;
}

/* 푸터 */
.footer{
height:100px;
margin-top:70px;
background:#111;
color:#fff;
text-align:center;
line-height:100px;
}
</style>
</head>

<body>

<!-- 헤더 -->
<div class="header">
<div class="wrap clear">
<div class="logo">
<a href="#">LOGO</a>
</div>

<div class="menu">
<a href="#">CLASS</a>
<a href="#">GALLERY</a>
<a href="#">TOOLS</a>
<a href="#">NEWS</a>
</div>
</div>
</div>

<!-- 메인 비주얼 -->
<div class="visual">
<h2>GUI DETAIL DESIGN</h2>
<p>
화면 구성 요소를 정확하게 배치하고<br>
간격과 정렬을 맞추는 상세 디자인 연습입니다.
</p>
</div>

<!-- 카드 섹션 -->
<h2 class="section_title">Skill Categories</h2>

<div class="card_wrap clear">

<div 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>
</div>

<div 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>
</div>

<div 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>
</div>

</div>

<!-- 2단 정보 영역 -->
<div class="info_wrap clear">
<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>
</div>

<!-- 푸터 -->
<div class="footer">
COPYRIGHT 2026. CURSAMAN. ALL RIGHTS RESERVED.
</div>

</body>
</html>