반응형

코딩 공부 162

자바스크립트 테스트 - 데이터 불러오기

자바스크립트 테스트 오늘 본 자바스크립트 테스트 문제와 정답 정리 틀린 문제는 풀이와 틀린 이유 정리 01. 다음의 출력값을 보고 빈칸을 채우시오! { var x = 100; var y = 200; var z = "javascript"; console.log(__); console.log(__); console.log(__); //100 //200 //300 } 정답 x y x + y 틀린이유 문제를 자세히 안 봐서 마지막 정답이 300인지 모르고 자연스럽게 z를 썼다... 정답이 javascript인 줄 알고 z를 적었는데 채점하고 확인해보니 300이었다. 300이 나오려면 100인 x와 200인 y가 더해져야 하므로 정답이 x+y인 것... 02. 다음의 출력값을 보고 빈칸을 채우시오! { let x..

css 문자 관련 스타일에 대해서 알아보자!

CSS 문자 관련 스타일 아무리 웹에서 이미지나 비디오의 비중이 커지더라도 텍스트는 웹에서 빠질 수 없는 핵심적인 요소일 것입니다. 웹에서 텍스트를 스타일하기 위해서 사용할 수 있는 CSS 속성에 대해서 알아보겠습니다. 01. font - family 문자의 글꼴을 지정하는 속성입니다. 여러 단어이거나 한글 글꼴인 경우는 따옴표로 감싸고 여러 개의 글꼴을 쉼표로 구분하여, 지정한 글꼴이 없을 경우 그 다음 글꼴로 지정할 수 있습니다. font-family: '돋움', dotum, arial, Helvetica, sans-serif; 02. font - size 문자의 글자 크기를 지정하는 속성입니다. 글자 크기는 명시하지 않을 경우 16px이 기본값입니다. css에서 유용하게 사용하는 단위에는 다음과 같..

코딩 공부/CSS 2023.03.01

레이아웃 grid 유형을 알아보자!

grid layout 그리드는 그리드를 선언하는 요소와 하위의 자식 요소들로 구성됩니다. 그리드를 구성하는 자식요소들을 "아이템" 이라고 하며, 자식 요소들의 태그 종류에 관계 없이, 그리드 바로 하위의 자식요소들만 아이템이 됩니다. 그리드 선언은 css 속성으로 아래와 같이 시작합니다. display : grid; 그리드 속성 선언 만으로는 자식 아이템들에 아무런 영향을 미치지 않습니다. 추가 그리드 속성이 정의되지 않으면 "display: grid;" 는 "display: block;" 과 같습니다. 레이아웃 grid 유형 (예제) 결과 grid와 flex의 차이점 flex box는 한 줄로 된 행 혹은 열 방향의 레이아웃과 같이 일차원의 레이아웃을 염두에 두고 설계되었지만, grid는 행과 열 모두..

코딩 공부/CSS 2023.03.01

레이아웃 flex 유형 방법을 알아보자!

flex flex는 flexble의 준말로 유동적인 레이아웃을 손쉽게 만들 수 있다는 의미를 가진다. 기존의 웹페이지를 만들 때 사용하던 올드한 레이아웃 제작방법을 개선하고자 flexbox가 생겨났다. flex layout은 요소들이 포함된 큰 박스에 flex를 선언하고, 안에 있는 요소들에게는 유연하게 배치하는 속성들을 부여하여 레이아웃을 잡는 것입니다. display: flex; display: -webkit-flex; display: -ms-flexbox; 위 구문은 해당 요소에 flex로 레이아웃을 설계한다고 선언한다는 뜻입니다. 필수 지정 속성 1. display : flex; 2. flex-direction : 방향; flex를 활용하기 위해서는 부모에 필수적으로 달아줘야하는 css 속성이 있..

코딩 공부/CSS 2023.03.01

자바스크립트 마무리 문제(2)

자바스크립트 마무리 문제 모던 자바스크립트 프로그래밍의 정석 155,156 페이지 마무리 문제를 풀어보자! 마무리 문제 1 사용자가 프롬프트 창에 숫자를 입력했을 때 그 숫자를 함수로 넘겨주고, 함수에서는 숫자가 양수인지, 음수인지, 또는 0인지 판단해서 알림 창에 보여 주는 프로그램을 작성해 보세요. let num = parseInt(prompt("숫자를 입력하세요.")); function func(num){ if(num>0){ document.write(num + "은(는) 양수입니다."); } else if(num num2 ? num1 : num2; let GCD = 0; for(let i=1; i

조건문 (데이터 제어하는 방법)을 알아보자!

조건문(conditional statements) 조건문이란 프로그램 내에서 주어진 표현식의 결과에 따라 별도의 명령을 수행하도록 제어하는 실행문입니다. 조건문 중에서 가장 기본이 되는 실행문은 if 문입니다. 조건문은 프로그래밍에서 가장 기본적인 구문 중 하나입니다. 조건문을 사용하면 프로그램이 특정 조건에 따라서 다른 동작을 하도록 할 수 있습니다. 데이터 제어하기 자바스크립트에서 데이터를 제어하는 종류에는 if문 if문 생략 삼항 연산자 다중 if문 중첩 if문 switch문 while문 do while문 for문 중첩 for문 continue문 break문 이 있습니다. 01. if문 if 문은 표현식의 결과가 참(true)이면 주어진 실행문을 실행하며, 거짓(false)이면 아무것도 실행하지 않..

함수에 대해서 알아보자!

함수(Function) 함수는 프로그램에서 반복적으로 사용되는 기능을 만들어 내기 위한 코드들의 집합입니다. 함수는 JavaScript에서 기본 구성 요소 중 하나입니다. JavaScript의 함수는 작업을 수행하거나 값을 계산하는 명령문의 집합인 프로시저(procedure)와 비슷하지만, 프로시저가 함수로 쓰이려면 입력을 반드시 받아야 하고 입력과 명확한 관계가 있는 출력을 반환해야 합니다. JavaScript 함수의 특징 함수는 Function 객체이다. 함수도 하나의 데이터타입이다. 따라서 함수를 변수에 대입하거나 프로퍼티 지정하는 것이 가능하다. 기본적으로 함수는 undefined를 반환한다. 다른 값을 반환하기 위해서는, 함수는 반환값을 지정하는 return 문이 있어야 한다. 다른 함수 내에 ..

데이터 저장과 표현 방법

데이터 저장 javascript에서 데이터를 저장하는 방법은 변수, 상수, 배열, 객체가 있습니다. 이 4가지를 한번 알아보겠습니다. 변수 변수는 데이터를 하나만 저장할 수 있다. 변수는 데이터를 변경 할 수 있다. 변수는 데이터를 하나만 저장하지만 추가도 가능하다. 상수 상수는 데이터를 하나만 저장할 수 있다. 상수는 데이터 변경을 할 수 없다. 배열 배열은 데이터를 순서대로 여러개 저장할 수 있다. 객체 객체는 데이터를 여러개 저장할 수 있다. 객체는 저장한 데이터의 키와 값을 저장할 수 있다.

자바스크립트 마무리 문제(1)

자바스크립트 마무리 문제 모던 자바스크립트 프로그래밍의 정석 113 페이지 마무리 문제를 풀어보자! 마무리 문제 1 : 주어진 배열 : [1, 3, 5, 7, 9, 11 ,13, 15, 17, 19] const arr = [1, 3, 5, 7, 9, 11, 13, 15, 17, 19] for(let i=0; i 10){// if 문을 사용해서 arr[i] 값과 10을 비교한다. document.write(arr[i] + " "); } } // 결과 : 11 13 15 17 19 길라잡이 배열 요소의 개수만큼 for 문을 반복합니다. if 문을 사용해서 요소의 값과 10을 비교합니다. document.write 문을 사용해서 화면에 표시합니다. 마무리 문제 2 : < 주어..

레이아웃 float에 대해 알아보자

Float float는 그대로 번역하자면 '띄우다'라는 뜻입니다. float는 css에서 정렬하기 위해 사용되는 속성입니다. 예를 들어, 문서에 사진과 그림이 있을 때, 그림을 왼쪽이나 오른쪽으로 띄워서 정렬하거나 각 객체를 오른쪽이나 왼쪽으로 정렬하여 전체 문서를 배치(layout) 할 때도 사용할 수 있습니다. Float 속성 값 none : 요소를 띄우지 않음 (기본값) left : 요소를 왼쪽에 띄움 right : 요소를 오른쪽에 띄움 initial : 기본값으로 설정함 inherit : 부모 요소로부터 상속함 Float 해제(clear) 'float' 속성이 적용되지 않도록 지정(해제) 'float: left' 를 해제하려 한다면, 해제되길 원하는 요소 css에 'clear :..

코딩 공부/CSS 2023.02.24
728x90
Adventure Time - BMO