[생활코딩] project004 HTML CSS로 웹사이트 만들기

Java Script 를 수강하기 앞서

자바스크립트를 이용한 예쁜 웹사이트를 만들 수 있다는 사실을 알았다.

크롬 확장프로그램에 가서 momentum 을 검색해서 설치하면

새로운 빈 창에 이렇게 Good afternoon 인사와 함께 나의 이름을 넣을 수 있는 창이 나타난다.

오른쪽 상단에는 위치와 온도

그리고 왼쪽 하단에는 사진이 어느 나라에서 찍혔는지

그리고 TO DO LIST 를 작성할 수 있다.

이러한 웹페이지는 자바를 배울 때 만들어보도록 하고

나는 html 을 복습하고자 웹페이지 하나를 만들었는데, 쉬운 것들인데도

일일이 찾고 또 무엇이 잘못 되었는지 알아내는 과정이 시간을 참 많이 잡아먹는 것 같다.

 

개발자가 되어보려고 하는데

너무 늦은 나이는 아닌지 걱정과 또 잘 할 수 있을지 걱정은 되지만

재미가 있다는 것을 느끼고 있기 때문에 좋은 수업들을 찾고 싶고

또 혼자 공부하는 방법을 어서 터득하고 싶다.

 

Github를 통해서 만든 웹사이트이다. 로맨틱한 웹사이트를 만들어보고자 했다.

(사실 고화질의 그림빨 bb)

project004 라고 써 있는 것처럼 4번째로 무언가를 만들어본 경험이다.

생각해보니 첫번째 만들었던 건 정말 날 것이었던 것 같다.

 

 

넣고자 한 기능들을 먼저 정리해보자면

 

1. 배경삽입

2. 글자삽입

3. 버튼삽입

4. 시계삽입

5. 링크삽입

 

좀 더 자세하게 넣은 기능들을 정리해보자면

 

1. 배경삽입

먼저 배경 사진을 삽입 후 사진 업로드를 120%로 키우기 위해

 CSS를 이용하여 style 태그를 입혀 body 태그 아래에다가 

background-image: url('bariloche.jpg');  

background-size: 120%;

입력한다.

 

2. 글자 삽입

Good Evening 이나 아래 문구들을 

<h1>Good Evening</h1> 태그로 묶은 뒤

css 를 이용하여 style 태그 아래 크기를 조정했다.

 

3. 버튼삽입

버튼삽입은 <input type="button" value="Gdynia" onclick="window.open('gdynia.html')">

input type에서 버튼을 입력하고 value 에 들어갈 이름을 기입한다.

그리고 onclick 태그를 더하여 window.open(' ')을 통해서 클릭했을 때 이어지는 창이

새로운 창에서 업로드 되게 한다.

 

4. 시계삽입

시계삽입은 사실 내가 직접했다고 하기 어려운게 어디서 가지고 와서

다음에 자세히 적어서 해보기로 하겠다.

Java Script로 시계를 삽입하는 편이 더 쉬울 것 같다는 생각이 들기도 한다.

 

5. 링크삽입

마지막 아래 줄에 파란 글씨로 작게 보이는 Mobile Version 에 링크를 삽입했다.

우리가 아는 a 태그를 이용해서

<a href="view._type.html">Mobile Version</a>

사실 이렇게만 입력하려고 했는데

왜인지 저 태그가 말을 안 들어서

인터넷에 검색해보니 이상하게 추가적으로 style 태그가 넘치게 들어가더라

<a href="view._type.html" style="margin:auto; text-decoration-color: white; text-align:center; display:block;" class="button large hpbottom"> Mobile Version</a>

display:block; 이 부분은

Mobile Version 이 문구가 p 태그처럼 단락을 나누어주는 기능을 하고 있다고 한다. 그리고 스타일 태그 텍스트 컬러 부분은 적용되지 않았다. text-align은 적용되었다. 나머지 class="button large hpbottom" 이 부분은 뭔지 모르겠다.

 

코딩이란 

정말 왜 오류가 나는 지

왜 실행이 되는 지 찾아야 하는 수업인 것 같다.

 

나는 ATOM 을 이용하고 있다.