GitHub 페이지

반응형 웹페이지를 만들어보려합니다.

 

다음과 같이 모바일, pc버전으로 나누어 페이지를 만들어보겠습니다.

 

 

위의 사진과 가장 근사하게 만들어보는 것이 이번 과제의 목표입니다!

 

 

YouTube의 영상을 아이프레임할 때에 오류가 발생하여 닷홈 페이지로 설정하겠습니다.

 

 

우선 html코드입니다.

 

 

다음은 css 코드입니다. 

외부 스타일을 이용한 css코드입니다. 따라서 html, css파일 각각 생성하여 코드를 작성하였습니다.

 

 

여기까지가 모바일버전에서의 css코드입니다.

 

다음은 pc버전에서의 웹사이트에 적용할 css코드입니다.

(1024px이상을 pc버전이라고 가정합니다.)

 

여기까지가 pc버전에서의 css코드입니다.

 

 

모바일. pc 순으로 제가 작성한 코드의 결과를 공유하려고 합니다.

 

 

이번엔 pc버전입니다.

 

 

 

 

 

 

---

GitHub 홈페이지의 정답 코드를 가지고 있지 않아 보이는 대로 코드를 작성하여 비슷하게 구현해보았다. HTML코드 작성에서 div 태그를 활용해야 편리함을 이번 과제를 진행하면서 깨달았다. 각 태그마다 div 태그를 사용하면 css를 적용할 때 더 편리했기 때문이다. 그런데 html코드 작성시에 이 작업을 수행하지 않아 css코드를 작성할 떄 다시 HTML로 돌아와 다시 작성하는 번거로움을 반복하였다,,, CSS코드 작성이 능숙치 않다보니 가독성이 다소 떨어지는 것 같다,,,, 큰 틀-> 작은 틀 즉 디테일을 신경쓰면서 작성해야 코드가 간결해지고 가독성이 더 향상되는 듯 하다.

 

여기에 JavaScript는 포함하지 않아 더 추가해야할 요소들이 많은 것 같다. 예를들면 Sign for GitHub를 클릭하였을 때 상위 이름, 이메일, 비밀번호를 형식에 맞지 않게 작성하였을 때 사용자에게 다시 입력하라고 알리며 다음 페이지로 넘어가지 못하도록 설정하는 작업등이 있을 수 있다.