alstjr7437 / Mobile_App

2학년 2학기 모바일 앱 강의

2학년 2학기 모바일 앱 강의

Netlify
운동 소개앱
모바일 자기소개앱
모바일 포트폴리오앱

운동 소개앱                                                 모바일 자기소개앱

모바일 포트폴리오

사용한 framework

jquery mobile
bootstrap
uikit
bulma
echart

페이지별 framework 사용 현황

• index.html
  • jquery mobile
• info.html
  • jquery mobile
  • bulma
• intro.html
  • jquery mobile
  • bootstrap
• career.html
  • jquery mobile
  • echart
• project.html
  • jquery mobile
  • uikit
• project1~8.html
  • jquery mobile

jquery mobile css 사용

<div data-role="page">
    <div data-role="panel">
    </div>
    <div data-role="header">
    </div>
    <div data-role="content">
    </div>
    <div data-role="footer">
    </div>
</div>

기본적으로 모바일 형식을 구현하기 위해 모든 부분에 jquery mobile 사용

bootstrap 사용

각 버튼별 설명 나오기

<p>
	<button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target="#collapseWidthExample1" aria-expanded="false" aria-controls="collapseWidthExample1">
		누구인가
	</button>
</p>
<div style="min-height: 120px;">
	<div class="collapse collapse-horizontal" id="collapseWidthExample1">
		<div class="card card-body" style="width: 300px;">
			저는 동의과학대학교 컴퓨터정보학과를 재학중인 김민석입니다.
		</div>
	</div>
</div>
<p>
	<button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target="#collapseWidthExample2" aria-expanded="false" aria-controls="collapseWidthExample2">
		코딩 계기
	</button>
</p>
<div style="min-height: 120px;">
	<div class="collapse collapse-horizontal" id="collapseWidthExample2">
		<div class="card card-body" style="width: 300px;">
			형제들을 보며 코딩을 배우고 대학에 들어와 코딩을 접하여 현재는 계속 흥미를 가지고 코딩중 입니다.
		</div>
	</div>
</div>

각 버튼을 클릭하면 해당 문구가 나오는 구조입니다.

bulma 사용

카드 만들기

클릭시 옮겨가는 카드 만들기

<a href ="https://github.com/alstjr7437">
	<div class="card">
		<div class="card-content">
			<div class="media">
				<div class="media-left">
				  <figure class="image is-48x48">
						<img src="img/git.jpg" alt="Placeholder image">
					</figure>
				</div>
				<div class="media-content">
					<p class="title is-4">GitHub</p>
					<p class="subtitle is-6">alstjr7437</p>
				</div>
			</div>
		</div>
	</div>
</a>

bulma에서 카드 사용법입니다

uikit 사용

스크롤 버튼 만들기

프로젝트들이 많아서 다시 위로 올리기 귀찮을때
Scroll up을 누를시 제일 위로 올라가는 동작 만들기

<a class="uk-button uk-button-primary" href="#target" uk-scroll>Scroll Up</a>

echart 사용

언어 능력 확인

echart를 이용한 각 학기별 언어 능력 성장을 확인하기

<script src="https://fastly.jsdelivr.net/npm/echarts@5.4.0/dist/echarts.min.js"></script>
<div id="container" style="height: 100%;"></div>
<script type="text/javascript">
	var dom = document.getElementById('container');
	var myChart = echarts.init(dom, null, {
		renderer: 'canvas',
		useDirtyRect: false
	});