궁금한 고양이 html 실전 연습

JavaScript 배운 내용을 실전에서 활용해보고자 만든 meow.html

 

아직 if문을 공부한지 하루도 안된 상태라 미숙한 부분이 많다

강사님의 도움을 받아 수정을 하였다

 

 

 

 

강사님 설명을 듣고 수정한 부분

 

1.false입력시 true나오는 이유 : if(tf='true') 가 잘못됨 같다는 == 연산자로 사용하기
2.고양이 그림의 위치가 정중앙이기 위한 방법 : flex는 하위의 위치를 정해주기 때문에 <div> 를 생성하여 img 를 묶어주고 <style>에서 img가 아닌 display에 flex로 위치를 정해주었더니 원하던대로 정중앙에 고양이가 나오게되었다

3. 환영합니다 000님! 에서 str을 넣는 법 : <span>을 사용하여 태그를 새로 생성한다. 이때 원래는 script작성 후 style과 img,p 등을 작성하였는데 위치를 바꾸어준다. 태그 생성이 먼저 이루어져야하기 때문이다. 이후 span에 'id=username'을 만들어준 후 script 에서 document.querySelector().innerHTML=str; 을 이용하여 사진과 같은 화면이 나오게된다.

첫 실행시 나오는 화면

이름 작성과 true/false 확인후 나오는 화면

개선점

 

아직은 true여도 false여도 동일한 결과가 나온다

그리고 제목의 위치와 크기등도 조절하고 다양한 것을 넣어보고 싶다