210604 UIUX Web設計CSS練習15
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>훈련내용 예제</title>
<style>
* {
margin: 0;
padding: 0;
}
body {
font-family: "맑은 고딕";
font-size: 16px;
line-height: 1.5;
}
#contents {
margin: 50px auto;
padding: 50px;
width: 800px;
}
/* title div */
.titleDiv {
padding: 50px;
border: 20px solid #2f62cb;
text-align: center;
}
.titleDiv h1 {
font-size: 50px;
}
.titleDiv h3 {
padding-bottom: 30px;
font-size: 30px;
font-weight: 400;
color: #2f62cb;
}
/* first div */
.firstDiv {
margin: 50px 0px;
}
.titleDiv p {
padding-bottom: 10px;
}
.titleDiv span {
background-color: #c9e4ff;
}
.firstDiv .title {
margin-bottom: 10px;
padding: 10px 20px;
font-size: 18px;
font-weight: bold;
color: #fff;
background-color: #2f62cb;
}
.firstDiv ol{
margin: 25px 50px;
}
.firstDiv .line {
color: #2f62cb;
text-decoration: underline;
}
/* second div */
.secondDiv .title{
margin-bottom: 10px;
padding: 10px 20px;
font-size: 18px;
font-weight: bold;
color: #fff;
background-color: #2f62cb;
}
.secondDiv .con {
padding: 20px 30px;
background-color: #eee;
}
.secondDiv ul{
margin: 0px 25px;
padding: 20px 30px;
}
/* thirdDiv */
.thirdDiv .title {
margin-top: 50px;
margin-bottom: 10px;
padding: 10px 20px;
font-size: 18px;
font-weight: bold;
color: #fff;
background-color: #2f62cb;
}
.thirdDiv table {
width: 100%;
border-top: 3px solid #2f62cb;
border-collapse: collapse;
}
.thirdDiv th {
padding: 20px 40px;
border: 1px solid #ddd;
color: #2f62cb;
background-color: #eee;
}
.thirdDiv td {
padding: 15px 0;
border: 1px solid #ddd;
text-align: center;
}
</style>
</head>
<body>
<div id="contents">
<div class="titleDiv">
<h1>반응형퍼블리싱 & 웹디자인</h1>
<h3>Publishing & Web Design</h3>
<p>
다양한 종류의 디지털환경에서 제공되는 콘텐츠를
<span>사용목적과 용도에 맞게 최적화하여 구현하고 사용자 인터랙티비티,
반응형인터페이스를 디자인</span> 할 수 있다.
</p>
</div>
<div class="firstDiv">
<p class="title">훈련목표</p>
<ol>
<li>도출된 콘셉트의 방향에 맞게 프로토타입 제작 및 사용성 테스트, 객관적 사용성 정의 및 분석능력을 기르고 시각화 작업능력을 함양할 수 있다.</li>
<li>프로토타입 제작을 바탕으로 한 정보구조 및 설계를 통해 디자인 구성요소를 설계 및 디자인 할 수 있다.</li>
<li>디자인 구성요소 제작을 통한 <span class="line">콘텐츠 정보 설계 및 디자인</span>을 할 수 있다.</li>
<li>컴퓨터 프로그램을 사용하여 여러가지 디자인 시안을 제안하고 <span class="line">심화된 시안제작 능력을 함양</span>할 수 있다.</li>
<li>만들어진 작업물의 보완사항을 파악하고 보완사항을 수정해 완성도를 높이는 능력을 함양할 수 있다.</li>
<li>가상의 사용자를 설정하여 서비스 경험 과정이 새로운 서비스 아이디어의 핵심 요소가 드러날 수 있도록 서비스 단게별로 시나리오를 개발하는 능력을 함양할 수 있다.</li>
<li>UI요구사항을 확인하여 <span class="line">화면을 구현하고 GUI를 디자인하는 능력을 함양</span>할 수 있다.</li>
<li>표준마크업 jQuery를 활용하여 안정적이고 퀄리티가 높은 반응형 화면을 구현할 수 있다.</li>
<li>여러가지 디자인 시안을 응용하여 최종결과물을 완성하는 능력을 함양할 수 있다.</li>
</ol>
</div>
<div class="secondDiv">
<p class="title">훈련내용의 특징</p>
<p class="con">
실무에서 필요로 하는 웹디자인의 이론을 기반으로 디자인 콘셉트와 전략을 기획, 설계, 디자인하는
전반적인 교육을 다르고 있으며, 반응형과 jQuery 교과를 이수하여 신속하게 실무에 적응할 수 있도록
훈련내용을 구성
</p>
<ul>
<li>최신 기자재 위주의 풍부한 장비 구비</li>
<li>직업훈련분야에 특화된 전문조직과 체계적인 사업수행 능력보유</li>
<li>디자인 전문인력을 공급하여 지역혁신 기술인력 양성</li>
</ul>
</div>
<div class="thirdDiv">
<p class="title">커리큘럼</p>
<table>
<tbody>
<tr>
<th>교과목</th> <th>교육내용</th> <th>교육시간</th>
</tr>
<tr>
<th rowspan="2">시안디자인</th> <td>시안디자인 개발응용</td> <td>80</td>
</tr>
<tr>
<td>시안디자인 개발심화</td> <td>80</td>
</tr>
<tr>
<th rowspan="2">UI디자인</th> <td>스마트문화앱 UX설계</td> <td>100</td>
</tr>
<tr>
<td>스마트문화앱 UI디자인</td> <td>200</td>
</tr>
<tr>
<th rowspan="2">디자인구성요소</th> <td>디자인구성 요소설계</td> <td>100</td>
</tr>
<tr>
<td>디자인구성 요소제작</td> <td>60</td>
</tr>
<tr>
<th rowspan="2">프로토타입</th> <td>프로토타입 기초데이터수집 및 스케치</td> <td>45</td>
</tr>
<tr>
<td>프로토타입 제작 및 사용성테스트</td> <td>45</td>
</tr>
</tbody>
</table>
</div>
</div>
</body>
</html>Reference
この問題について(210604 UIUX Web設計CSS練習15), 我々は、より多くの情報をここで見つけました https://velog.io/@itisit210/210604-UIUX-WebDesign-CSS-연습15テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol