꿈트(GGUMT)

forEach문 이해하기 [데이터불러오기] 파트에서 배운 forEach문을 공부해 보려고 합니다. forEach문은 JavaScript에서 배열(array)에 포함된 각 요소(element)에 대해 반복적으로 작업을 수행하는 메서드입니다. for문 for(let i=0; i { console.log(i); }); forEach문 만드는 법 arr.forEach(callback(currentValue [, index [, array]])[, thisArg]) arr : 작업을 수행할 배열명 callback : 배열의 각 요소에 대해 실행할 함수 currentValue : 현재 배열 요소의 값(내가 정하는 값) index(선택적) : 현재 배열 요소의 인덱스 array(선택적) : 배열자체 thisArg(선..

자바스크립트 테스트 리뷰 입니다. 01. 결괏값을 작성하시오 { if( null ){ console.log("true"); } else { console.log("false"); } } 결과보기 더보기 false 02. 결괏값을 작성하시오 { let num = 0; while( num 6 ){ break; } console.log(num); } } 결과보기 더보기 1, 2 , 4, 5, 6 07. 결괏값을 작성하시오 { for(let i=1; i { const str = "함수가 실행되었습니다."; return str; } console.log(func()); } 결과보기 더보기 함수가 실행되었습니다. 11. 결괏값을 작성하시오 { let direct = 1; function gallery(num){ i..

[javascript] 퀴즈 이펙트 : 문제 풀고 정답/오답에 따라 다른 화면이 나오는 효과 퀴즈의 답을 적어 제출했을 때, 정답이면 강아지가 웃고, 오답이면 강아지가 우는 화면을 보여줍니다. 스터디 목적은 자바스크립트에서 컨트롤 하고 싶은 선택자 전달하기(데이터 저장), 문제의 정보 작성하기(데이터 저장), 전달한 선택자에 맞는 정보 전달하기(데이터 불러오기), 만들어 놓은 정답과 해설 숨기기(데이터 제어하기) 사용자가 정답을 입력하고 버튼을 클릭하면 몇가지 이벤트 발생(데이터 제어하기) Quiz 주관식 확인하기 유형 1 2 . 정답확인하기 연변대비 설명 aimee00418@gmail.com 1. 컨트롤 하고 싶은 선택자 전달하기(데이터 저장) const quizWrap = document.queryS..

퀴즈 이펙트 : 퀴즈 내고 맞추는 페이지 만들기 퀴즈를 푸는 사이트를 만들어 보겠습니다. HTML/ CSS/ JAVASCRIPT를 활용하여 만들었습니다. 목적은 자바스크립트로 문제를 저장하고 문제에 맞는 텍스트를 출력할 수 있도록 만들었습니다. HTML Quiz 정답 확인하기 유형 . 정답확인하기 연변대비 aimee00418@gmail.com CSS_공통 리셋 /* reset css */ @import url('https://webfontworld.github.io/neodgm/NeoDunggeunmo.css'); @import url('https://webfontworld.github.io/DungGeunMo/DungGeunMo.css'); @import url('https://webfontworld...

텍스트 타입 웹페이지 만들어보기 완성 된 웹사이트를 만들기 전 다양한 유형의 웹페이지 구조를 만들어 보고 있습니다. 하나의 웹사이트에는 용도에 따라 다양한 유형의 페이지들이 조합되어 있습니다. 헤더타입, 배너타입, 이미지타입, 카드타입, 텍스트타입, 푸터타입 등으로 분류하여 작업 중 입니다. 이번에 메모할 유형은 문자가 많이 보여지는 형태인 텍스트타입 페이지 입니다. 완성된이미지 코드보기 NOTICE 나에게 맞는 반려식물 고르기 건강 관심형 스투키는 사막에 살던 다육식물로 물을 자주 줄 필요가 없어 키우기 쉬운 편에 속합니다. 또 밤에 이산화탄소를 배출하는 보통 식물과는 달리, 밤에 이산화탄소를 흡수하고 산소를 배출해 침실에... 더보기 깜빡깜빡형 식물에 물 주는 것을 자꾸 깜빡~깜빡하는 분들은 주목해 ..

자바스크립트 데이터 불러오기 01. 변수 : 데이터 불러오기 02. 상수 : 데이터 불러오기 03. 배열 : 데이터 불러오기 : 기본 04. 배열 : 데이터 불러오기 : 2차 배열 05. 배열 : 데이터 불러오기 : 갯수 구하기 06. 배열 : 데이터 불러오기 : for()문 07. 배열 : 데이터 불러오기 : 중첩 for()문 08. 배열 : 데이터 불러오기 : forEach() 09. 배열 : 데이터 불러오기 : for of 10. 배열 : 데이터 불러오기 : for in 11. 배열 : 데이터 불러오기 : map() 12. 배열 : 데이터 불러오기 : 배열 펼침연산자 13. 배열 : 데이터 불러오기 : 배열 구조분해할당 14. 객체 : 데이터 불러오기 : 기본 15. 객체 : 데이터 불러오기 : O..

예제 - 외부소스 연결 (예: 스타일시트) 정의 다른 웹페이지 소스 등을 현재 웹페이지에 끌어와 적용할 때 사용. (= 외부파일링크) 1. head 태그 내부에 사용해야 하지만, 각 개별 웹페이지 상단에 넣어 사용할 수도 있음. 2. HTML5에서 일부 속성 제거 및 추가. 3. HTML에서는 종료 태그없이 단독 사용하나, XHTML에서는 반드시 끝에 / 붙여 닫아야 함. 4. 구글 웹마스터 Favicon (파비콘) 가이드라인 https://developers.google.com/search/docs/appearance/favicon-in-search?hl=ko 구문 cf. XHTML 경우. 속성 속성 속성값 쓰임새 비고 rel alternate archives author bookmark externa..

자바스크립트 기초 상식 알아보기 자바스크립트 배울 때 기본지식 1) 인터넷과 웹(WWW)에 대한 전반적인 이해 2) HTML(HyperText Mark-up)에 대한 실무 지식 자바스크립트는 무엇인가요? JavaScript는 개발자가 대화식 웹 페이지를 만들기 위해 사용하는 프로그래밍 언어입니다. 소셜 미디어 피드 새로 고침부터 애니메이션 및 대화형 지도 표시에 이르기까지, JavaScript 기능은 웹사이트의 사용자 경험을 개선할 수 있습니다. 클라이언트 측 스크립팅 언어로서 JavaScript는 월드 와이드 웹의 핵심 기술 중 하나입니다. 예를 들어 인터넷 탐색 시 웹페이지에서 이미지 슬라이드쇼, 클릭하면 표시되는 드롭 다운 메뉴 또는 객체 색상의 동적 변화를 보게 된다면 이는 JavaScript의 ..

자바스크립트 오늘의 시험 리뷰 // 01. 1-50까지 for문으로 출력 { for(let i=1; i{ const str = "화살표 : 리턴함수 "; return str; } document.write(func()) } document.write(" ") } 정답 화살표 : 선언함수 화살표 : 익명함수 화살표 : 매개변수함수 화살표 : 리턴함수

See the Pen Untitled by aimee418 (@aimee418) on CodePen.

자바스크립트 제어문 01. if문 if문은 가장 간단한 조건문이다. 주어진 조건이 참이면 true, 아니면 false를 출력한다. 1, true, "0","1", 0

font style 문자 스타일 정리집 font-style .normal { font-style: normal; } .italic { font-style: italic; } .oblique { font-style: oblique; } font-family font-family속성은 하나 이상의 글꼴 모음을 쉼표로 구분하여 나열합니다. 각 글꼴 패밀리는 또는 값 으로 지정됩니다 . 아래 예에는 두 개의 글꼴 모음이 나열되어 있습니다. 첫 번째는 a 이고 두 번째는 a 입니다 . 글꼴 모음의 이름입니다. 예를 들어 "Times"와 "Helvetica"는 글꼴 모음입니다. 공백이 포함된 글꼴 패밀리 이름은 따옴표로 묶어야 합니다. 예: "Comic Sans MS". 일반 글꼴 패밀리는 지정된 글꼴을 사용할 수..

CSS grid 사용하여 레이아웃 만들기 CSS grid로 레이아웃을 만들게 되면 table태그로 만든 것과 마찬가지로 각 열과 행을 맞추어 요소를 배치할 수 있다. table보다 grid를 사용하면 더 많이 쉽게 만들 수 있는데, 예를들어 grid container의 하위요소는 css위치지정 요소와 유사하게 실제로 겹치고 레이어 되도록 스스로 위치를 지정할 수 있다. / 예제. grid 사용하여 레이아웃 만들어보기 01. 공간에 맞는 html을 구성한다. 02. id="wrap"이 이 레이아웃의 컨테이너다. 컨테이너를 기반으로 테이블(표)처럼 행과 열을 나누어 크기를 계산한다. 분할 된 선택자에 grid-area이름을 지정하여 grid를 쓸 준비를 한다. #wrap { margin: 0 auto; wi..

display : flex 로 만든 레이아웃 이해하기 // display : flex; // flex-wrap: flex; 두 속성을 정렬이 필요한 요소들의 부모 요소에 준다. 요소들이 여러 행에 나열되도록 하려면 flex-wrap 속성의 값을 wrap으로 지정한다. 그러면 항목이 하나의 행에 들어가지 않을 정도로 클 경우 다른 행에 배치된다. . flex-wrap속성이 wrap으로 지정되어 있으므로 항목은 여러 행에 나열됩니다. 초깃값과 동일한 nowrap을 지정하고 flex항목에 대한 확대/축소 방식을 별도로 지정하지 않으면 flex 항목들은 컨테이너의 폭에 맞게 줄어듭니다. nowrap을 지정하면 항목이 전혀 줄어들 수 없거나 충분히 줄어들 수 없을 때 흘러넘치게 됩니다.

float 으로 만든 레이아웃 이해하기 float는 일반적으로 요소들이 나란히 놓이도록 웹 사이트의 전체 레이아웃을 만드는데 널리 사용되어 왔다. ▶정렬이 필요한 가운데 부분의 요소에 float:left;속성을 쓴다. ▶float: left;속성을 준 요소들의 바로 다음 요소에 clear: both; 속성을 주어야 예시 처럼 float(떠오른)된 공간으로 다음 요소가 밀어올라 가는 것을 방지할 수 있다. .clearfix::before, .clearfix::after { display: block; content: ""; line-height: 0; } .clearfix::after { clear: both; } ▶또는 float: left;를 쓴 요소들을 감싸고 있는 태그에 .clearfix를 주어 f..

함수 01/ 선언적 함수 선언함수는 자바스크립트 함수의 여백과 패딩을 관리하는 역할을 하는 함수를 말한다. 선언함수 안에서 margin과 padding의 값을 설정하여 함수의 여백과 패딩을 조절할 수 있다. { function func(){ document.write("실행되었습니다. "); } func(); } 02/ 익명 함수 익명함수란 이름이 없는 함수를 말한다. 익명함수는 함수 리터럴로 정의하며 주로 변수에 할당하여 사용하거나 함수의 인수로 전달하여 사용된다. 익명함수는 즉시 실행 함수로도 불리며 (IIFE, Immediately Invoked Function Expression) 함수 선언과 동시에 실행되는 특성을 가지고 있다. { const func = function(){ document.w..

1~25까지 출력되는 5*5 테이블 만들기 See the Pen Untitled by aimee418 (@aimee418) on CodePen.

10보다 큰 숫자 찾기 수업시간에 배운 배열을 이용하여 10보다 큰 수를 찾아내는 미션이다. 길라잡이 배열요소의 개수만큼 for문을 반복한다 if문을 사용해서 요소의 값과 10을 비교한다 document.write문을 사용해서 화면에 표시한다 자바스크립트 사용시 불편한 점 제목1에 대한 설명글 입니다. 제목1에 대한 설명글 입니다. 제목1에 대한 설명글 입니다. 제목1에 대한 설명글 입니다. 제목1에 대한 설명글 입니다.제목1에 대한 설명글 입니다. 제목1에 대한 설명글 입니다. 제목1에 대한 설명글 입니다. 제목1에 대한 설명글 입니다.제목1에 대한 설명글 입니다.제목1에 대한 설명글 입니다.제목1에 대한 설명글 입니다.제목1에 대한 설명글 입니다.제목1에 대한 설명글 입니다. 불편한 점 제목1에 대한..

자바스크립트 for문, if...else문을 이용하여 홀수와 짝수를 색으로 구분하는 5*5 테이블 만들기 See the Pen Untitled by aimee418 (@aimee418) on CodePen. how to if문을 이용하여 짝수를 찾고 tr/td의 속성을 style태그를 이용하여 적용하였다.

자바스크립트 조건문 자바스크립트에서 조건문은 주어진 조건이 참(true)인 경우에만 실행되는 코드 블록을 만들 수 있도록 한다. 01. if문 if문은 가장 간단한 조건문이다. 주어진 조건이 참이면 실행되는 코드 블록을 만든다. // false : 0, null, undefined, false, ""(빈문자열) // true : 1, 2, "0", "1", "ABC", [], {}, true if(0){ document.write("실행되었습니다. (true)") } else { document.write( "실행되었습니다.(false)") } 02. if문 생략 const num = 100; // if(num){ // document.write("실행되었습니다.(true)") // } else { //..

" 반복문은 같은 동작을 여러 번 실행하기 위해 사용하는 문이다. 불필요하게 여러 명령을 늘어 놓을 필요없이 명령을 반복 실행할 수 있다. 그만큼 소스가 깔끔하고 프로그램 실행도 빠르다. 01/ for문 자바스크립트에서 가장 많이 사용하는 반복문이다. 조건에 들어가는 값이 일정하게 커지면서 명령을 반복실행 할 때 쓴다. 01/ 초깃값 : 카운터 변수. 몇번 반복할 지 지정하기 위해 카운터 변수를 선언하고 초기화한다. 0이나 1부터 시작. 02/ 조건 : 문장을 반복하기 위해 체크할 조건 03/ 증가식 : 보통 카운터값을 하나씩 증가시키는 용도로 사용 02/ forEach문 배열에서는 forEach문을 사용해서 좀더 쉽게 반복한다. / 콜백함수란, 다른함수의 인수로 사용할 수 있는 함수를 가리킨다. 프로그..

/ HTML 구조 관련 요소 종류 " 문서와 관련된 태그(Document Related Tag) / 문서의 최상단 요소를 나타냅니다. / 문서 정보에 해당하는 내용을 설정합니다. / 문서 본문에 해당하는 내용을 설정합니다. / 문서의 기본 URL을 설정합니다. / 문서의 외부 리소스를 설정합니다. / 문서의 메타 정보를 설정합니다. / 문서의 스타일 정보를 설정합니다. / 문서의 제목을 설정합니다. " 섹션과 관련된 태그(Section Related Tag) / 문서의 주요 콘텐츠 영역을 설정합니다. / 주제별 그룹의 콘텐츠 섹션을 설정합니다. / 문서의 독립적인 컨텐츠 섹션을 설정합니다. / 주요 콘텐츠의 보조적 컨텐츠 섹션을 설정합니다. / 문서의 소개 및 메뉴 그룹 컨텐츠 섹션을 설정합니다. / 문..

선택자 (selector) HTMl문서의 요소 중 같은 요소라도 각기 다른 이름을 지정하여 따로 속성을 부여할 수 있다. 선택자의 종류는 type선택자, id선택자, class선택자, 등이 있다 / id와 class의 차이점 " id선택자 HTML 요소에 id 로 이름을 붙일 때에는 유일한 이름을 부여해야 하며, 다른요소에 같은 id명을 또 주면 안된다. CSS에서는 id선택자앞에 #을 붙여야 한다. *id명이나 class명은 숫자로 시작할 수 없고, 주로 영문으로 시작한다. " class선택자 HTML 문서의 여러 요소 중 같은 이름을 갖는 요소들만 모아 따로 속성을 부여할 수 있다. HTML요소에 같은 이름을 부여할 때에는 class로 이름을 붙인다. 즉, 여러개의 요소에 같은 class명을 부여 할..

" 연산자 프로그램을 만드는 수식에 필요한 것이 연산자이다. 연산자의 종류는 산술연산자, 대입연산자, 비교연산자, 논리연산자 등이 있다. / 산술연산자 01/ '+' 연산자 더하기 연산을 할 때 사용한다. 문자와 문자, 문자와 변수 등을 연결할 때 사용한다. '+'를 기준으로 좌변과 우변에 숫자가 아닌 문자나 변수 등이 오면 더하기 연산이 아닌 연결 연산을 한다. 02/ %(나머지) 연산자 나머지를 구할 때 사용한다. '반복적인 숫자 구간의 패턴', 조건문을 이용한 '짝수 / 홀수 / 배수 판단' 등의 식을 만드는 데 사용한다. 03/ ++, -- 연산자 1씩증가하거나 1씩 감소할 때 사용한다. '+'와 '+' 사이, '-' 나 '-' 사이에 공백이 있으면 안된다. 주로 변수의 앞쪽에 붙여 사용한다. /..

See the Pen Tail Animation by aimee418 (@aimee418) on CodePen.

id와 class의 차이점 " 자료형 (data type) 이란 프로그램에서 처리할 자료의 형태를 말한다. 예를 들어 3이라는 숫자를 숫자로 처리할지, 문자열로 처리할지에 따라 결과값이 달라진다. 컴퓨터는 프로그램이 처리할 자료의 유형을 명확히 지정해 주어야 일을 하는데 이러한 자료의 형태를 '자료형' 이라고한다. 자료형은 원시유형(primitive)과 객체(object)로 나뉜다. 원시유형(primitive) 원시 유형은 하나의 값만 저장하는 자료형이다. 숫자형, 문자열, 논리형, undefined, null, symbol 유형이 있다. 그 외는 모두 객체이다. 01. 숫자형(number) 자바스크립트에서는 정수와 실수를 묶어 '숫자형'이라고 한다. 따옴표 없이 입력하는게 원칙이며, 따옴표 안에 작성하..

" CSS 기본문법 CSS(Cascading Style Sheet)를 정의하는 방법으로는 내부 스타일시트, 외부스타일시트, 인라인 스타일시트 등이 있습니다. 01 / 내부 스타일시트 CSS를 HTML문서 안에 로 기재하여 HTML문서 안에 CSS가 함께 저장되도록 하는 형태입니다. 02 / 외부 스타일시트 스타일 속성들을 따로 저장하여 HTML문서에 파일명으로 연결할 수 있습니다. 이때 스타일은 *.css확장자를 가진 별도의 파일로 저장하고, HTML에서는 태그를 이용하여 선언합니다. 03 / 인라인 스타일시트

/ 시멘틱 마크업 이란 ? 시멘틱(Semantic)은 사전적으로 '의미론적인'이라는 뜻으로, 시멘틱 마크업은 '의미가 명시된 HTML 문서'이다. 시멘틱 마크업은 h1, header, nav, section, footer등 다양한 태그들을 문서 내용에 맞게 선택하여 사용하는 것을 말한다. / 시멘틱 태그 작성방법 헤더 / 푸터에 와 사용 내비게이션에 사용 메인 컨텐츠에 과 사용 독립적인 컨텐츠에 사용 최상위 제목으로 사용 순서가 없는 목록으로 과 사용 / 시멘틱 마크업의 필요성 SEO - 검색엔진 최적화에 유리하다 웹접근성 - 시각장애인들도 웹을 편리하게 접할 수있도록 도와준다 유지보수 - 정리된 마크업은 코드 식별이 용이하다 / 논리적 순서 마크업 이란 ? 시멘틱 마크업과 함께 웹 문서의 뼈대가 되는 ..

==

블록 레벨 요소(Block-level Elements) 블록 레벨 요소는 마크업을 할 때 줄이 바뀌는 특성을 가지고 있습니다. 블록 요소는 하나의 박스라고 생각하면 됩니다. 인라인요소 (Inline Elements) 인라인 요소는 마크업을 할 때 가로로 정렬이 됩니다. 인라인 요소는 텍스트 라고 생각하면 됩니다. HTML 삽입 미리보기할 수 없는 소스