운좋개

🟡 1. 데이터 타입 (Data Type) - 데이터 타입이랑 프로그래밍 언어에서 사용할 수 있는 데이터의 종류를 말합니다. 데이터 타입이 있는 이유는 데이터(변수)가 메모리에 저장이 될 때 메모리 공간을 얼마큼 확보를 해야 하는 지를 판단하기 위해서입니다. 그러하여 한정된 메모리 공간을 효율적으로 사용할 수 있게 됩니다. 쉽게 예시를 들면 택배 창고에 택배들이 들어오는데, 창고의 공간은 한정되어 있기 때문에 많은 택배를 넣기 위해서는 효율적으로 택배를 쌓아야 합니다. 그리고 나중에 찾기도 쉬워야 합니다. 그래서 랙이라는 아주 큰 서랍장을 만들어서 크기별, 종류별, 지역별 등으로 나눕니다. 저런 식으로 차곡차곡 쌓으면 많은 양의 택배를 보관할 수 있고, 찾기도 쉽게 되겠죠. 결국 데이터를 많이 잘 보관하..

🟡 HTMLCollection는 forEach, filter 등을 사용 불가. - JS로 HTML 요소를 불러오고 싶을 때 document.getElementsBy~~ 함수를 사용해서 가져올 것입니다. 이때 가져온 element들은 HTMLCollection객체 형태로 가져오는데, 배열에 담겨 오길래 당연히 map, filter, forEach가 되는 줄 알았으나 되지 않습니다. let checkboxList = document.getElementsByClassName('allDelete'); Array HTMLCollection 형태 filter 함수 forEach 함수 - 위 표에서 보시는 것처럼 HTMLCollection은 filter, forEach 등 Array에서 기본적으로 제공해주는 함수를 ..

🟡 1. 웹페이지 공간 분할 - 지금까지 HTML을 공부한 이유는 웹사이트를 만들기 위해서 공부를 했는데, 웹사이트를 잘 만들기 위해서는 초반 설계부터 잘해야 차후에 수정할 일이 많이 안 생깁니다. 그러기 위해서는 전체적인 큰 틀 즉 레이아웃을 잘 설계하고 화면 분할을 잘해야 됩니다. (건물을 짓기 전에 도면을 잘 만들어야 되는 거처럼) - 레이아웃을 구성하기 위해서는 공간을 분할을 하는데, 위 사진에 나온 예시가 보편적인 분할 종류입니다. 아래 사진은 실제 운영되고 있는 웹사이트 예시입니다. 예시 찾다가 포기... 예시 찾다가 포기... 🟡 2. 공간 분할 태그 - 공간을 분할하는 태그들로는 div, span, table 등이 있습니다. 과거 웹사이트에서는 주로 table로 공간 분할을 많이 했지만, ..

* 이번 글에서는 자바스크립트의 기본 문법들이 어떤 종류가 있고, 그 문법들은 어떠 것인지 간단하게만 설명하고 다음 글부터 문법 종류 한 개씩 짚어가보도록 하겠습니다. 🟡 1. 변수 (variable) - 수학을 배울 때 들었던 단어와 하는 일이 비슷합니다. 어떤 값을 담을 수 있는 그릇이라고 생각하시면 됩니다 :) 조금 더 어렵게 얘기를 해본다면 변수는 값(value)을 저장(할당)하고 저장된 값을 참조하기 위해 사용합니다. 그리고 정확히는 변수에는 값이 저장되어 있는 것이 아니고 값이 저장되어 있는 메모리 주소를 저장하고 있습니다. - 우리가 변수 'a'에 '닭강정'을 저장했다고 가정하면, 변수 'a'에는 '닭강정'의 메모리 주소인 '속초시'가 저장되게 됩니다. 그래서 우리가 변수 'a'를 호출하면 ..

🟡 1. select 태그 - select 태그는 form 태그 안에서 사용하는 입력 태그 중에 목록을 나타내고 싶을 때 사용합니다. - select 태그는 option 태그를 사용하여 항목들을 하나하나 나타낼 수 있습니다. 속성 설명 name select 태그의 이름을 설정 합니다. size 목록(select)을 펼치기 전에 보여질 항목의 개수를 설정 합니다. multiple 다중값을 선택 가능하도록 설정합니다. disabled 화면에는 표시되지만 선택을 할 수 없게 설정합니다. autofocus 웹 페이지 로딩된 후 목록으로 바로 포커스가 맞춰지게 설정합니다. 🟣 size 속성 1 2 3 4 5 🟣 mutiple 속성 1 2 3 4 5 🟣 disabled 속성 1 2 3 4 5 🟡 1.1 select..

