[FISH-NEWS] 프로젝트 기록

 

 

 

 

 

주저리

일단 글을 계속 안 쓰기는 했는데

지속적으로 공부를 하기는 했다

HTML CSS같은 경우는 어느 정도 궤도에 올랐다고 생각하지만

JS는 글쎄 조금 더 노력해야 할 것 같다

일단 목표는 이번 달 안으로 궤도에 진입하는 것이기는 하지만 될런지

지금까지 해 온 것처럼 하면 잘 될 것 같기는 하다

 

드림코딩 앨리와 노마드코더 무료강의들을 일단 열심히 수강했고 이제 강의를 구매해서 들을 예정

 

어쨌든 지금까지 배운 내용들을 바탕으로 혼자 프로젝트를 하나 수행해보기로 했다.

 

처음 코딩이란 걸 접해보고 HTML에 <h1>을 처음 작성했을 때 열의에 차서 혼자 이것저것 만들어봤는데 지금 보면 음.. 분명 두 달 전 정도밖에 되지 않았지만 아주 부끄러운 퀄리티다

당연하게도 깃허브 연동은 꿈도 꾸지 않았다

 

이상이 높은 편인지 내 자신을 너무 높게 생각하는 편인지 어느 정도 결과물이 나와야지 github에 올릴 수 있다고 생각해서.

오늘부터 만들기 시작한 프로젝트는  github에 올리고 있기는 하지만 또 두달 뒤 내가 만들어낸 결과물을 보면서 부끄러워 할 지도 모른다고 생각하니 약간 웃기다

 

 

이렇게.. 주저리주저리 하는건 오늘이 너무 빡세서인듯

운전을 한 다섯시간 한 것 같다

 

 

 

 

아이디어 구상

요즘 빠진 책 '플레인 센스'를 보면서 비행기에 대해 관심을 갖게 되었다

처음에는 비행기 자체를 3D로 구현해서 부분 부분마다 설명을 해주는... 그런 원대한 꿈을 꿨지만

내 실력을 빨리 깨닫고 비행기와 관련된 신문 기사 형태의 웹페이지를 만들어 보기로 했다

 

하지만 일반적인 신문 기사 형태의 웹페이지는 너무 재미가 없고, 마치 정말 못 만든 ppt를 보는 듯한 결과물이 나올 것이라 예상되어 방향을 조금 바꾸기로 했다.

 

비행기와 관련된 자료를 찾으면서 발견한 과거의 비행기 사진들에서 영감을 얻어,

18~19세기의 신문 형태를 간소화하고 재해석해서 웹페이지로 만들면 어떨까 하는 생각을 하게 되었다.

영화 해리포터에서 나온 신문처럼 움직이는 영상이 삽입되어 있는 18~19세기 풍 신문.

비행기와 관련된 책을 보면서 구상했던지라 비행기와 관련된 자료를 넣고 싶었으나 마땅한 비행기 사진을 찾기 어려웠고 시대와 연도에 맞춘 사건들을 찾기도 쉽지 않았다.

 

그래서 그냥 기사 내용은 해리포터나 옛날 신문 내용 모든 것을 짬뽕하기로 했다.

양질의 기사를 찾아서 정보를 전달하기 위한 페이지가 아니라 그냥 코딩 연습용이기 때문에 ^^

 

 

 

프로젝트 목표

1차적인 목표는 코딩 능력 향상이다.

html과 css는 기본으로 하고 js를 잘 활용해서 반응형 웹사이트를 만들 것이다.

2차적인 목표는 남들에게 보여줄 수 있는 프로젝트 완성이다.

동생이 매일 공부가 아니라 받아쓰기 하는거 아니냐고 놀리는데..

더 이상 놀리지 못하게 결과물을 보여줄 예정

.. 사실 보여줘도 놀릴 것 같기는 함!

 

 

 

진행 상황

이거 목표랑 진행상황 이런것도 올려도 되나

어차피 아무도 들어와보지 않는 블로그지만 아직은 조금 부끄럽다

 

지금 HTML, CSS 모두 목표의 절반쯤 도달했다

 

대충 이런식으로...

만들어지고 있다

저 화면이 은근 힙해보여서 캡쳐해두었다

(button에 사이즈를 줬지만 button 안에 있던 img(손가락 img)의 사이지는 조정되지 않아서 발생한 문제라고 생각. img가 button밖을 나와서 그냥 유령처럼 떠 있는 자리에 밑에 있던 다른 img가 button이 줄어든 자리 위에 겹친 상황이라고 생각.

근거

button에 width와 height 값을 줬을 때 화면 상황이 발생.

button 안에 있는 img에 값을 주자 더 이상 화면이 겹치지 않음.)

 

이런 분위기로 만들어지고 있다

 

하지만 생각보다 css에서 은근 시간을 쏟고 있다

한 달 전에 비해서

훨씬 빠르게 화면을 배치하고

문제가 무엇인지를 파악할 수 있는 능력이 길러지긴 했지만

아직 많이 멀었다

 

 

 

어려움

1. ::after ::before

ㅎㅎ...

::after... ::before...이놈들,,

HTML
<div id="header__bar">       
<ul>           
<li>VOL. XXL-NO. 27</li>           
<li>DUBLIN, SATURDAY, JANUARY 4, 1879.</li>           
<li>SISOLE PAPER</li>       
</ul>   
</div>

코드 복사가 왜 제대로 안되지,,

 

어쨌든 지금 올려둔 것은 HTML 코드

저렇게 div 안에 ul, li를 넣어놓고

CSS에서 #header__bar에 ::before을 먹였더니 저 상태가 되었다

div안에 li가 몇 개 들어있을 경우 ::before나 ::after을 쓰면 저렇게 li 하나당 ::before이 하나씩 붙는건가..

 

하지만 그냥 border-top을 줄 것을 다양하게 연습해본다고 before, after을 사용했던 상황이라

그냥 다시 border을 주기는 했는데 ::before ::after에 대해서 더 알아봐야 할 필요성을 느꼈다.

 

 

2. img의 문제

 

일단 img 크기도 다 제각각이기는 하지만

그리드를 활용해서 이미지와 글 비율을 일정하게 정리해야겠다는 필요성을 느꼈다

css를 이용해서 화면 비율을 정리하는 방법을 조금 더 공부해야겠다

 

 

3. display, position, float 등

 

눈에 보이는 화면의 값을 어떻게 주는지에 대해서 더 공부해야 할 필요성을 느낌

 

 

 

 

 

정리

프로젝트 첫 시작일

아직 아무것도 몰라서 내가 뭘 모르는지도 잘 모른다

일단 열심히 해보고 계속 배워나가는게 답일거라고 생각한다.

 

 

 

화이팅!!