june blog

자바스크립트 동작 원리 자바스크립트는 싱글 쓰레드 언어입니다. 이 의미는 쉽게 풀어쓰면 한 번에 한 가지 일 밖에 처리할 수 없다는 것을 의미합니다. (어려운 용어로는 Call stack이 하나라고 표현 합니다) 현재 실행하고 있는 함수가 있는 경우에 다른 일을 할 수가 없고, 다른 일들이 블락되게 됩니다. 이렇게 되면 브라우저에서 오래 걸리는 작업이 실행될 경우, 웹 페이지의 UI는 멈춰버리고, 사용자는 어떠한 행동도 할 수 없게 됩니다. 예를 들어, 크롬에서 alert 창을 띄어 보면 alert 창을 닫기 전까지는 아무것도 할 수 없는 것과 마찬가지 입니다. 1분 이상이 시간이 소요되는 오래 걸리는 작업이 있다고 가정 해보겠습니다. 자바스크립트는 머리가 하나이기 때문에, 1분 동안 아무것도 안하고 기..

반려묘을 키우는 방법 반려묘을 키우는 것은 책임감 있는 일입니다. 경제적 능력 반려묘가 아플떄 병원도 가야하고 사료,모래 끊이지 않게 공급해야함 아무튼 돈이 많이 들어감 자세히보기 고양이 알레르기 고양이는 생각보다 털이 많이 날리는 동물임 천식있으시면 정말 신중하게 생각 해야함 자세히보기 완성 보통 홈페이지에서 많이 쓰이는 section 구조이다. 일단 html 과 css 만으로 구성을 했고 동적 요소는 다음에 자바스크립트를 이용해서 추가 할 예정입니다. 내가 생각 했을때 홈페이지를 구성할때 중요한건 구성인거 같다. 구성을 잘 짜야지 나중에 큰일이 없을꺼 같다. 구성을 잘못 짜면 나중에 유지보수 할떄 많이 힘들꺼 같다. 그리고 시멘틱 태그는 아직 쓰임새가 익숙하지 않다. 더 공부를 해야겠다.

