HTML5 & CSS3 복습 시작!

 

 

 

 

 

 

이제 허송세월을 보낼 만큼 보냈으니 '생산적'까진 못 되더라도 나름의 의미 있는 시간을 보내기 위해

그간 배웠던 HTML5, CSS3 복습을 시작하며 발만 살짝 담그다 뺀 JavaScript(+jQuery)를 공부하고

최종적으로는 수업이 끝나며 흐지부지 된 포트폴리오를 한번 제대로 완성해보려 한다.

 

그렇다고 해서 무작정 교재 처음부터 따라가며 복습하려 한다면

마치 학창 시절 집합만 너덜한 수학의 정석처럼 될 것이 뻔하기에ㅋ

날 웹에 관심 가지게 해 준 '생활코딩'에서의 수업처럼

무언가를 만들어가면서 그에 필요한 스킬을 익혀나가는 것을 목표로 삼아 본다 :)

 

 

 

 

우선 첫번째 목표는 웹 수업을 들으며 1차 프로젝트로 만들었던 사이트 리뉴얼하기.

 

아직 서로서로 이름도 모르는 상태에서 다짜고짜 시작된 팀 프로젝트라 참 난감하기 그지없었는데,

다행히 성실👍하고 실력 좋은 친구를 만나 서로 상부상조하며

(그 당시에) 꽤 괜찮은 사이트를 함께 만들어냈다며 내심 뿌듯해했다.

 

하지만 수업이 진행되면서 좀 더 실력을 쌓아가고 난 후 다시 본 1차 사이트는

어쩜 이렇게 아쉬운 것들 투성인지.

 

 

반응형을 배우기도 전이라 미디어 쿼리 적용도 안 되어있고,

자바스크립트도 배우기 전이라 탭메뉴란 탭 메뉴, 그리고 모달까지도 전부 CSS로 해결했다.

(그래도 덕분에 선택자와 input은 확실히 익혔다.)

 

 

 

 

그럼 이제 해야할 것은-

 

- 하나의 사이트를 페이지별로 파트를 나누어 담당했지만 전부 혼자 만들어보기(한번 나만의 것으로 만들어보기)

 

당시 가상의 여행 예약 사이트를 만들면서 

 

main.html

sub_hotel.html

sub_air.html

search_hotel.html

detail_hotel.html

reservation.html

support.html

 

이렇게 총 여섯개의 페이지를 만들었는데

내가 담당했던 페이지는 호텔 검색 시 뜨는 search_hotel.html,

호텔 상세페이지인 detail.html,

그리고 고객지원 페이지인 support.html 이었다.

 

콘셉트 선정을 잘 한 건지, 잘 못한 건지ㅋ 처음 만드는 사이트로는 작업량이 생각보다 많았는데

그래도 기한 내에 어찌어찌해내긴 해냈더라.

이젠 이 여섯 개를 다 내 방식으로 한번 만들어 봐야겠다.

 

 

 

 

 

- 몇몇 사이즈 조절

 

요즘은 웬만하면 모니터 해상도가 1600px은 넘지 않을까 싶었고, 사이트 특성상 콘텐츠가 많고 여행 사진 또한 많이 들어가기 때문에

페이지의 가로를 1500px으로 잡고 작업을 했었다.

 

지금 보니 이게 얼마나 답답한지ㅠ

 

1600px / 1200px

 

인터넷 창을 한번 1600px * 900px로 맞춰놓고 봤을 때,

기존에 1500px로 만들었던 페이지와 지금 새로 1200px로 만들고 있는 페이지.

 

지금 만들고 있는 페이지는 아직 내용이 다 들어가지 않은 탓도 조금 있지만

그걸 차치하고라도 1200px이 훨씬 보기 편하다~

 

전체 틀을 1200px로 수정하고 보니 그 안에 부분 부분 또 사이즈를 고쳐나가야 할 부분들이 있어서

이것도 역시 만들면서 나름의 최적의 사이즈를 찾아 나가야겠다.

 

 

 

 

- input으로 만들었던 탭 메뉴 jQuery로 수정하기

 

 

메인 페이지의 콘텐츠 중 왼쪽의 탭 메뉴로 오른쪽에 여행지 목록이 바뀌는 구성인데

옛날엔 이걸 다 <input type="radio"... >와 인접 형제 선택자를 통해서 display: none;하고, display: block;하고ㅋ

 

꽤 막일에 속하는 작업이지만 그래도 겉으로 보기엔 jQuery를 사용한 것과 차이 없고, 작동되는 것 또한 확실했는데

이때 형제 선택자(~)를 사용하다가 특정 케이스에서 이게 작용이 안 된다는 걸 알게 되어서,

그 이후로 인접 형제 선택자(+)만 사용하면서 태그를 타고 타고 하다 보니 코드가 점점 길어지는 단점이 생기더라.

 

 

조금 알아보면 jQuery가 훨씬 간단하게 쓸 수 있기에 이건 바꾸기로.

 

 

그 많던 input다 없애고, label은 <a>로 바꾸고 코드는 이렇게 작성.

 

JavaScript, jQuery는 심도 있게 배우지도 못했고, HTML이나 CSS에 비해 훅 어려워진 느낌이라 혼자서도 많이 버벅거렸는데

이렇게나마 해가면서 이제 좀 익혀야겠다.

 

 

 

 

 

 

 

- 미디어 쿼리 적용하기.

 

2, 3차 프로젝트 땐 pc, 태블릿, 모바일, 총 세 단계로 미디어 쿼리를 적용했지만

1차는 아직 반응형 진도 나가기 전이라 쌩 pc뿐ㅋ

태블릿 & 모바일용 레이아웃을 새로 구상하고 미디어 쿼리도 적용해야 한다.

 

2차 때 모바일&태블릿 레이아웃 때문에 개고생 한 기억이 있어서 이번엔 처음부터 각 잡고 하기로.

 

 

 

 

 

 

이 외에 2,3차 사이트 다시 한번 쭉 정리해보고,

GitHub에 업로드하다 만 파일들도 다시 올리고,

만들다 내팽개친 포트폴리오 사이트도 한번 개편해서 완성하기가 최종 목표!

 

티스토리 스킨을 야금야금 바꾸는 것보다 처음부터 이렇게 구상하고 만드는 게 훨씬 재미있긴 한데

생각해보니 할 게 많아서 부지런히 움직여야겠다.