전체 글 195

[30Days of HTML CSS] Day 02 | Input Types Lab

HTML Input Types form 태그를 이용해서 input 태그들을 작성했다. form 태그는 폼을 만드는 가장 기본적인 태그이다. input 태그를 이용한 이유는 폼에서 사용자 입력을 받기 위해 사용하는 태그이다. input 태그에서 가장 중요한 속성은 type과 placeholder이다. placeholder는 입력란의 임시 텍스트릴 지정하는 속성이다. br태그를 이용해서 값들을 띄었다. https://recordoftheday.tistory.com/entry/HTML-%ED%8F%BC%EA%B3%BC-%EA%B4%80%EB%A0%A8%EB%90%9C-%ED%83%9C%EA%B7%B8%EB%93%A41 [HTML] 폼 태그 | input 태그 | label 태그 폼(form) 태그 폼? 사용자..

30Days of HTML CSS 2023.11.20

[30 Days of HTML CSS] Day 01 | Semantic HTML Structure

Page Header Youtube Naver Google Main Content Footer Day 01은 시멘틱 HTML 구조의 이해를 돕기 위해서 HTML 코드만 작성하면 된다. 다만 영어를 이해하는데 시간이 걸리뿐 특별한 어려움은 없었다. https://codedamn.com/challenge/30-days-of-html-css 30 Days of HTML CSS - Codedamn Level up your coding skills with a daily coding challenge. Compete and share your progress every day and become a better developer. codedamn.com

30Days of HTML CSS 2023.11.17

[모던 자바스크립트 Deep Dive] 6장 데이터 타입

데이터 타입 데이터 타입(줄여서 '타입'이라고 함)은 값의 종류를 말한다. 자바스크립트의 모든 값은 데이터 타입을 갖는다. 구분 데이터 타입 설명 원시 타입 숫자 타입 숫자, 정수와 실수 구분 없이 하나의 숫자 타입만 존재 문자열 타입 문자열 불리언 타입 논리적 참(true)와 거짓(false) undefined 타입 var 키워드로 선언된 변수에 암묵적으로 할당되는 값 null 타입 값이 없다는 것을 의도적으로 명시할 때 사용하는 값 심벌 타입 ES6에서 추가된7번째 타입 객체 타입 객체, 함수, 배열 등 숫자 탕비의 값 1과 문자열 타입의 값 '1'은 비슷해 보이지만 전혀 다른 값이다. 숫자 타입의 값은 주로 산술 연산을 위해 생성하지만 문자열 타입은 주로 텍스트를 화면에 출력하기 위해 생성한다. 확..

[모던 자바스크립트 Deep Dive] 5장 표현식과 문

값(value) 값은 식(표현식)이 평가되어 생성된 결과, 변수에 할당하되는 것은 값 평가 식을 해석해서 값을 생성하거나 참조하는 것 // 10 + 20은 숫자 값 30을 생성한다. 10 + 20; //30 모든 값은 데이터 타입을 가지며, 메모리에 2진수, 즉 비트의 나열로 저장된다. 메모리에 저장된 값은 데이터 타입에 따라 다르게 해석 가능 // 변수에는 10+20이 평가되어 생성된 숫자 값 30이 할당 관리 var sum = 10 + 20; 위 예제의 sum 변수에 할당 되는 것은 10 + 20이 아니라 결과 값인 30이다. 즉, 변수 이름 sum이 기억하는 메모리 공간에 저장된 것은 30이다. (10 + 20)은 할당 이전에 평가되어 값을 생성해야 한다. 위의 예제처럼 식으로 생성할 수 있지만 가..

[모던 자바스크립트 deep dive] 4장 변수

변수 프로그래밍 언어는 기억하고 싶은 값을 메모리에 저장하고, 저장된 값을 읽어 들여 재사용하기 위해 변수라는 매커니즘에 저장한다. 메모리(Memory) 메모리는 데이터를 저장할 수 있는 메모리 셀의 집합체 메모리 셀 하나의 크기는 1바이트(8비트), 컴퓨터는 메모리 셀의 크기 즉 1바이트 단위로 데이터를 저장하거나 읽어들임. (각 셀은 메모리 주소를 갖음) 메모리에 저장되는 모든 값은 2진수로 저장 변수(variable)는 하나의 값을 저장하기 위해 확보한 메모리 공간 자체 또는 그 메모리 공간을 식별하기 위해 붙인 이름 프로그래밍 언어에서 값을 저장하고 참조하는 매커니즘 값의 위치를 가리키는 상징적인 이름 상징적인 이름인 변수는 프로그래밍 언어의 컴파일러/ 인터프리터에 의해 값이 저장된 메모리 공간의..

