Netlify
운동 소개앱
모바일 자기소개앱
모바일 포트폴리오앱
jquery mobile
bootstrap
uikit
bulma
echart
- 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
<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 사용
<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>
각 버튼을 클릭하면 해당 문구가 나오는 구조입니다.
<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에서 카드 사용법입니다
프로젝트들이 많아서 다시 위로 올리기 귀찮을때
Scroll up을 누를시 제일 위로 올라가는 동작 만들기
<a class="uk-button uk-button-primary" href="#target" uk-scroll>Scroll Up</a>
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
});