기다리고 기다리던 심리 테스트 만들기 강좌를 시작하겠습니다.
웹 언어 코딩으로 심리 테스트 만들기 #0 소개 및 프리뷰
웹 언어 코딩으로 심리 테스트 만들기 #0 소개 및 프리뷰
심리 테스트를 직접 코딩으로 만들어 보면 어떨까 하는 주변 사람의 의견이 있어서 한 번 도전해 보았습니다. 이번 포스팅은 간단한 프리뷰 정도로 생각해 주세요. 목차 컨셉 케릭터나 배경을
sangminem.tistory.com
오늘은 먼저 틀잡기부터 해볼게요.
목차
폴더 구조
먼저 단순하게 html, js, css 파일 하나씩 잡고 가 보겠습니다.
에디터는 원래 사용하던 것을 사용하시면 됩니다. 처음이시라면 Visual Studio Code를 추천합니다.
HTML 구조 잡기
html, head, body의 기본 구조를 작성하고 meta 태그의 viewport 속성을 활용하여 모바일에서도 적절히 보이도록 옵션을 주었습니다. 그리고 head 태그 내부에 css 파일을 임포트하고 body 태그 안쪽에 js 파일을 임포트 하였습니다.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, width=device-width">
<link rel="stylesheet" href="./css/test.css">
<title>샘플 심리 테스트</title>
</head>
<body>
<script src="./js/test.js"></script>
</body>
</html>
메인 화면 HTML 작성
body 태그 내에 div 태그로 타이틀, 질문, 선택지, 버튼 등의 위치를 대략적으로 잡아 보았습니다. 아직 스타일이 작성되지는 않았지만 필요한 클래스도 미리 붙여 놓았습니다.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, width=device-width">
<link rel="stylesheet" href="./css/test.css">
<title>샘플 심리 테스트</title>
</head>
<body>
<div id="test">
<div id="main">
<div class="title-wrap">
<h2 class="title">
<!-- 타이틀 -->
</h2>
</div>
<div class="question-wrap">
<h3 class="question">
<!-- 질문 -->
</h3>
</div>
<div class="answer-wrap">
<div class="answer">
<!-- 선택지 -->
</div>
</div>
<div class="bottom">
<div class="controller-wrap">
<button class='prev-btn'>이전</button>
<button class='next-btn'>다음</button>
</div>
</div>
</div>
</div>
<script src="./js/test.js"></script>
</body>
</html>가장 바깥에 id가 test인 div 태그로 감싼 이유는 추후 Vue.js 프레임워크를 적용시키기 위함인데 자세한 것은 나중에 설명하겠습니다.
샘플 내용을 한 번 넣어 보았습니다.
아직 클래스를 작성하기 전이므로 아주 기본적인 모양으로 표시가 되고 있습니다.
메인 화면 CSS 작성
html 속성과 button의 기본 글자 크기를 16px로 고정하였고 button의 몇몇 기본 속성을 없애 주었습니다. body의 기본 margin도 0으로 만들었습니다.
html, button {
font-size: 16px;
}
button {
margin: 0;
padding: 0;
border: 0;
background: none;
}
body {
margin: 0;
}
각 요소별로 글자 정렬을 쉽게 하기 위해 display 속성 값으로 table, table-cell을 활용하였습니다. 모든 wrapper 클래스의 width 크기는 100vw(브라우저 너비의 100%)로 하였습니다.
.title-wrap {
display: table;
position: relative;
width:100vw;
height:80px;
}
.title {
display: table-cell;
text-align: center;
vertical-align: middle;
}
.question-wrap {
display: table;
position: relative;
width:100vw;
height:100px;
}
.question {
display:table-cell;
vertical-align:middle;
padding-left: 20px;
}
.answer-wrap {
position: relative;
width:100vw;
height:100%;
}
.answer {
padding: 10px;
font-weight: bold;
}타이틀, 질문의 높이는 고정적으로 잡아 주었고 선택지의 크기는 선택지 수에 따라 가변적으로 변하도록 height 속성에 100%를 주었습니다.
bottom 클래스의 position을 fixed로 하여 버튼은 항상 브라우저 맨 밑에 위치하도록 하였습니다.
.bottom {
position: fixed;
bottom: 0;
width: 100%;
}
.controller-wrap {
display: table;
position: relative;
width:100vw;
height:70px;
}
.prev-btn {
width:50%;
height: 100%;
display: table-cell;
vertical-align:middle;
text-align:center;
font-size: 1.2em;
font-weight: bold;
}
.next-btn {
width:50%;
height: 100%;
display: table-cell;
vertical-align:middle;
text-align:center;
font-size: 1.2em;
font-weight: bold;
}
다음은 iPhone5 크기에서 테스트 한 화면입니다.
아직 밋밋하지만 구성이 나빠보이지 않습니다.
간단하게 색깔도 한 번 넣어 보겠습니다.
#main {
background:red;
opacity: 0.1;
height: 100vh;
}id main인 div 태그 전체 영역의 배경색을 빨간색으로 하고 불투명도를 10%만 주면 보기 좋을 것 같아서 작성해 보았습니다.
적용하고 확인해 보겠습니다.
색깔 자체는 너무 자극적이지도 않고 적당해 보이는데 글자까지 불투명도가 10%로 되어 버렸습니다. 왜 이렇게 됐을까요? 어떻게 하면 글자의 불투명도는 그대로 유지하면서 배경색만 투명하게 할 수 있을까요?
다음과 같이 작성해 보겠습니다.
#main::after {
content: "";
position: absolute;
left: 0;
top: 0;
width: 100%;
height:100%;
background:red;
opacity: 0.1;
z-index: -1;
}
.prev-btn::after {
content: "";
position: absolute;
left: 0;
top: 0;
width: 50%;
height:100%;
background:yellow;
opacity: 0.1;
z-index: -1;
}
.next-btn::after {
content: "";
position: absolute;
right: 0;
top: 0;
width: 50%;
height:100%;
background:blue;
opacity: 0.1;
z-index: -1;
}div 태그 다음에 after 키워드를 이용하여 가상 요소를 하나 생성했습니다. 기존 요소는 변화를 시키지 않고 새로운 요소를 생성하여 겹쳐보이게 하는 원리입니다. 버튼에도 마찬가지 방법으로 배경색을 입혔습니다.
이제 원하는 대로 보이게 되었습니다.
특별히 어려운 부분은 없었던 것 같습니다.
이번 시간에는 여기까지만 하고 다음 시간에는 인트로 부분과 결과 부분 화면을 작성해 보도록 하겠습니다.
감사합니다.
웹 언어 코딩으로 심리 테스트 만들기 #2 인트로 및 결과 화면 작성
웹 언어 코딩으로 심리 테스트 만들기 #2 인트로 및 결과 화면 작성
지난 시간에 이어서 인트로 부분과 결과 부분을 작성해 보겠습니다. 인트로, 메인, 결과 전부 html 파일 하나에서 보여줄 예정입니다. 웹 언어 코딩으로 심리 테스트 만들기 #1 웹 언어 코딩으로
sangminem.tistory.com
'코딩 강의 > 컨텐츠를 만들어 볼까요' 카테고리의 다른 글
| 웹 언어 코딩으로 심리 테스트 만들기 #5 선다형, 단답형 복합 구현 (21) | 2021.02.26 |
|---|---|
| 웹 언어 코딩으로 심리 테스트 만들기 #4 데이터 입력 (4) | 2021.02.09 |
| 웹 언어 코딩으로 심리 테스트 만들기 #3 화면 전환 기능 구현 (2) | 2021.01.22 |
| 웹 언어 코딩으로 심리 테스트 만들기 #2 인트로 및 결과 화면 작성 (3) | 2021.01.13 |
| 웹 언어 코딩으로 심리 테스트 만들기 #0 소개 및 프리뷰 (10) | 2021.01.09 |
| 테트리스 게임 개발 #10 - 모바일 플레이 기능 구현 (2) | 2020.10.01 |
| 테트리스 게임 개발 #9 - 콤보 기능 및 라인 한 줄 씩 추가 (0) | 2020.10.01 |
| 테트리스 게임 개발 #8 - 보드 및 블럭 스타일 추가 (1) | 2020.09.28 |
댓글