코딩헤딩

https://aws.amazon.com/ko/lightsail/ 가상 프라이빗 서버 및 웹 호스팅–Amazon Lightsail—Amazon Web Services WordPress, Magento, Prestashop, Joomla와 같은 사전 구성된 애플리케이션을 통해 단 몇 번의 클릭으로 블로그, 전자 상거래 또는 개인 웹 사이트를 구축합니다. aws.amazon.com 지금까지 코딩연습을 해오며 html에서는 Liveserver, React에서는 localhost:3000, springboot에서 localhost:8080 등 내 pc가 서버역할을 했지만 Lightsail을 통해 서버를 할당받고 나뿐만이 아닌 다른 사람들이 내가 만든 홈페이지로 접속할 수 있도록 세팅을 해보겠다. 먼저 첫 번째로..

지난 포스팅에서 자바스크립트로 랜덤한 번호 6개를 html화면에 출력하는 방법을 알아보았다. https://coding-heading.tistory.com/7 javascript를 html으로 출력하기 어제 생성했던 로또 번호를 브라우저 화면에 출력하는 방법을 알아보겠다. 어제 스크립트를 만들고 그 결과를 콘솔창에서 확인 했다. https://coding-heading.tistory.com/6 랜덤으로 로또 번호 생성하기 coding-heading.tistory.com 더 나아가 아래와 같은 모습으로 뭔가 작동하고 있다는 느낌을 주고싶어져 아래 영상까지 만들어 가는 과정을 올려겠다. 1. html 코드 추첨 ??, ??, ??, ??, ??, ?? 2-1. javascript 코드 여기서는 setInte..

구현된 모습 1. html 코드 menu1 text1 text1 text1 text1 menu2 text1 text1 text1 text1 menu3 text1 text1 text1 text1 menu4 text1 text1 text1 text1 2.css코드 주의할 점 text-decoration 은 none으로 주어야 a태그의 밑줄이 사라진다. list-style 은 none으로 주어야 ul,li 태그앞의 동그라미 기호가 사라진다. 하위 ul이 커서를 올리기 전까지 보이지 않게 하기 위해 ul의 display : none. 상위 ul 내부의 li 들이 가로로 보여져야 하기 때문에 li의 display : inline-block.

어제 생성했던 로또 번호를 브라우저 화면에 출력하는 방법을 알아보겠다. 어제 스크립트를 만들고 그 결과를 콘솔창에서 확인 했다. https://coding-heading.tistory.com/6 랜덤으로 로또 번호 생성하기 우선 코드부터 자바스크립트의 Math.random 함수를 사용하여 중복되지 않은 랜덤한 숫자 6개를 뽑는 경우를 만들었다. console.log로 찍어 브라우저에서 개발자 도구로 확인 가능하다. 다음시간에는 coding-heading.tistory.com 오늘은 코드 한줄을 추가해서 브라우저화면에 출력해 보도록 하겠다. document.getElementById("ran").innerHTML = selected "ran"이라는 아이디를 가진 대상에 selected 라는 함수의 값을 넣..

우선 코드부터 자바스크립트의 Math.random 함수를 사용하여 중복되지 않은 랜덤한 숫자 6개를 뽑는 경우를 만들었다. console.log로 찍어 브라우저에서 개발자 도구로 확인 가능하다. 다음시간에는 이 결과를 html에 출력하는 방법을 올려보겠다.

HTML 버튼

늦었지만 약 3일동안 만들었던 최종 완성본이다. 팀원 4명과 함께 코딩을 배운지 1달도 안지나서 첫 프로젝트였기에 많이 부족하지만 , 이번 프로젝트에서 중앙 하단 모두확인 했다는 안내와 좌우 사이드 메뉴바를 만들고 기능을 넣는 작업을 하며 프론트 기술 특히 css 미디어쿼리 각종 html 태그들을 사용이 조금 더 수월해진거같다. 이번에는 원본과 최대한 똑같이 만들어가는 작업에 집중을 했다면 다음 프로젝트에서는 나만의 창의성이 담긴 완성물을 만들어 보고싶다.