xoouxa

✍🏻 레이아웃 - float 유형 - 반응형 ✍🏻 오늘은 사용자가 모바일을 사용해도 깨지지 않는 반응형에 대해 알아보겠습니다. 1920px * 1080px의 사이즈에 1200px * 1080px 구역 레이아웃을 만들어 보겠습니다. //header 구역, nav 구역, sectioin 구역, footer 구역을 만들어줍니다. //section 구역 안이 반응형에 반응할 수 있도록 자식으로 새로운 태그 //article 구역을 3개 만들어줍니다. ✍🏻 반응형 ✍🏻 style 태그 사이에 @media를 통해 반응형 값을 입력해줍니다. 노트북 같은 최대 width값이 1220px일 때 @media (max-width: 1220px){ #wrap { width: 96%; } } 레이아웃 전체 구역인 wrap 구역..

📍 모던 자바스크립트 프로그래밍의 정석 책에 나온 155, 156쪽의 함수에 관한 마무리 문제들을 풀어보았습니다 ヾ(≧▽≦*)o Q. 1. 양수, 음수 판단하여 창에 보여주기 사용자가 프롬프트 창에 숫자를 입력했을 때 그 숫자를 함수로 넘겨주고, 함수에서는 숫자가 양수인지, 음수인지, 또는 0인지 판단해서 알림 창에 보여주는 프로그램을 작성해보세요. ✍🏻 A. 길라잡이 숫자를 받아서 양수, 음수, 0을 판단하고 알림 창에 표시하는 함수를 선언합니다. parseInt( ) 함수를 사용해 프롬프트 창에 입력한 내용을 숫자로 변환합니다. 프롬프트 창에 입력한 내용이 숫자가 아니면 parseInt( ) 함수는 NaN을 변환합니다. 반환값이 숫자일 경우에만 함수를 실행합니다. 양수, 음수, 0인지 판단하는 프로그..

