안녕하세요 느종입니다.
오늘은 저번 시간에 언급한 것과 같이 같은 그림 찾기 페이지를 만들어 볼까 합니다.
어렸을 적에 했던 자주 했던 사천성과 유사한 콘텐츠를 제작하여 페이지를 만들면 누구나 재밌게 즐길 수 있을 거라 생각합니다. 제가 만드는 것은 기본이 되는 간단한 콘텐츠들이고, 여러 가지 기능들을 더 추가하여 본인만의 재밌는 콘텐츠를 만드시면 될 듯 싶습니다. 어떤 콘텐츠를 만들지에 대한 것은 무궁무진하니깐 잘 생각하셔서 이것 저것 적용하시다 보면 자연스레 공부도 되고 좋을 듯 싶습니다. 그럼 바로 시작하도록 하겠습니다. 함께 공부해요!
설계
저희가 만드는 콘텐츠는 항상 시작 화면, 메인 화면, 결과 화면으로 구성되어 있습니다.
시작 화면에서는 콘텐츠에 대한 제목과 설명, 시작 하기 버튼이 있습니다.
메인 화면에서는 콘텐츠에 대한 제목과 콘텐츠 내용(같은 그림 찾기에 대한 카드들이 나열되어 있는 내용)이 들어 있습니다.
결과 화면에서는 콘텐츠에 대한 제목과 결과 내용, 다시 하기 버튼이 있습니다.
이번에는 기회(목숨)에 대한 부분과 퀴즈 번호에 대한 부분은 필요하지 않았기 때문에 생략을 하였습니다.
폴더 및 파일
이번에도 이미지 파일을 사용하지 않았기 때문에 폴더 및 파일 구성은 앞선 콘텐츠들과 같습니다. css, js 등의 폴더를 따로 만들어서 파일을 넣고 사용하셔도 되고, 하나의 폴더 안에 style.css, scripts.js, index.html을 두고 사용하셔도 무방합니다. 간단한 콘텐츠를 만들 때는 후자처럼 하셔도 상관 없지만 콘텐츠에 대한 사이즈가 더 커질수록 코드에 대한 내용도 복잡해 질 수 있기 때문에 전자처럼 폴더를 나누고 각각의 파일들을 잘 구분 지어서 사용하시는 걸 추천드립니다.
시작 화면 페이지
시작 화면은 기존 콘텐츠와 같습니다.
[ style.css ]
[ style.css ]
시작 화면 index.html은 기회(목숨) 태그를 제외한 것 빼고는 기존 것과 비슷합니다.index.html과 style.css는 위 이미지처럼 작성해주시면 됩니다.
기존 콘텐츠 보다는 css에서 카드가 플립하는 동작, 음영 등을 더 추가하여 조금 더 역동적인 화면을 만들고자 하였습니다.
그러다보니 css 코드가 조금 더 길어 졌네요.
각각의 카드에 대한 태그(item)은 자바스크립트 코드를 활용하여 동적으로 생성해줄 생각입니다.
그래서 css에는 .items-group .item에 대한 부분이 있지만 html 구문에서는 없는 것입니다.
<div class="item">
<div class="front-item">Q</div>
<div class="back-item">1</div>
동적으로 div태그를 생성하면 위와 같이 구성되어 질 것입니다.
items-group 아래에 item이 있고, item 아래에 front-item(앞면), back-item(뒷면)이 있습니다.
.items-group .item .back-item {
position: absolute;
position을 relative와 absolute를 주어 item, front-item, back-item을 겹치게 구성합니다.
transform: rotateY(180deg);
}
뒷면 아이템은 transform을 활용하여 Y축 방향으로 180도 돌아가도록 작성합니다.
추후에 자바스크립트 코드로 item을 클릭하면 transform을 활용하여 Y축 방향으로 180도 돌아가도록 css를 수정해줄 생각입니다.
오늘은 같은 그림 찾기에 대한 설계와 기초 구성, 시작 화면, CSS까지 작성을 해보았는데요. 기존에 만들었던 콘텐츠보다 조금 더 역동적으로 보이도록 만들려고 하였는데요. 나열 된 카드 개수를 더 늘린다던지, 틀렸을 때의 어떠한 동작들을 더 추가한다던지, 자신의 입맛에 맞게 추가로 콘텐츠를 붙이면 더 재미있는 나만의 콘텐츠가 될 것 같습니다. 공부도 하고, 콘텐츠도 만들고 1석 2조!!
그럼 다음 시간에는 메인 화면과 자바스크립트 코드를 작성해 보도록 하겠습니다.