[precamp] 나만의 싸이월드 생성하기

precamp의 내용을 바탕으로 더 추가하여 나만의 싸이월드를 생성하였다.

나만의 싸이월드 제작하기

1. 싸이월드 전체 구조화하기. 2. 싸이월드 왼쪽 박스 제작하기. 3. 싸이월드 오른쪽 박스에서 Home 박스 제작하기. 4. 싸이월드 오른쪽 박스에서 Game 박스 제작하기. 5. 싸이월드 오른쪽 박스에서 JukeBox 박스 제작하기. 6. 버튼 생성하고, 기능 추가하기.

1.  싸이월드 전체 구조화하기

나만의 싸이월드 만들기 전에 html로 웹페이지 구조화하기.

2. 싸이월드 왼쪽 박스 제작하기

- 구조화한 것을 바탕으로 id 값 지정하기.

- background-color 이용하여 원하는 자리에 잘 넣어보기.

- flex를 이용하는 경우에 부모 박스를 이용하여 자식 박스를 정렬함을 잊지 말기. 그래서 박스 설정할 때 꼼꼼하게 해줘야 css 진행할 때 편리하다.

- 위치가 올바르게 지정된다면, background-color 지우고 그 위치 안에 원하는 내용 넣어주기.

3. 싸이월드 오른쪽 박스에서 Home 박스 제작하기

- iframe 태그를 이용하여 기존의 html 안에 새로운 html을 넣어주기. (home.html, home.css 파일을 제작하기.)

-  %가 적용되지 않는 경우에는 부모 박스를 고려하기. %는 상대적인 위치이기 때문에 부모 박스가 중요하기 때문이다.

- 형태가 같은 경우에는 같은 클래스 이름을 이용하여 코드의 중복을 줄여주기.

- 박스 안에 박스를 만드는 것을 두려워하지 않기. flex 이용할 때 유용하기 때문이다.

4. 싸이월드 오른쪽 박스에서 Game 박스 제작하기

- class와 id의 차이점과 이용 방법

class	- html에서 css를 다루는 경우에 많이 이용한다. - 중복 가능하다.
id	- DOM 구조를 이용할 때 많이 사용한다. js 기능을 추가해야 되는 경우에 id를 많이 지정한다. - 중복 불가능하다.

- style 파일을 따로 만들어서 그 속에서 css 파일 다뤄주기. 파일이 많으면 보기 불편하기 때문에 정리하기. 파일 수정을 한 뒤에 Game 박스를 제작하기.

 

- space-between와 padding을 적절하게 이용하면 자식 박스를 편리하게 조정할 수 있다.

- Game도 Home과 마찬가지로 iframe을 이용하여 다른 html와 css를 연결하기.

- 굳이 wrapper-header, wrapper-body로 나눌 필요 없이 wrapper-header와 game-container x 2로 나누어서 진행할 수 있다. 비슷한 성격을 가진 태그들끼리 같은 클래스 이름을 지정해주기.

- 내용물이 있는 경우에는 background-color 대신에 border 이용하기.

 

여기서 나는 로또 게임에도 기능을 제작해주었다. 컴퓨터가 무작위로 선택한 번호와 사용자가 선택한 번호가 같으면 당첨입니다! 를 출력하고, 아닌 경우에는 땡! 을 출력하는 게임을 만들었다.

여기에서 event.target 이 이용되었다. 이벤트가 변경될 때마다 실시간으로 갱신되는 값을 가져오기 위하여 event.target을 이용한다. 이를 잘 이용하니 사용자가 선택한 번호를 잘 가져올 수 있었다.

 

그리고 로또 번호마다 색상을 다르게 하기 위하여 자식 선택자를 이용하였다. nth-child 이며, lotto__contents 안에 있는 개별의 숫자 중 몇 번째를 무슨 색상으로 할 것인지 지정하였다.

5. 싸이월드 오른쪽 박스에서 JukeBox 박스 제작하기

행	열
tr	th 첫 행에서의 열 생성하는 경우	td 첫 행을 제외한 곳에서 열 생성하는 경우

이 표를 참고하여 쥬크박스의 표를 생성할 수 있다. 정렬은 th 기준으로 td를 정렬하면 된다.

나는 이 곳에서 기능을 더 추가하였다. 전체 체크 박스를 클릭 시 밑에 있는 체크 박스가 모두 체크되거나 체크가 풀리는 기능을 넣어주었다. 밑에 있는 모든 체크 박스를 가져오기 위하여 class를 이용하였고, querySelectAll()을 이용하였다.

6. 버튼 생성하고, 기능 추가하기

navigiation 이라는 메뉴 버튼을 생성하였다. 버튼 클릭 시에 원하는 페이지로 이동하고, 배경색과 폰트 색상을 변경해주는 기능을 추가하였다. 이 때 고민을 많이 했었는데, 3개의 함수를 생성하면 된다. 각각의 버튼 마다 기능을 추가하면 되기 때문이다. 태그의 속성 값을 변경하기 위하여 setAttribute(name, value)를 이용해줬다. 이를 이용하면 이벤트 감지 후, 실시간으로 속성을 줄 수 있다.

7. 완성된 싸이월드 양식

자세한 코드는 깃허브에서 확인할 수 있다.