[JS] 핸들링 클릭 이벤트(handling click events)

확인 단추를 클릭하면 응용 프로그램이 실제로 뭔가를 해보도록 하겠다. 이게 코드가 DOM에서 발생하는 뭔가에 반응하는 첫번째 시간이 될거다. 일단 그렇게 하려면 이벤트 리스너(event listener)가 필요하다. Event는 페이지에서 일어나는거다. 예를 들어 마우스 클릭, 마우스 무빙, 키 프레스 등 Event listener의 특징은 이벤트가 발생하길 기다렸다가 반응할 수 있다. 이벤트를 듣기 위해서는 먼저 이벤트가 발생해야할 요소를 선택해야 한다. 핑크색 박스안에 있는 이 버튼 요소의 이벤트를 들어야 한다. 이 Check 버튼말이다. 내가 관심있는 클릭이 여기서 발생할 것이다. 이 버튼을 클릭하면 뭔가 일어나야 한다. document.querySelector('.check'); html 파일로 ..

🦎 JavaScript 2023.03.23

[JS] DOM 요소 선택 및 DOM조작

'use strict'; console.log(document.querySelector('.message').textContent); querySelector을 이용해서 이 메시지 요소를 선택했다. 선택된 요소로부터 텍스트 콘텐츠도 얻었다. 텍스트 콘텐츠를 얻는 것 외에 요소의 콘텐츠도 설정할 수 있게되었다. document.querySelector('.message').textContent = '👏 Correct Number!'; console.log(document.querySelector('.message').textContent); DOM 조작 DOM 메모의 텍스트 콘텐츠를 조작했다. document.querySelector('.number').textContent = 13; document.qu..

🦎 JavaScript 2023.03.23

[JS] DOM

DOM 문서 개체 모델을 의미한다. 기본적으로 HTML 문서를 구조적으로 나타낸다. JS를 이용해 HTML 요소와 스타일에 엑세스해 조작할 수 있게 해준다. 예를 들어, 텍스트도 바꾸고 HTML 특성도 바꾸고 JS에서 CSS 스타일도 바꿀 수 있다. ∴ DOM은 기본적으로 HTML 문서와 JS 코드 사이의 연결점 HTML 페이지로 로드되면 브라우저가 자동으로 DOM을 생성한다. 이런 나무 구조물에 저장한다. 이 트리에서는 각각 HTML 요소가 하나의 개체이다. A paragraph with a link A second paragraph 사진은 tree structure이다. HTML의 각 요소에서 볼 수 있듯이 요소 노트와 DOM 트리가 있다. JS를 이용해 각 노드에 액세스하고 상호작용할 수 있다. D..

🦎 JavaScript 2023.03.23

디버깅

Debugging(디버깅) 디버깅은 소프트웨어 개발자라면 누구나 알아야할 기술이다. 또한 중요한 기술이기도 하다. 오류를 찾아 고치는 것이다. 소프트웨어 버그는 컴퓨터 프로그램의 결함이나 문제이다. 기본적으로 프로그램의 예상치 못하거나 의도치 않은 행동이 버그이다. 버그라는 용어는 실제 버그가 하버드대 컴퓨터에서 오류를 일으켜서 1940년대에 만들어졌다. 프로그램에서 버그가 바생하는 이유는 다양하다. 하지만 중요한 것은 버그는 소프트웨어 개발의 정상적인 부분이라는 것이다. 놀랍게도 복잡한 앱에는 버그가 포함되어있다. 물론 몇년동안 발견되지 않은 버그는 보안상의 허점이나 다른 문제를 일으킬 수 있다. 만약에 역방향 함수 작성을 마쳤다고 가정해보겠다. reverse([1, 3, 5, 7]) ↓ [5, 1, ..

카테고리 없음 2023.03.22
728x90