01. 다음의 출력값을 보고 빈칸을 채우시오! { var x = 100; var y = 200; var z = "javascript"; console.log(__); console.log(__); console.log(__); //100 //200 //300 } 결과확인하기 x y x+y 02. 다음의 출력값을 보고 빈칸을 채우시오! { let x = 100; let y = 200; let z = "javascript"; x = ___; y = ___; z = ___; console.log(x); console.log(y); console.log(z); //300 //400 //jquery } 결과확인하기 300 200 jquery 03. 다음의 출력값을 보고 빈칸을 채우시오! { let x = 100;..

오늘은 forEach 문과 for..in 문 for..of문을 오전에 배웠습니다. 그에대해 정리 합니다. forEach문은 매개변수,인덱스,배열을 담아지고 그걸 뺴서 씁니다. forEach는 배열을 반복하면서 각 요소에 대해 특정한 동작을 수행할 때 사용되는 메서드입니다. forEach 메서드는 배열의 각 요소에 대해 인자로 전달된 함수를 실행합니다. 이 함수는 배열 요소, 해당 요소의 인덱스, 그리고 배열 자체를 인자로 받습니다. forEach 메서드는 반환값이 없으며, 배열을 변경하지 않습니다. 다음은 forEach 메서드의 기본 구문입니다. const coding = [100,200,300,400,500,600] coding.forEach(function(el, index, array) { // 실..

font-family: 글자의 폰트를 지정합니다. font-family: 'arial'; font-size: 글자의 크기를 지정합니다. font-size: 10px; font-weight: 글자의 굵기를 지정합니다. font-weight: bold; font-style: 글자의 기울기를 지정합니다. font-style: italic; font-variant: 글자의 작은 대문자로 설정하거나 재설정을 지정합니다. font-variant: small-caps; line-height: 글자의 줄간격을 지정합니다. line-height: 1.4; font:한줄로 쓰는 표기법입니다. font: bold 12px/1.4 "arial"; color:글자의 색을 지정합니다. color : aqua; letter-spa..

Grid란? CSS에서 제공하는 레이아웃 모듈 중 하나로, 복잡한 레이아웃을 구현할 수 있는 강력한 기능을 제공합니다. CSS Grid를 사용하면 여러 열과 행을 사용하여 레이아웃을 만들 수 있으며, CSS Grid를 사용하려면 먼저 그리드 컨테이너를 정의해야 합니다. display: grid 속성을 사용하여 그리드 컨테이너를 만들고, grid-template-columns 및 grid-template-rows 속성을 사용하여 그리드의 열과 행을 정의합니다. 각각의 열과 행은 크기를 지정할 수 있으며, fr, auto, minmax(), repeat() 등의 값으로 지정할 수 있습니다.이를 통해 유연하고 반응형인 웹 페이지를 만들 수 있습니다. 아래는 CSS Grid의 주요 속성들입니다. display:..

Flex란? CSS에서 제공하는 레이아웃 모듈 중 하나로, 유연하고 반응형인 웹 페이지 레이아웃을 만드는 데 도움이 됩니다. Flexbox 모델을 사용하면 가로 또는 세로 방향으로 유연한 컨테이너를 만들고, 그 안에 배치되는 유연한 아이템들을 쉽게 배치할 수 있습니다. Flexbox는 간단하고 직관적인 레이아웃 설계를 가능하게 하며, 반응형 웹 디자인에서 매우 유용합니다. Flexbox 레이아웃은 컨테이너 엘리먼트와 그 안에 들어가는 자식 엘리먼트들을 정의하는 것으로 시작합니다. display: flex 속성을 사용하여 컨테이너 엘리먼트를 정의합니다. 컨테이너 안에 있는 자식 엘리먼트들을 Flex 아이템이라고 하며, flex-direction, justify-content, align-items, ali..

문제1. 사용자가 프롬포트 창에 숫자를 입력했을 떄 그 숫자를 함수로 넘겨주고,함수에서는 숫자가 양수인지,음수인지,또는 0인지 판단해서 알림 창에 보여 주는 프로그램을 작성해 보세요. See the Pen 함수 문제1 by ture403 (@ture403) on CodePen. 01. 함수를 isPositive 함수를 만듭니다. 02. 함수에 조건문 매개변수가 0보다 크면 양수 03. 매개변수가 0보다 작으면 음수 04. 그것도 아니면 0입니다 코드를 작성합니다. 05. 변수에 number에 parseInt함수안에prompt 값을 넣어 줍니다. 06. 조건문을 작성합니다. 만약 number 가 숫자이면 07. 함수를 안에 매겨변수 number 넣은 값을 호출합니다. 문제2. 2개의 숫자를 입력받아 두 수..

01. if문 02. if문 생략 03. 삼항 연산자 04. 다중 if 05. 중첩 if 06. switch문 07. while문 08. do while문 09. for문 10. 중첩 for문 11. break문 12. continue문 ------------------------------------------------------------------------------------------------------------- 01.if 문 특정 조건 만족 시(참인 경우) 실행하는 명령의 집합 이며, 어떤 작업을 수행하고 싶을 때 사용하는 것이 조건문이다. { // false :0, null, undefined, false, 빈문자열("") // ture : 1, "0", "1", "ABC" ,배열[..

01.선언적 함수 (Declared Function) 함수 선언문을 사용하여 함수를 정의합니다. 함수 이름이 정의되어 있으며, 함수 호출 이전에 선언되어야 합니다. function add(x, y) { return x + y; } add(2,3) // 결과값 // 5 02.익명 함수 (Anonymous Function) 함수 표현식을 사용하여 함수를 정의합니다. 함수 이름이 없으며, 변수에 함수를 할당합니다. 함수 호출은 변수를 통해 이루어집니다. const add = function(x, y) { return x + y; }; add(3,5) // 결과값 // 8 03.매개변수(Parameter) 함수 정의 시 함수 내부에서 사용할 변수를 선언합니다. 함수 호출 시 전달한 값들이 함수 내부의 매개변수에..

10보다 큰 숫자 찾기 수업 시간에 배운 배열을 이용하여 10보다 큰 수를 찾아내는 미션이다. 길라잡이 배열 요소의 갯수만큼 for문을 반복한다. if문을 사용해서 요소의 값과 식을 비교한다. document.wirte 문을 사용해서 표시한다. 자바스크립트를 사용할 때 방법 여기는 제목3에 대한 설명글입니다. 여기는 제목 3에 대한 설명글입니다. 여기는 제목 3에 대한 설명글입니다. 여기는 제목 3에 대한 설명글입니다. 여기는 제목 3에 대한 설명글입니다. 여기는 제목 3에 대한 설명글입니다. 여기는 제목 3에 대한 설명글입니다. 불편한 점 제목 3을 썼을 때는 디자인을 변경할 거임 여기는 제목 3에 대한 설명글입니다.여기는 제목3에 대한 설명글입니다.여기는 제목3에 대한 설명글입니다.여기는 제목3에 대..

01. 변수 : 데이터 저장 02. 변수 : 데이터 저장 + 데이터 변경 03. 변수 : 데이터 저장 + 데이터 변경 + 데이터 추가 04. 상수 : 데이터 저장 + 데이터 변경(X) 05. 배열 : 데이터 저장(여러개): 표현방법1 06. 배열 : 데이터 저장(여러개): 표현방법2 07. 배열 : 데이터 저장(여러개): 표현방법3 08. 배열 : 데이터 저장(여러개): 표현방법4 09. 객체 : 데이터 저장(키와값): 표현방법1 10. 객체 : 데이터 저장(키와값): 표현방법2 11. 객체 : 데이터 저장(키와값): 표현방법3 12. 객체 : 데이터 저장(키와값): 표현방법4 13. 객체 : 데이터 저장(키와값): 표현방법5 14. 객체 : 데이터 저장(키와값): 표현방법6 15. 객체 : 데이터 저장..

선택자 : css로 UI의 어는 부분을 디자인할지, 즉 표현할 대상이 되는 부분을 말합니다. css로 속성을 부여하는 형식은 다음과 같습니다. 01.type 선택자 html 문서의 태그 이름을 선택자로 사용할 수 있습니다. 다음예제에서는 p 태그 안의 글자들을 파란색으로 표시하도록 속성을 부여하고 있습니다. See the Pen type 선택자 by ture403 (@ture403) on CodePen. 02.id선택자 html 문서의 요소중 같은 요소라도 각기 다른 이름을 지정하여 따로 속성을 부여할 수 있습니다. html 요소에 id로 이름을 붙일 때에는 유일한 이름을 부여해야 하며, 다른 요소에 같은 id명을 또 주어서는 안됩니다. css에서는 id 선택자 앞에 #을 붙여야 합니다. id명이나 cl..

1.float 개요 float 속성은 요소를 좌우 방향으로 띄워서 배치하는 데 사용됩니다. 일반적으로 이미지나 텍스트를 주변에 감싸는 레이아웃을 구현하는 데 많이 사용됩니다. float 속성은 다음과 같은 값을 가질 수 있습니다. 기본식 float : left; 속성값 속성설명 left 요소를 왼쪽에 배치하고 나머지 콘텐츠는 그 주변을 흐르도록함 right 요소를 오른쪽에 배치하고 나머지 콘텐츠는 그 주변을 흐르도록함 none float을 취소할때 사용합니다. 2.float 사용 예제 2-1 float : left 예문 See the Pen flaot 예제 by ture403 (@ture403) on CodePen. 2-2 float : right 예문 See the Pen Untitled by ture..

1번 문제 주어진 배열에서 10보다 큰 숫자를 표현해라 for문을 돌려서 작성 했습니다. const arr = [1, 3, 5, 7, 9, 11, 13, 15, 17, 19]; // for문 for(let i=0; i 10){ // arr의 숫자가 10 이상이면 document.write(arr[i]+","); //document.write로 출력합니다. } } 2번문제 사용자에게 1보다 큰수를 입력하게 한 후 입력한 숫자까지 더하는 프로그램을 작성해 보세요. for문과 if문을 통해 작성해 보았습니다. // 프로폼트로 숫자 입력 let number = prompt("1보다 큰 숫자를 입력하세요."); // 변수 sum 0 으로 초기화 let sum = 0; if( number !== null && nu..

01.if 문 if문은 주어진 조건이 참(true)인 경우에만 특정한 코드 블록을 실행합니다. 조건이 거짓(false)이면 실행하지 않습니다. if문의 구조는 다음과 같습니다. let x = 15; if (x > 10) { console.log("x는 10보다 큽니다."); } //결과값 : x는 10보다 큽니다. 02.중첩if문 중첩 if문은 if문 안에 또 다른 if문을 사용하는 것을 말합니다. 이러한 구조를 사용하여 복잡한 조건을 처리할 수 있습니다. let x = 10; let y = 5; if (x > 0) { if (y > 0) { console.log("x와 y는 모두 양수입니다."); } else { console.log("x는 양수이지만 y는 음수입니다."); } } else { cons..

01.for문 자바스크립트에서 가장 많이 사용하는 반복문은 for문 입니다. for 문은 조건에 들어가는 값이 일정하게 커지면서 명령을 반복 실행할 때 편리합니다. for문에서는 몇번 반복했는지 기록하기 위해 카운터를 사용하고 for문의 첫 번째 항에서 카운터 변수를 지정합니다. for문은 공부할 때 실행 순서가 헷갈리기 쉽습니다. 그러므로 초깃값은 처음에 한번만 할당하고 조건 체크와 명령 실행, 증가식을 계속 반복한다고 생각하시면 됩니다. See the Pen Untitled by ture403 (@ture403) on CodePen. 02.forEach문 foreach 반복문은 오직 Array 객체에서만 사용가능한 메서드입니다. (ES6부터는 Map,Set 지원) 배열의 요소들을 반복하여 작업을 수행..

1. HTML 문서의 헤더 영역을 의미하는 태그로 제목이나 내비게이션, 검색등의 내용들을 포함 할수 있습니다. 2. 텍스트, 인라인 요소, 블록 레벨 요소를 포함할 수 있지만 , 태그는 포함할 수 없습니다. See the Pen header tag by ture403 (@ture403) on CodePen. 1. HTML 문서의 메인 메뉴나 목차 등을 정의해 주는 태그입니다. 2. 텍스트, 인라인 요소, 블록 레벨 요소를 포함 할수 있습니다. See the Pen nav tag by ture403 (@ture403) on CodePen. 1. HTML 문서에서 맥락이 같은 요소들은 주제별로 그룹화해주는 태그이며 섹션 주제에 대한 제목 요소 ( ~ )를 포함하는 것이 좋습니다. 2. 텍스트, 인라인 요소,..

01.산술 연산자(Arithmetic Operators) 산술 연산자는 사칙연산을 다루는 가장 기본적이면서도 많이 사용하는 연산자입니다. 산술 연산자는 모두 두 개의 피연산자를 가지는 이항 연산자이며, 피연산자들의 결합 방향은 왼쪽에서 오른쪽입니다. See the Pen 산술 연산자 by ture403 (@ture403) on CodePen. 02.대입 연산자(assignment operator) 대입 연산자는 변수에 값을 대입할 때 사용하는 이항 연산자이며, 피연산자들의 결합 방향은 오른쪽에서 왼쪽입니다. 또한, 앞서 살펴본 산술 연산자와 결합한 다양한 복합 대입 연산자가 존재합니다. See the Pen 대입 연산자 by ture403 (@ture403) on CodePen. 03.비교 연산자(com..

ID 선택자 HTML 문서의 요소 중 같은 요소라도 각기 다른 이름을 지정하여 따로 속성을 부여할 수 있습니다. HTML 요소에 id로 이름을 붙일 때에는 유일한 이름을 부여해야 합니다. 다른 요소에 같은 id명을 또 주어서는 안됩니다. css에서는 id선택자 앞에 '#'dmf 붙여야 합니다. id명이나 class명은 숫자로 시작할 수 없으며, 주로 영문자로 시작합니다. See the Pen css id by ture403 (@ture403) on CodePen. CLASS 선택자 HTML 문서의 여러 요소 중 같은 이름을 갖는 요소들만 모아 따로 속성을 부여할 수 있습니다. HTML 요소에 이름을 부여할 때에는 class로 이름을 붙입니다. 즉, 여러 개의 요소에 같은 class명을 부여할수 있습니다...

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

CSS(cascading style sheets)를 정의하는 방법으로는 내부 스타일시트, 외부 스타일시트, 인라인 스타일시트 등이 있습니다. 실제로는 외부 스타일시트를 많이 사용하는 편이지만, 간단한 스타일은 내부 스타일시트 만으로도 사용할 수도 있습니다. 또한 인라인 스타일시트는 태체로 거의 사용하지 않지만, 가장 우선순위가 높아서 꼭 필요한 경우 편리하게 사용할 수 있습니다. 01.내부 스타일 시트 CSS를 HTMl 문서 안에 태그로 기재하여 HTML 문서안에 CSS가 함께 저장되도록 하는 형태입니다. See the Pen Internal Style Sheet by ture403 (@ture403) on CodePen. 02.외부 스타일 시트 스타일 속성들을 따로 저장하여 HTML 문서에 파일명으로 ..

자료형 이란 숫자나 문자열처럼 프로그램에서 처리할 자료의 유형을 지정하는 자료의 형태 자바스크립트에서 자료형은 값이 하나인 기본형과 여러 값을 한꺼번에 담고 잇는 복합형으로 구별합니다. 원시 유형은 하나의 값만 저장한느 자료형으로, 숫자와 문자열, 논리형,undefined,null,sysmbol 유형이 있습니다. 그리고 원시 유형 외에는 모두 객체 입니다. 1. 숫자형(number) 숫자형은 모드 프로그램에서 가장 기본이 되는 자료형입니다. 다른 언어에서는 정수와 실수를 명확히 구별하고 정수도 크기에 따라 다른 자료형을 사용합니다. 하지만 자바스크립트에서는 정수와 실수를 함께 묶어서 '숫자형'이라고 합니다. 자바스크립트에서 큰따옴표 없이 입력하면 숫자로 인식합니다. 하지만 숫자라고 해도 큰 따옴표로 묶으..

힛힛힛

시멘틱 마크업 시멘틱 (semantic) 의 사전적 뜻은 '의미론적인' 정도로 해석할 수 있는데, 이것은 마크업 할 때 의미에 부합하는 태그를 사용하라는 뜻입니다. 즉, 의미를 잘 전달 할 수 있도록 HTML 태그 문서를 작성하는 것을 말합니다. 시멘틱 마크업 종류 시멘틱 마크업 태그의 종류는 엄청 다양하지만, 주로 사용되는 태그에 대해서만 알아보도록 하겠습니다. header : 소개 및 탐색에 도움을 주는 콘텐츠를 나타냅니다. 제목, 로고, 검색 폼 등의 요소가 포함될 수 있습니다. nav : 문서의 부분 중 현재 페이지 내, 또는 다른 페이지로의 링크를 보여주는 내비게이션을 말합니다. 메뉴, 목차, 색인 등에 사용됩니다. main : 문서 의 주요 콘텐츠를 나타냅니다. article : 문서, 페이지..

인라인 레벨 요소 (Inline Element) 인라인 요소는 마크업을 할떄 가로롤 정렬이 됩니다. 인라인 요소는 텍스트라고 생각하면 됩니다. 하나의 태그가 브라우저에서 실제로 코딩된 그 영역만 차지하여 좌우로 다른 태그가 나란히 위치할 수 있는 요소들입니다. 행 안의 일부분이라고 보시면 됩니다. 텍스트레벨요소라고도 합니다. 인라인 요소 특징 인라인 요소는 줄 바꿈이 일어나지 않습니다. 인라인 요소는 텍스트(문자)와 인라인 요소를 자식 요소로 포함할 수 있습니다. 인라인 요소는 블록 레벨 요소를 자식 요소로 포함할 수 없습니다. 블록 레벨 요소(Block-level Elements) 블록 레벨 요소는 마크업을 할 떄 줄이 바뀌는 특성을 가지고 있습니다. 블록요소는 하나의 박스라고 생각하면 됩니다. 하나의..