CSS 5

[JavaScript] 허접한 몬스터 때려잡기 게임 만들기

현재 JavaScript의 기초 부분을 학습 중이다.document.createElement() 메소드를 활용하여 몬스터 잡기 게임을 만들어 보았다. 우선 HTML 코드는 이렇게 작성해 보았다. container 의 style은 추후에 작성하겠지만 monster의 움직임을 구현하기 위해 작성하였다.const container = document.getElementById("container");// 몬스터 모양 만들기const monster = document.createElement("div");monster.textContent = "*_*";monster.style.width = "50px";monster.style.height = "50px";monster.style.backgroun..

개발/JavaScript 2024.09.11

[JavaScript] 웹 개발에서 JavaScript가 중요한 이유

JavaScript란?JavaScript는 웹 개발을 중심으로 사용되는 스크립트 언어이다.주로 웹 페이지의 동적 콘텐츠를 구현하는 데 사용된다.웹 브라우저에서 기본적으로 실행되며, 사용자가 웹 페이지와 상호작용할 수 있는 기능을 추가하는 데 중요한 역할을 한다.JavaScript는 ECMAScript(ECMA-262 표준) 기반으로 발전해 왔으며, 현재는 웹뿐만 아니라 다양한 환경에서 사용될 수 있는 범용 프로그래밍 언어로 발전했다.   JavaScript의 주요 특징1. 인터프리터 언어: 컴파일 과정을 거치지 않고 바로 실행! 덕분에 빠른 개발과 테스트가 가능2. 동적 타이핑: 변수 선언 시 타입 명시가 필요하지 않다! 유연성을 제공하지만 그만큼 오류를 발생시키기도 함. 변수 사용은 최소화하자.3. 프..

개발/JavaScript 2024.09.10

[HTML/CSS] 인라인 요소와 블록 요소

과제를 수행 중, label 태그에 상하 여백을 넣으려는데 margin이 적용되지 않았다.머리 싸매다 질문 드리니 label 태그가 인라인 요소라서 상하 마진을 넣을 수 없다고 답변해 주셨다.HTML에서 요소는 두 가지 유형으로 분류된다.바로 인라인 요소(Inline Elements)와 블록 요소(Block Elements) 인라인 요소- 하나의 태그가 브라우저에서 실제로 코딩된 그 영역만 차지하여 좌우로 다른 태그가 나란히 위치할 수 있는 요소들- 인라인 요소는 컨텐츠의 폭과 높이에만 영향을 미치며, 전체 줄의 폭을 차지하지 않음.- 다른 인라인 요소나 텍스트가 함께 한 줄에 배치됨- 상하 마진(margin) 적용 불가 (좌우 마진, 패딩 및 상하 패딩은 가능)- 크기 조절(width, height) ..

개발/HTML&CSS 2024.08.31