css-js_section05_reference_code/index.html at main · devDingco/css-js_section05_reference_code · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>다이어리 만들기</title>
    <link rel="stylesheet" href="./css/index.css" />
    <link rel="stylesheet" href="./css/common.modal.css" />
    <link
      rel="stylesheet"
      href="./css/index.mobile.css"
      media="(max-width: 849px)"
    />
    <script src="./javascript/index.js"></script>
    <script src="./javascript/common.modal.js"></script>
  </head>
  <body>
    <div class="CSS_레이아웃">
      <!--헤더-->
      <div class="CSS_타이틀">민지의 다이어리</div>
      <img class="CSS_배너이미지" src="./assets/images/banner.png" />

      <!--내비게이션-->
      <div class="CSS_탭_영역">
        <div class="CSS_탭 CSS_클릭된탭">일기보관함</div>
        <div class="CSS_탭 CSS_클릭되지않은탭">사진보관함</div>
      </div>

      <!--필터-->
      <div class="CSS_필터_영역_배경">
        <div>
          <select class="CSS_필터" onchange="JS_필터링기능(event)">
            <option selected>전체</option>
            <option value="HTML_행복선택">행복해요</option>
            <option value="HTML_슬픔선택">슬퍼요</option>
            <option value="HTML_놀람선택">놀랐어요</option>
            <option value="HTML_화남선택">화나요</option>
            <option value="HTML_기타선택">기타</option>
          </select>
        </div>
        <div>
          <button
            class="CSS_일기쓰기버튼"
            onclick="JS_모달열기기능('HTML_등록모달그룹')"
          >
            <img src="./assets/images/plus.png" class="CSS_plus부분" />
            <div class="CSS_일기쓰기버튼_텍스트">일기쓰기</div>
          </button>
        </div>
      </div>

      <div class="CSS_메인">
        <!--일기 보여주는 곳-->
        <div id="HTML_일기보여주는곳" class="CSS_일기보여주는곳"></div>

        <!-- 등록모달 -->
        <div id="HTML_등록모달그룹" class="CSS_공통모달그룹">
          <div
            class="CSS_공통모달배경"
            onclick="JS_모달닫기기능('HTML_등록모달그룹')"
          ></div>
          <div class="CSS_등록상자">
            <div class="CSS_등록상자_내부">
              <div class="CSS_등록상자_제목">📍일기 쓰기</div>
              <div class="CSS_등록상자_기분">
                <div class="CSS_등록상자_기분_타이틀">
                  오늘 기분은 어땠나요?
                </div>
                <div class="CSS_라디오그룹">
                  <div class="CSS_라디오버튼">
                    <input
                      type="radio"
                      name="HTML_기분선택버튼"
                      value="행복"
                      checked
                    />
                    <div>행복해요</div>
                  </div>
                  <div class="CSS_라디오버튼">
                    <input type="radio" name="HTML_기분선택버튼" value="슬픔" />
                    <div>슬퍼요</div>
                  </div>
                  <div class="CSS_라디오버튼">
                    <input type="radio" name="HTML_기분선택버튼" value="놀람" />
                    <div>놀랐어요</div>
                  </div>
                  <div class="CSS_라디오버튼">
                    <input type="radio" name="HTML_기분선택버튼" value="화남" />
                    <div>화나요</div>
                  </div>
                  <div class="CSS_라디오버튼">
                    <input type="radio" name="HTML_기분선택버튼" value="기타" />
                    <div>기타</div>
                  </div>
                </div>
              </div>
              <div class="CSS_일기입력상자">
                <div class="CSS_일기쓰기">
                  <div class="CSS_인풋라벨">제목</div>
                  <input
                    type="text"
                    id="HTML_제목입력창"
                    placeholder="제목을 입력해 주세요."
                  />
                </div>
                <div class="CSS_일기쓰기">
                  <div class="CSS_인풋라벨">내용</div>
                  <textarea
                    id="HTML_내용입력창"
                    rows="5"
                    placeholder="내용을 입력해 주세요."
                  ></textarea>
                </div>
              </div>
              <div class="CSS_모달버튼부분">
                <button
                  type="button"
                  class="CSS_모달_버튼 CSS_모달_닫기버튼"
                  onclick="JS_모달열기기능('HTML_등록취소모달그룹')"
                >
                  닫기
                </button>
                <button
                  type="button"
                  id="HTML_등록하기버튼"
                  class="CSS_모달_버튼 CSS_모달_등록하기버튼"
                  onclick="JS_모달열기기능('HTML_등록완료모달그룹');JS_글쓰기기능();"
                  disabled
                >
                  등록하기
                </button>
              </div>
            </div>
          </div>
        </div>

        <!-- 등록완료모달 -->
        <div id="HTML_등록완료모달그룹" class="CSS_공통모달그룹">
          <div class="CSS_공통모달배경"></div>
          <div class="CSS_등록완료상자">
            <b class="CSS_등록완료제목">일기 등록 완료</b>
            <p class="CSS_등록완료내용">등록이 완료 되었습니다.</p>
            <button
              class="CSS_모달_등록완료버튼"
              onclick="JS_모달닫기기능('HTML_등록완료모달그룹');JS_모달닫기기능('HTML_등록모달그룹');"
            >
              확인
            </button>
          </div>
        </div>

        <!-- 일기 삭제 모달 -->
        <div id="HTML_일기삭제모달그룹" class="CSS_공통모달그룹">
          <div class="CSS_공통모달배경"></div>
          <div class="CSS_등록삭제상자">
            <b class="CSS_일기삭제제목">일기 삭제</b>
            <p class="CSS_일기삭제내용">일기를 삭제하시겠어요?</p>
            <div class="CSS_등록취소버튼영역">
              <button
                onclick="JS_모달닫기기능('HTML_일기삭제모달그룹');"
                class="CSS_모달_버튼 CSS_모달_닫기버튼"
              >
                취소
              </button>

              <button
                class="CSS_모달_버튼 CSS_모달_등록하기버튼"
                onclick="JS_일기삭제기능(event, 일기번호);JS_모달닫기기능('HTML_등록취소모달그룹');JS_모달닫기기능('HTML_등록모달그룹')"
              >
                삭제
              </button>
            </div>
          </div>
        </div>

        <!-- 등록취소모달 -->
        <div id="HTML_등록취소모달그룹" class="CSS_공통모달그룹">
          <div class="CSS_공통모달배경"></div>
          <div class="CSS_등록취소상자">
            <b class="CSS_등록취소제목">일기 등록 취소</b>
            <p class="CSS_등록취소내용">일기 등록을 취소 하시겠어요?</p>
            <div class="CSS_등록취소버튼영역">
              <button
                onclick="JS_모달닫기기능('HTML_등록취소모달그룹');"
                class="CSS_모달_버튼 CSS_모달_닫기버튼"
              >
                계속 작성
              </button>
              <button
                class="CSS_모달_버튼 CSS_모달_등록취소버튼"
                onclick="JS_모달닫기기능('HTML_등록취소모달그룹');JS_모달닫기기능('HTML_등록모달그룹');"
              >
                등록 취소
              </button>
            </div>
          </div>
        </div>
      </div>

      <!-- 플로팅버튼 -->
      <button id="HTML_플로팅버튼" class="CSS_플로팅버튼">
        <img
          class="CSS_플로팅이미지"
          src="./assets/images/floatingButton.png"
          onclick="JS_스크롤위로기능()"
        />
      </button>
    </div>

    <!--푸터-->
    <div id="HTML_푸터" class="CSS_푸터_영역">
      <div class="CSS_푸터">
        <div class="CSS_푸터_제목">민지의 다이어리</div>
        <p class="CSS_푸터_대표">대표 : {name}</p>
        <p class="CSS_푸터_Copyright">Copyright © 2024.{name} Co., Ltd.</p>
      </div>
    </div>
  </body>
</html>