전체 글10 [웹] 로또 번호 뽑아주는 사이트 만들기! - 2 HTML, CSS, JS(JavaScript)를 분리하는 것은 웹 개발에서 중요한 개념인 "관심사의 분리(Separation of Concerns)"를 따르기 위함이다. 이 원칙에 따라 HTML은 웹 페이지의 구조를, CSS는 스타일을, JavaScript는 기능을 담당하게 된다. 이렇게 하는 이유는 아래와 같다: 1. 가독성: 각 기능별로 코드가 분리되어 있으면 코드를 읽고 이해하는 데 용이하다. 2. 재사용성: CSS 스타일시트나 JavaScript 파일을 여러 HTML 문서에서 재사용할 수 있다. 3. 유지보수: 한 곳에서 문제가 발생하면 해당 부분만 찾아 수정하면 되므로 유지보수가 쉽다. 아래는 HTML, CSS, JS를 분리한 버전의 코드이다: 1. HTML(lotto.html) 로또 번호 생성.. 2023. 5. 30. [JavaScript] JS random 함수, ==, === 차이!, sort 1. Math.random() 함수 이 함수는 0 이상 1 미만의 무작위 실수를 생성한다. 이걸 통해서 임의의 숫자를 생성할 수 있다. 예를 들어, 1부터 100까지의 무작위 정수를 생성하려면 Math.random()의 결과에 100을 곱한 후, Math.floor() 함수를 사용하여 소수점 이하를 버림 처림하면 된다. 2. ==, === 차이! == 연산자는 두 값이 동등한지 비교한다. 즉, 두 값이 같은 타입이 아니더라도 타입 변환을 통해 비교한다. === 연산자는 두 값이 일치하는지 비교한다. 즉, 두 값이 같은 타입이고 동일한 값을 가지는 경우에만 true를 반환한다. 3. Array.prototype.sort() 이 메서드는 배열의 요소를 적절한 위치에 정렬하며, 문자열 유니코드 코드 포인트 순.. 2023. 5. 29. [웹] 로또 번호 뽑아주는 사이트 만들기! - 1 저번 게시글에 이어서 이번에는 기초적인 html, css, javascript를 활용해서 직접 사이트를 만들어보고자 한다. 개발은 Visual Studio Code(VS code)로 이루어질 것이다. VS code 설치 방법은 조만간 글을 남기겠다. 1. VS code 처음 화면이다. 왼쪽 위의 File->Open Folder를 누른 후 새 폴더를 만들고 그 폴더를 선택한다. 그 후 새 폴더에 마우스를 갖다대면 New file이 있는데, 그걸 눌러서 lotto.html, style.css, random.js를 추가해준다. 이제 만들 준비가 모두 끝났다. lotto.html 파일에서 아래와 같이 !를 치고 tab을 눌러주면 기본적인 html 세팅이 완성된다 이게 기본적인 html 세팅이다. : 이 선언은 .. 2023. 5. 29. [웹] 웹 개발을 위한 HTML, CSS, JavaScript 기초 뽀개기! 1. 웹 개발의 세 가지 기둥: HTML, CSS, JavaScript 웹 개발을 위해 필수적으로 알아야 하는 세 가지 기본 언어는 HTML, CSS, JavaScript입니다. HTML은 웹 페이지의 구조를 정의하는 데 사용되고, CSS는 웹 페이지의 스타일을 정의하는 데 사용됩니다. JavaScript는 웹 페이지에 동적 기능을 추가하는 데 사용됩니다. 2. HTML: 웹의 뼈대 HTML은 'Hyper Text Markup Language'의 약자로, 웹페이지의 뼈대를 이루는 언어입니다. 태그(tag)라고 불리는 코드 조각들을 사용해 웹페이지의 구조를 정의합니다. 기본적인 HTML 문서의 구조는 다음과 같습니다: 제목 단락. 이 HTML 코드는 웹페이지에 제목과 한 단락을 출력합니다. 3. CSS: .. 2023. 5. 27. 이전 1 2 3 다음