🟡 1. form 태그 안에서 사용되는 입력 태그의 종류 input : 웹사이트에서 흔히 입력을 받는 거의 모든 종류를 input 태그라고 합니다. checkbox, date, email, radio, range 등등 select : 여러 개의 리스트에서 여러 개의 아이템을 선택할 때 사용됩니다. textarea : 긴 글을 입력할 때 사용되는 태그입니다. 주로 자기소개서 입력창 같은 곳에서 사용합니다. button : 서버로 전송을 실행하는 submit버튼, reset 하는 버튼 등이 있습니다. fieldset/ legend : 입력 태그들을 그룹화할 때 사용합니다. 🟡 2. Input 태그 - input 태그는 form태그 안에서 사용되는 입력 태그 중에서 가장 중요하면서 많이 사용되는 태그입니다. ..

🟡 1. form 태그 - form 태그는 사용자가 웹사이트를 통해 입력한 데이터를 수집하기 위해 사용되는 태그입니다. input, button, textarea, select, checkbox, radio button, submit button 등의 입력 양식 태그를 통해서 데이터를 수집합니다. 그리고 수집한 데이터를 하나로 묶어서 서버로 전송을 하는 역할을 합니다. userID: id: form 태그 실제 브라우저 화면 submit 버튼을 눌러 form 안에 데이터를 서버로 보낸 후 받은 결과 위에 예시처럼 form 태그는 form태그 안에 있는 입력 양식 태그들의 데이터를 모아서 서버에서 보내는 역할을 합니다. 아래 사진은 우리가 실생활에서 form태그를 접할 수 있는 예시입니다. 🟡 1.2 for..

🟡 1. 자바스크립트란? 자바스크립트는 객체 기반의 스크립트 프로그래밍 언어이다. 이 언어는 웹 브라우저 내에서 주로 사용하며, 다른 응용 프로그램의 내장 객체에도 접근할 수 있는 기능을 가지고 있다. -위키백과- 라고 위키백과에서 설명을 하고 있으나, 대체 이게 무슨 말일까..? Javascript는 HTML과 CSS로 만들어진 웹페이지를 동적으로 변경해주는 언어입니다. -생활코딩- 생활코딩에서는 조금 더 쉽게 설명이 되어 있습니다. 쉽게 예시를 들자면 사람의 몸이 웹사이트라고 하면 HTML은 뼈이고, CSS는 피부색, 외모이고 자바스크립트는 몸을 움직이는 근육이라고 생각하면 이해하기 쉬울 거 같습니다. 즉 자바스크립트는 웹사이트가 어떠한 기능 등을 수행할 수 있도록 해주는 언어입니다. 경고창을 띄운다..

🟡 1. img 태그 (이미지) - img 태그를 이용하면, 웹사이트에 이미지를 삽입할 수 있습니다. img 태그의 속성은 크게 4가지가 있습니다. 속성 설명 src src 속성은 이미지의 주소를 나타냅니다. 컴퓨터 내부의 파일 경로가 될 수 도 있고, 웹주소가 될 수도 있습니다. - 지옥사진은 웹주소, 라이언 사진은 컴퓨터 내부 주소. alt 이미지의 설명을 나타내는 속성입니다. 이미지 파일을 찾지 못하는 경우 이미지 대신 표시가 됩니다. width 이미지의 너비를 조절 할 수 있는 속성입니다. height 이미지의 높이를 조절 할 수 있는 속성입니다. 🟡 2. audio 태그 (음악, 오디오) - audio 태그는 오디오 파일을 삽일 할 수 있는 태그입니다. HTML5에서 추가된 태그로 IE8이하에서..

🟡 1. List(목록) 🟡 1.1 ul (순서가 없는 목록 - Unordered List) - ul 태그는 list 태그 중에서 순서가 없이 목록을 나타내고 싶을 때 사용하는 태그입니다. 내가 좋아하는 음식 목록 김치찌개 삼겹살 잡채 국밥 🟡 1.2 ol (순서가 있는 목록 - Ordered List) - ol 태그는 순서가 있는 목록을 나타내고자 할 때 사용하는 태그입니다. 내가 좋아하는 음식 순서 국밥 잡채 김치찌개 삼겹살 - type 속성을 이용하여 순서를 나타내는 문자를 바꿀 수도 있습니다. Value 설명 예시 코드 결과 1 숫자 (기본값) 아메리카노 페퍼민트 A 대문자 알파벳 아메리카노 페퍼민트 a 소문자 알파벳 아메리카노 페퍼민트 I 대문자 로마숫자 아메리카노 페퍼민트 i 소문자 로마숫자 ..