나공탐 제작 3일차 (23.5.25)

3일차 진행 상황 (2023.5.25)
● 유형 검사 (구현 완료)
- 스타일시트 따로 제작 >> 메인과 다르게 구분하여 잘 알아볼 수 있도록 하였음.
- 테이블을 통해 테스트 기능 구현 (질문 부분 병합 + 보기 비율 일정히)
- 왼쪽에 메모장 구현 후, 고정.
- 결과를 details를 통해 알 수 있도록 함.
● 메인 메뉴
- 가이드 부분의 항목 버튼에 마우스를 갖다대면 진한 글씨 + 마우스 커서 모양 바뀔 수 있도록 구현.
- 가이드 부분의 항목 버튼끼리 간격을 주어 가독성을 올림.
●  기타 스타일
- 모든 페이지에 항목을 누를 때 글씨가 진하게 나오도록 설정함.
 
새롭게 배운 지식
- 테이블 셀 병합
맨 위에 질문이 한줄로 나오고 그 밑에 보기들이 일정한 비율로 4개 나오도록 제작하기 위해 colspan="4" 속성으로 가로 셀 병합을 해주었음.
참고 링크 : https://blog.naver.com/yesmiran/222596431287

[HTML 기초] 4. table태그(tr, td, th), 병합(colspan, rowspan), 입력양식태그(form, input) type주기, 회원가입창

- 새로고침 시 나오는 경고창
유형 검사의 경우 사용자가 클릭한 데이터의 값을 저장해서 새로고침을 해도 그대로 결과값이 남아있을 수 있도록 하고 싶었는데, 찾아보니 아직 내 수준으로는 어려운 부분이라고 생각하였음.
하지만 새로고침을 하거나 다른 항목으로 이동할 때 적어도 경고창이 필요하다고 생각하였고, 서치하다 마침 관련 코드가 있어서 그냥 긁어 왔다.. 찾아봐도 무슨 소리인지 이해가 잘 안 돼서 이 부분은 교수님께 사용 가능한지 여쭈어 보고, 넣어봐야겠다.
참고 링크 : https://zyngirok.com/entry/JavaScript-%EC%83%88%EB%A1%9C%EA%B3%A0%EC%B9%A8-%ED%8E%98%EC%9D%B4%EC%A7%80-%EB%82%98%EA%B0%80%EA%B8%B0-%EB%B0%A9%EC%A7%80

JavaScript | 새로고침 페이지 나가기 방지하기 (실행 전에 알림 띄우기)

- 글씨 진하게 하기
<b>는 태그로만 사용이 가능하기 때문에 스타일 시트로 가져오려면 어떻게 해야하는지 찾아보던 중 font-weight: bold; 프로퍼티? 를 찾게 되었다. 그래서 id를 지정와 hover을 지정하여 각 항목을 마우스로 갖다 댈 때 마다 이벤트가 발생할 수 있도록 구현하였음
- 텍스트 상자 글꼴적용
<input type="text"> 가 한 줄 텍스트인 걸 기억 못하고 계속 width="100%" 이랬음...
그래서 <textarea>로 메모장 크기를 설정하였는데, 페이지에서 사용자가 크기조절이 가능하였음.. 그래서 새로운 resize:none; 를 배우고 이를 통해 사이즈가 완전히 고정되도록 하였음. 그런데 문제는 글꼴 적용이 안 됐음. class로 지정하고 id로 지정하고 속성으로 지정해보았는데도, 안 되길래 gpt에게 물어봤더니 textarea 요소는 내부에 직접적으로 HTML 요소를 포함시킬 수 없다. 라는 답변을 주었음. (진짜 맞나? 찾아도 안 나옴..) 대신 input type="text"는 글꼴 적용이 가능하다는 것을 알게 되었고 고민하다가  input type="text"를 여러 줄 쓴 다음. 이 텍스트 상자의 테두리를 없앴음. border: none; 을 이용함. 그리고 fieldset을 통해 input type="text" 10개를 묶어 주었음. 
참고링크 : https://webisfree.com/2014-01-25/[css]-textarea-%EC%82%AC%EC%9D%B4%EC%A6%88-%ED%81%AC%EA%B8%B0-%EC%88%98%EC%A0%95-%EB%AA%BB%ED%95%98%EA%B2%8C-%EB%B3%80%EA%B2%BD-resize 

[CSS] textarea, 사이즈, 크기 수정 못하게 변경, resize

 
문제점 
- 화면 밀림 현상 (어떻게 할 수 있는 방법이..)
- 유형 검사 항목에서 결과를 위해 details를 사용했는데, 이것도 hover을 통해 누르면 글씨가 진하게 되도록 했지만 자꾸 오른쪽으로 튕겨나와서 그냥 안 했음... 이유가 뭔지 안 나와서 답답
- 문제점보다는 아쉬운 것? 유형 검사의 퀄리티가 낮음.. 사용자가 직접 답을 체크하도록 하는 게 너무 구리다.. 빨리 공부해서 구현할 수 있으면 구현해보고 싶다.
 
느낀점
유형 검사 만드는데 한... 4시간? 5시간? 정도 걸린 것 같은데 아무래도 처음부터 화면 비율을 생각하고, 각 태그들이 어떤 역할을 할 것인지 미리 정한 후에 하니까 머리 속에 정리도 잘 되어서 빨리 끝날 수 있었던 것 같다... 정말 main stylesheet는 이제 수정이 불가할 정도로 뒤죽박죽이라.. 고치려고 수정하면 오류가 난다... 시간이 되면 고치고 싶다...
그래도 나름 웹 페이지의 형태가 갖춰진 것 같아서 뿌듯하다! 왼쪽이 새로 만든거고 오른쪽이 main 스타일 시트인데 응... 역시 구조화 하는 것이 정말 중요한 듯!
 

새로 만든 스타일시