데이터 제어문 종류 if문, if문 생략, 삼항 연산자, 다중 if문, 중첩 if문, switch문, while문, do while문, for문, 중첩 for문, continue문, break문 ✍🏻 if문 ✍🏻 조건문은 프로그래밍에서 가장 기본적인 구문 중 하나입니다. 조건문을 사용하면 프로그램이 특정 조건에 따라서 다른 동작을 하도록 할 수 있습니다. 조건이 참일 경우 실행할 코드를 작성합니다. { if(조건식){ document.write("실행되었습니다.(true)"); // 참 실행 } else { document.write("실행되었습니다.(false)"); // 거짓 실행 }; } 📍 값에 따라 true, false가 나뉩니다. 📍 true : 1, 2, "0", "1", "ABC", [],..

✍🏻 함수란 ?! ✍🏻 - 함수는 프로그램에서 반복적으로 사용되는 기능을 만들어 내기 위한 코드들의 집합입니다. - 함수는 자바스크립트의 기본 구성 요소 중 하나입니다. - 함수를 실행할 때는 반드시 함수를 불러와야 합니다. - 함수에 "function"을 뻬고 "=","=>"을 넣어 줄여쓰는 방법이 있습니다. 그것을 화살표 함수 라고 부릅니다. ✍🏻 선언적 함수 ✍🏻 * 선언적 함수는 가장 기본적인 형식으로 되어있습니다 기본형식은 "function 함수명(){실행문}" 입니다. function func(){ document.write("선언적 합수입니다.") } func()// 함수를 불러오는 명령문 입니다. // 결과값: 선언적 함수 입니다 * 선언적 함수 화살표 형식 func1 = () => { d..

자바스크립트 데이터 저장은 크게 네 가지로 나눌 수 있습니다. ✍🏻 변수✍🏻 변수는 데이터를 저장하는 저장소입니다. 데이터를 저장할 수도 있지만 변경과 추가가 가능합니다. 데이터 변경이 가능하고, 마지막으로 지정해준 데이터가 값이 됩니다. 📍 데이터 저장 { var x = 100; var y = 200; var z = "javascript"; console.log(x); console.log(y); console.log(z); } 결과 : 100 200 javascript 📍 데이터 저장 + 변경 let x = 100; let y = 200; let z = "javascript"; x = 1000; y = 1000; z = "react"; document.write(x); document.write(y)..

✌ 자바스크립트를 활용해 두 가지 문제 풀어보기 ✍🏻 배열에서 10보다 큰 숫자를 출력하는 문제 ✍🏻 문제 : 10보다 큰 숫자 찾기 주어진 배열 : [1, 3, 5, 7, 9, 11, 13, 15, 17, 19] document.write 문을 사용해 화면에 표시하기 배열 요소의 개수만큼 for 문을 반복하기 if 문을 사용해서 요소의 값과 10을 비교하기 See the Pen Untitled by leeyouna21 (@leeyouna21) on CodePen. ✍🏻 사용자에게 1보다 큰 수를 입력하게 한 후 입력한 숫자까지 짝수만 더하는 프로그램 ✍🏻 사용자에게 1보다 큰 수를 입력하게 한 후 입력한 숫자까지 짝수만 더하는 프로그램을 작성해보기 사용자가 입력한 숫자가 null이 아니고 1보다 클 경..

✍🏻CSS 선택자✍🏻 what is CSS 선택자(selector) ? 선택자란 CSS로 UI의 어느 부분을 디자인할지, 표현할 대상이 되는 부분, 즉 선택을 해주는 요소를 말합니다. 이를 통해 특정 요소들을 선택하여 스타일을 적용할 수 있게 됩니다. CSS로 속성을 부여하는 형식은 { } 안에 여러 속성을 지정할 수 있고, 각 속성 설정 간에는 ' ; ' 으로 구분해주며 마지막 속성 끝에는 구분자를 생략할 수 있습니다. 속성은 가로로 붙여 써도 되고 한 줄씩 따로 입력해도 됩니다. 선택자의 종류로는 type 선택자, id 선택자, class 선택자, 전체 선택자, 하위 선택자, 자식 선택자, 인접 선택자, 형제 선택자, 그룹 선택자, 속성 선택자, 가상클래스 선택자, 가상요소 선택자, 종속 선택자 와 ..

조건문은 if, else if, else 키워드를 사용해 구현할 수 있습니다. ✍🏻 조건문 if ✍🏻 if문은 조건문애서 가장 기본적인 형태로, 주어진 조건이 참(true)일 때 코드 블록을 실행합니다. if문의 구조 : if(조건) { //조건이 참일 때 실행되는 코드 } if문의 조건은 불리언(boolean)값을 반환하는 표현식이어야 합니다. 조건이 참일 때 실행되는 코드는 중괄호 ( { } ) 안에 작성합니다. 조건이 거짓 false인 경우 코드 블록은 실행되지 않습니다. if문을 사용한 예제 : let x = 10; if( x > 0 ) { console.log('x는 0보다 큽니다.'); } 위 예제에서 x 변수의 값이 0보다 크므로 조건이 참이 돼 코드 블록이 실행되어 x는 0보다 큽니다. 가..

✌ 레이아웃 float은 대체 무엇인지 우리 함께 알아볼까요 ? ✍🏻레이아웃 float✍🏻 float ? float : left; float 요소는 좌측이나 우측에 붙이고 아래 내용이 그 주변을 흐르게 하는 것입니다. 왼쪽 또는 오른쪽부터 가로 정렬을 하고 싶은 요소들에 float를 적용하면 됩니다. float 을 사용하지 않으면 block요소라서 세로로 나열 float을 이용하면 가로로 배치할 수 있습니다. float는 블록 개념을 갖고있는 div 태그와 , 인라인개념을 갖고있는 span 태그를 함께 사용합니다. 속성값 속성 설명 left float : left; 요소를 왼쪽에 배치하고 나머지 콘텐츠는 그 주변을 흐르도록 함. right float : right; 요소를 오른쪽에 배치하고 나머지 콘텐츠..

📍 같은 동작을 손쉽게 반복하는 반복문 ✍🏻for 문✍🏻 자바스크립트에서 가장 많이 사용하는 반복문은 for문 입니다. for문은 조건에 들어가는 값이 일정하게 커지면서 명령을 반복할 때 편리하고 for문에서는 몇 번 반복했는지 기록하기 위해 카운터를 사용하고 for문의 첫 번째 항에서 카운터 변수를 지정합니다. for문은 초기식, 조건식, 증감식을 사용해 반복을 제어하는 가장 일반적인 반복문 입니다. 기본형 for (초깃값; 조건; 증가식) { ... } 1) 초깃값 : 몇 번 반복할지 지정하기 위해 카운터 변수를 사용하는데 , 이 항목에서 카운터 변수를 선언하고 초기화 합니다. 초깃값은 0이나 1부터 시작합니다. 2) 조건 : 문장을 반복하기 위해 체크할 조건 부분입니다. 이 조건을 만족해야 for문..