완성된 모습이다. 아직 조금 더 발전시키고 싶지만 일단 완성이다.
강의를 하면서 나중에 css적용하는 것도 가르쳐주신다고 하셨는데 기능구현까지만 해주셨다...
그래서 처음에는 왼쪽 상단 구석에 모두 박혀있었다.
이미지 중앙에 오게하는 것을 알아보다가 잘 안되서 킵해두었었다.
다시 완성을 해두어여겠다 싶어서 파일을 열어보았다.
div태그를 잘못 묶어두어서 잘 되지 않았었다. 주석 처리를 해가면서 하나씩 테스트를 하다가
중앙에 넣기 성공했다.
완성본 예시 https://serranoarevalo.github.io/momonton/
예시를 보고 비슷하게 만들었다.
이름 입력, 할 일목록 넣는 모습
할 일 목록 글씨를 조금 키워야 할 것 같다. 급한 건 아니니 일단 나두자.
새로 고침을 하면 이렇게 배경과 명언이 바뀐다.
새로고침 한 번더
문제점 및 개선하고 싶은 사항
-
input 입력창에 border-bottom이 작동이 안된다. 예시 사이트에는 작동이 되는데 나의 페이지에서는 먹통이다.
-
플레이스홀더 글씨 색상이 회색인데 흰색으로 바꾸고 싶다.
-
만약 정식 서비스로 이용한다는 가정하에 다른 명언 및 이미지를 보고 싶은데 새로 고침을 하면 매번 위치 허용 창이 뜬다. JS에서 수정해야할 문제인 것 같지만 24시간 동안이라던지 한 번 허용하면 다시 묻지 않게 바꾸고 싶다.
문제 해결한 사항
-
이미지 위에 텍스트를 올리는 것에 성공은 했으나 중앙 배치가 되지 않고 자꾸 왼쪽 상단에만 보였다.
해법: 알고보니 body안에서 div로 다 묶어 두었던게 문제였다. -
인풋 창에 텍스트를 입력을 할 수가 없었다. 클릭이 되지 않고 드래그도 되지 않았었다.
해법: 인풋영역을 묶어 놓은 div에 포지션을 넣지 않아서 그랬다.
