- 이번 포스팅에서는 index 페이지에 있는 텍스트와 이미지 컨텐츠들을 수정하여 반응형 웹에 적용되도록 해보겠습니다.
Index 페이지 태그 추가
- index 페이지에 있는 컨텐츠들을 감싸주는 index 클래스 태그를 추가 시켜 줍니다.
<div id='index' class="move">
<div id='maintext'>Welcome to My PortFolio</div>
<div id="mainsubtext">
<p>Breath</p>
<p>- Everything will be made by me.</p>
</div>
<div id='mainimg'>
<img src="../static/img/main/main_img.jpg" alt="MainImage">
</div>
</div>
- css에서 첫번째 span만 nth-child를 이용해 스타일을 변경할 수 있지만, 항상 텍스트들을 추가할때마나 span값을 지정하는 방법은 너무 귀찮아 질 수도 있습니다. font스타일에 해당하는 값들을 지정해놓은 css스타일을 미리 만들어두고 , class를 지정하여 사용하면 편리할 것 같습니다.
- div.contactinfo > span의 css값들중 font에 해당하는 부분들을 우선 삭제 처리합니다.
- css에 .subtitle이라는 선택자를 만들어 font-size : 30px, font-weight: 400을 지정하고 첫번째 span에 class값으로 subtitle을 지정합니다
- 다음으로 .thin20이라는 선택자를 만들고 font-size:20px;, font-weight:100을 지정하여 2번째 , 3번째 span에 class 값으로 thin20을 지정합니다.
- 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를 주어서 해결하겠습니다.
