PWA (Progressive Web App) 프로그레시브 웹 앱 웹 앱과 네이티브 앱의 장점을 모두 제공하는 진보된 형태의 웹 애플리케이션 개발 Google I/O 2016에서 처음 소개 오프라인에서 동작설치가 가능쉬운 동기화푸시 알림, 등을 만족해야한다. 출처 - https://developer.mozilla.org/ko/docs/Web/Progressive_web_apps/Introduction
설치가 쭉쭉쭉 되고, 완료되면
위와 같이 디렉토리와 파일들이 생성된 걸 볼 수 있다.
--template cra-template-pwa로 생성된 프로젝트와 기본 cra와 다른점 중 하나는 service-worker 의 유무이다.
pwa에 관련된 포스팅이 아니므로 우선 넘어가기로 하고, 정상적으로 실행이 되는지 npm run start를 해보자.
- subtitle / subdescription / sublink 에 들어갈 문구들을 각 태그들의 span 안에 넣어 줍니다.
<div class="textcontent">
<div class="subtitle">
<span>
Stock price prediction model
</span>
</div>
<div class="subdescription">
<span>
-The domestic stock price prediction model using Keras and Tensorflow trains RNN and LSTM neural network model with time series data to predict the next price according to period
</span>
</div>
<div class="sublink">
<span>
Link - https://github.com
</span>
</div>
</div>
- link 부분은 우선 임의로 넣어 놨습니다.
- 이부분을 a태그로 감싸 주겠습니다.
<span>
<a href="">
Link - https://github.com
</a>
</span>
- 잘 들어 갔네요.
3. content 태그 추가
- 이제 만들어 놓은 content태그를 복사하여 2개 더 추가 해주고 안에 있는 내용을 수정해 줍니다.
<div class="content">
<div class="image">
<img src="../static/img/portfolio/Trading_predict_price.png" alt="주식가격예측">
</div>
<div class="textcontent">
<div class="subtitle">
<span>
Stock price prediction model
</span>
</div>
<div class="subdescription">
<span>
-The domestic stock price prediction model using Keras and Tensorflow trains RNN and LSTM neural network model with time series data to predict the next price according to period
</span>
</div>
<div class="sublink">
<span>
<a href="">
Link - https://github.com
</a>
</span>
</div>
</div>
</div>
<div class="content">
<div class="image">
<img src="../static/img/portfolio/oil_price_korea.jpg" alt="국내주요소가격분석">
</div>
<div class="textcontent">
<div class="subtitle">
<span>
Oil price analysis
</span>
</div>
<div class="subdescription">
<span>
-Analyzing the status of domestic gas stations and analyzing prices by region, visualization through a map library, receiving and analyzing changes in oil prices as data, and conducting visualization and preparatory work for distribution
</span>
</div>
<div class="sublink">
<span>
<a href="">
Link - https://github.com
</a>
</span>
</div>
</div>
</div>
<div class="content">
<div class="image">
<img src="../static/img/portfolio/feature_impotance%20Chart.png" alt="중요특성분석">
</div>
<div class="textcontent">
<div class="subtitle">
<span>
ML model Features Analysis
</span>
</div>
<div class="subdescription">
<span>
-Analysis and visualization of the importance of learning and feature_importances along with the analysis of fearures to learn machine learning and the data set required for learning
</span>
</div>
<div class="sublink">
<span>
<a href="">
Link - https://github.com
</a>
</span>
</div>
</div>
</div>
- 내용은 잘 들어 갔지만 , 컨텐츠들이 정렬 되지 않았습니다.
- CSS를 몇가지 수정하고 정렬시켜야 합니다.
4. CSS 수정
- 우선 content들을 정렬 시켜 보겠습니다.
- 정렬이 되지 않은 이유는 content의 높이가 자식 태그들의 높이들 만큼 반영 되지 않았습니다.
- image 와 textcontent가 float값이 지정 되어 있기 때문에 붕 떠있는 상태와 같습니다.
- 해결방법은 몇가지가 있지만 저는 image와 textcontent의 부모 태그인 content태그에 float 값으로 left를 주어서 해결하겠습니다.
