사이드작업 / 웹페이지 따라 만들기

원본사진

허접..

 

  4주차에는 잠시 쉬어가는 주라서 html 과 css가 너무 약해서 웹 페이지 따라 만들기를 해봤다. 완전 똑같이는 구현하지는 못했지만, 요소들을 집어 넣고, 태그정리 및 grid로 작업을 해보았다.

 

grid 같은 경우에는 사진이 고정 되어서, 화면을 줄여도 사진은 줄여지지 않고, 위치에 고정되어 있다. 미디어쿼리를 이용하더라도 이상해질 것 같았다. grid를 어떻게 써야되는지 더 많은 공부가 필요할 것 같다.

 

구분을 나누고, 그 구분에 맞는 태그들을 사용해서 작업하는게 여간 어려운게 아니였다. 구분에 맞는 시멘틱태그를 이용하고, 그 안에 요소들의 태그들 또한 어떤게 맞을지 고민하고 태그를 쓰고, 수정하고를 몇 번이나 반복했다. css요소에서도 부모요소에 따라 영향을 받는 요소가 있고, 없고가 있어서 이번에 크게 도움이 됐다.

 

안에서는 자바스크립트로 작업할 부분이 별로 없었다. 이메일을 확인하는 란에 이메일 체크해주는 부분만 신경써주면 됐는데, 현재 구현되지 않는것은 이메일 가장 끝에 다른 문자열을 거르지 못하고 있다. 이메일 양식을 갖추고 있더라도, 뒤에 다른 문자열이 오면 양식이 아니라고 처리해야 하는데 그 부분이 안되고 있다. 또한 @가 가장 앞이나 문자열 중간에 껴 있어도 잡아 주지 못하고 있다. 중복된 값을 처리해주는 부분에서 현재 막혀 있다... 흠... 

 

웹 하면 하나를 완전 똑같이 구현하는데는 실패했지만, 따라 하면서 많은 부분들을 느낄 수 있어서 좋았다. 리팩토링과 다른 작업도 더 해야되지만 웹페이지를 만드는 것은 정말 정말 어렵다는 것을 새삼 다시 깨닫는다.