xu의 성장일지

JavaScript를 복습하는 차원에서, 간단한 Todo List를 만들어 보았습니다.완성본은 이렇게 생겼습니다!   TODO LIST 추가 전체 삭제 xu..

자바스크립트 강의를 마무리 하면서, 계산기를 만들어 보았습니다.기능 구현뿐만 아니라 보기 좋은 코드에 대한 고민을 가지고 코드를 작성했으며, 실제로 리팩토링도 여러 번 진행하였기에 기록하기 위해 블로그를 작성합니다. 0 C ± % / 7 8 ..

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

시맨틱 태그의미를 부여한 태그( 태그에 의미를 부여했다!)예시로는 , 등이 있다. 이름만 봐도 상단과 하단이라는 것을 알 수 있다!이러한 시맨틱 태그의 등장으로 태그만 보고서 의미를 이해할 수 있게 되었다. 시맨틱 태그를 사용해야 하는 이유 태그를 사용해도 똑같이 만들 수 있는데, 굳이 시맨틱 태그를 왜 사용해야 할까?1. HTML 문서의 가독성과 유지보수가 쉬워짐2. 웹 브라우저가 HTML만으로 상단, 하단, 본문 어느 영역인지 쉽게 확인이 가능함3. 검색 엔진이 검색을 수행할 때, HTML 내 태그를 분석할 수 있음 -> 검색 엔진 최적화(SEO)에 도움이 됨!! 검색 엔진 최적화(SEO)구글에 어떤 것을 검색을 하면이렇게 여러 페이지가 노출되는데, 대부분의 사람들은 상위 노출된 페이지를 먼저 열람..

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