본문 바로가기

분류 전체보기364

JS] 함수 parameters and Arguments 함수는 3가지 타입이 있다. 1. 단순한 형태 함수 함수 안에 들어간 코드 실행 function getMilk(){ console.log("leaveHome"); console.log("moveRight"); console.log("moveRight"); console.log("moveUp"); console.log("moveUp"); console.log("moveUp"); console.log("moveUp"); console.log("moveRight"); console.log("moveRight"); console.log("moveLeft"); console.log("moveLeft"); console.log("moveDown"); console.log("moveDown"); console.log.. 2021. 8. 7.
JS] 함수안의 함수 / Stanford Karel Stanford Karel Stanford Karel(캐'를)에서 간단히 함수를 연습해보자 https://stanford.edu/~cpiech/karel/ide.html karel the robot은 간단한 로봇이다. 맨 왼쪽 아래에서 맨 오른 위쪽으로 로봇 옮기기 여러 방법이 있지만 4칸 이동하고 방향 바꾸고 4칸 이동하는 것으로 해보았다. 함수 속 함수 여기서 move()가 계속 반복됨을 알 수 있는데 이 것을 하나의 함수로 또 묶어서 사용할 수 있다. 새로운 함수를 만들어서 Beeper 대각선으로 놓기 a chessboard pattern 만들기 선생님이 만든 방식 내가 만든 방식 2021. 8. 7.
JS] console.log 쓰는 이유 console.log 언제 쓸까? 지금까지 우리는 alert를 사용해왔다. alert로 썼을 때는 팝업을 화면에 띄워 사용자에게 내용을 보여주었다. 하지만 console.log는 console에서 내용이 나와 개발자만 결과를 볼 수있다. 함수 실행시 결과는 콘솔에서 보임 alert -> console.log로 바꾸기 developer tool snippet에서 alert를 console.log로 바꾸기 Control+F 또는 Command+F 를 누르면 Find가 나오고 AB 전환키를 누른다. 바꿀 내용을 입력한 후 replace all을 누른다. 변환전 변환 후 2021. 8. 6.
JS] function 기초, 함수 만들기/ 호출하기 함수 언제 쓸까요? 예를들어 로봇이 A에서 B로 갔다가 오는 과정을 대충 코드로 아래와 같이 써보았습니다. alert("leaveA"); alert("moveRight"); alert("moveRight"); alert("moveUp"); alert("moveUp"); alert("moveUp"); alert("moveRight"); alert("moveRight"); alert("EnterB"); alert("moveLeft"); alert("moveLeft"); alert("moveDown"); alert("moveDown"); alert("moveDown"); alert("moveLeft"); alert("moveLeft"); alert("EnterA"); 이런 여러 줄의 코드를 만들었다고 했을 때.. 2021. 8. 6.
JS] 자바스크립트 Numbers (?1) operator 알아보기 보통 계산 할 때랑 같다 var a = 4 + 2; 더하기 (add, plus sign) var b = 4 - 2; 빼기 (subtract, dash or minus sign) var c = 4 * 2; 곱하기 (multiply, asterisk sign 애'-스트릭) var d = 4 / 2; 나누기 (division. a single forward slash) var e = 4 % 2; 나머지 (modulo 머'줄러 a percentage sign) 홀,짝(odd, even number) 구분 할 때 좋음 2로 나눠서 나머지가 0이면 짝, 1이면 홀수 var cost = 3 +5 * 2 는 곱하기, 나누기 먼저한 후 더하기 빼기가 나중이다 // 13 var cost = (3 .. 2021. 8. 6.
맥북 화면 분할 단축키 spectacle 맥 응용 프로그램 다운 받고서 화면창을 full screen 에서 나온 후 단축키를 눌러 화면 분할을 한다. https://www.spectacleapp.com/ Spectacle www.spectacleapp.com 2021. 8. 4.
JS] 자바스크립트 string - concatenation, length, slicing, extracting concatenation 컨,케'ㅌ네이션 "a" + "b" --> "ab" 로 출력됨 변수 이용해서 내용을 alert로 출력하기 .length 1. 아이템이 하나인 경우 하나의 아이템이 들어있다면 몇 글자인지 세줌 2. 아이템이 여러 개인 경우 아이템이 여러개인 경우 아이템이 몇 개인지 세줌 names 안에 5개의 이름이 들어가 있다. .length로 몇 개의 아이템이 있는지 확인할 수 있다. 3. 트위터에서처럼 몇 글자 썼는지, 몇 글자 남았는지 알려주는 방법 띄어쓰기도 포함됨. 방법1 .length를 따로 var에 담아서 카운팅 코드 더 깨끗하고 한 눈에 보기 편함 var tweet = prompt("Compose your tweet"); var tweetCount = tweet.length; ale.. 2021. 8. 4.
JS] 자바스크립트 변수명 짓는법 | Naming variables 누구나 알아 먹을 수 있고, 기억할 수 있는 이름을 짓자. 키워드를 변수명으로 쓰지않는다 var var = "Jane"; (x) var myvar = "Jane"; (O) 포함은 가능 숫자만있는 변수명을 쓰지 않는다. var 17 = "Jane"; (X) var my17 = "Jane"; (O) 띄어쓰기 들어간 변수명은 쓰지 않는다. var my name = "Jane"; (x) 컴퓨터는 첫번째 my만 변수명으로 인식하고 다음 name은 뭐하는 건지 모른다. 가능한 텍스트는 문자, 숫자, _ (언더스코어), $(달러) 만 가능하고 다은 기호는 안된다. camel casing 가능 첫단어 소문자 + 다음 단어 대문자를 띄어쓰기 없이 적기 myName 2021. 8. 2.
JS] 자바스크립트 variables 변수란? 변수 만드는 법 변수(Variables)란? Variables(변수)는 데이터를 담는 새 컨테이너를 말한다. 새 변수 만들기 var: variable 데이터를 담을 새 컨테이너 myName: 새 컨테이너 이름 Angela: Value Value 바꾸기 var는 컨테이너 처음 만들때만 쓴다 이 전에 있던 Angela는 꺼내서 버리고 새로운 이름이 통 안으로 들어간다. alert로 value가 나오게 하기 1 변수에 Hannona를 담고 2 alert로 변수이름을 부르면 그 안에 들어있는 Hanoona를 보여준다. Prompt에 입력된 내용 저장하기 변수를 이용해서 prompt에 입력한 내용을 저장할 수 있다. prompt만 사용하면 입력창이 뜨는데 내용을 입력해도 저장되는 곳은 없다. 입력한 내용을 저장하려면 변수를 만들.. 2021. 7. 31.
JS]자바스크립트 Alert / Prompt alert alert는 알림 pop up창이다. 입력한 내용을 화면에 보여준다. Prompt Prompt(프롬트)는 사용자가 입력까지 할 수 있게 한다. 입력한 내용이 프로그램에 저장되지는 않는다. 저장하고 싶다면 variable을 사용해야 한다. 2021. 7. 31.
JS] 데이터 타입 | 명령어와 데이터타입 컴퓨터는 어떻게 명령어와 사용자에게 보여줄 말을 구분할까? 앞에 쓰인 말은 컴퓨터가 명령어로 생각하고 괄호안에 든 말은 데이터 타입으로 인식하여 사용자에게 보여줘야할 말로 생각한다. 프로그래밍 언어는 입력, 연산, 출력이 가장 기본 형태로 되어 있다. 사용자에게 내용을 입력 받아 연산을 한 후 다시 사용자에게 내용을 보여주는 과정이 기본 형태이다. 그래서 1. CPU에 최적화된 연산(로직)을 작성하고, 2. 메모리를 최소화하여 사용하는 것이 중요하다. 그렇기에 어떤 데이터 타입을 결정해서 쓰는 지도 중요하다. 데이터 타입 ( Variable Types ) 데이터 타입은 primitive data type 과 object data type (reference values) 2가지로 나눌.. 2021. 7. 30.
JS] 자바스크립트 기본 문법 기본 문법 function: 브라우저에게 무엇을 할 지 키워드를 준다. 브라우저에 입력된 키워드를 입력해줘야 한다. message: 화면에 띄울 메세지 큰 따옴표, 작은 따옴표 상관 없지만 메세지 띄울 때 대부분의 자바스크립트 개발자들이 큰따옴표를 사용한다. 세미콜론: 마침표 역할 2021. 7. 27.
JS] 크롬에서 자바스크립트 콘솔열어 behavior 만들기 크롬에서 자바스크립트 콘솔 여는 법 2가지 방법이 있습니다. 방법 1 view -> 개발자 -> 자바스크립트 콘솔 alert 입력해 보기 세미 콜론 까지 쓰고 엔터를 누르면 팝업창이 뜬다. 잘 되네요!! 팝업 2개 뜨게 하기 하지만 단점이 있습니다. 팝업 2개를 뜨게 하려고 첫 라인 쓰고 엔터를 쳐버리면 바로 팝업이 나와버립니다. 이럴 때 shift+Enter를 쳐야 다음 줄로 내려갑니다. 두 개를 입력 후 엔터를 치면 하나가 나타나고 엔터를 눌러 업애면 다음 팝업이 뜹니다. 방법 2 화면 오른쪽 클릭 -> inspect -> Source -> 작은 화살표 누르기 -> snippets -> New snippet 생성 이 경우에는 여러 줄 입력하고 마지막에 빨간 박스를 클릭하거나 해당 단축키 누르면 작동이.. 2021. 7. 27.
JS] 자바스크립트란? 자바스크립트 간단한 역사 오늘 자바스크립트를 시작하는 날이다. 공부한 내용을 정리해 보겠다. 우선 자바스크립트가 어떻게 시작하게 되었는지 살펴보자. 옛날 옛날? 1990년 대에 우리가 아는 인터넷익스플로어, 크롬, 파이어팍스, 사파리 이 전에 Mosac이라는 브라우저가 있었다. 마크라는 대학생 때 이 Mosac을 파고서 대학 졸업 후엔 팀의 주축으로 Netscape Navigator 브라우저를 만든다. 그 전까지 html에 특별한 기능이 없었다. 서버에 웹페이지를 요청하면 서버가 제공하는 정도였다. 1995년 넷스케이프 팀은 에니메이션도 넣고, 좀 더 다이나믹한 웹페이지를 만들고 싶었다. 그래서 서버가 아니라 브라우저 자체에서 돌아가게 끔 작은 스크립트 언어로 코드를 짜서 아주 심플하고 비개발자도 사용 할 수 있는 쉬운 프로그래.. 2021. 7. 26.
CSS] selector 선택자 문법 여러 태그에 같은 효과 selector1, selector2 { 2021. 7. 25.
CSS] class / id / pseudo class css syntax란 css 언어의 문법을 말한다. 기본 syntax selector{ property: value; } selector 효과 받을 대상 who? property: 무엇을 바꿀까 what? value; 어떻게 또는 얼마나 바꿔줄까 how? property 배열은 알파벳 순서로 한다. Tag selector html에 있는 태그에 효과를 준다. Class selector 예를 들어 이미지 두 개 중 하나에만 효과를 주고 싶을때 img 태그에 효과를 줘버리면 전체 이미지에 같은 효과가 들어가게 된다. 한 군데만 효과를 주고 싶으면 class로 따로 지정해 준다. class selector가 tag selector에 적용된 효과를 덮어버리기에 class에 들어간 효과가 보인다. class 사용.. 2021. 7. 25.
Bootstrap] Media-quary / 폰 화면에 반응형으로 만들기 Media query란 무엇인가? 특정 상황이 됐을 때 적용되는 css 코딩 https://www.w3schools.com/cssref/css3_pr_mediaquery.asp https://www.w3schools.com/css/css3_mediaqueries_ex.asp 자주 쓰이는 Media query 타입 Media print h1 {color: red;} 이라하면 화면에서 h1색을 빨간색으로 바꾸라는 것이지만 @media print { h1 {color: red;} } @media print로 감싸면 print할 때만 빨간색으로 하라는 의미가 된다. Media screen break point 사용 화면을 점점 줄였을 때 어느 지점에서 설정된 화면으로 전환할 지 설정 Media (max-widt.. 2021. 7. 22.
CSS] Z-index 제트 인덱스 z-index 사용 전 z-index 사용 후 A 파트가 B 파트 속으로 들어가 보인다. 휴대폰 아래 부분을 아래에 있는 흰바탕 안으로 집어 넣고 싶을 때 z-index를 사용한다. html 기본 포지셔닝 z-index를 사용하기 전에 html 기본 포지셔닝을 알아야 어떤 게 먼저 보이는 게 기본 설정 되어있는지 알 수있다. 1 부모, 자식 태그가 같이 있을 때 자식 태그가 화면 위에 위치한다. 자식 태그는 부모 태그 위에 보여진다. 부모 태그(div)는 보라색, 자식 태그 (h1)은 황토색인데 황토색이 먼저 보이고, 보라색이 그 밑에 깔려있다. 자식태그가 우선 순위에서 앞선다. 2. 코드가 위에서부터 아래로 내려가는 순서대로 화면 디스플레이도 순서대로 나타난다. html 순서대로 나옴 1,2,3 모두에.. 2021. 7. 20.
Bootstrap, Bootsnipp] 부트스트랩 탬플릿 사용하는 법 탬플릿을 제공하는 사이트 1. Bootsnipp.com https://bootsnipp.com/ 2. Bootstrap Examples Bootstrap Example에서 원하는 템플랫을 선택할 수 있다. https://getbootstrap.com/docs/5.0/examples/ 탬플릿 코드 복사해 오는 법 원하는 탬플릿을 클릭해 해당 페이지에 들어간 후 빈 공간에 오른쪽 버튼 눌러 맨 마지막 inspect를 클릭한다. 가져오고 싶은 태그를 선택한 후 copy -> Copy element 를 눌러 복사한 후 붙여넣기 하여 사용한다. 2021. 7. 20.
Bootstrap] 슬라이드 (Carousel) 만들기 Bootstrap에서 Carousel(슬라이드) 찾는 법 Docs -> Components -> Carousel (카러즐) https://getbootstrap.com/docs/5.0/components/carousel/ 부트스트랩에서 코딩 복사해서 붙이기 carousel 기타 옵션 슬라이드 자동 재생 스피드 조절 interval: 5000ms(5초)로 기본 설정. 5초 후에 다음 슬라이드 자동으로 보여진다. 3초 후로 바꿔보기 data-bs-interval="3000" 마우스 올렸을 때 슬라이드 자동실행 멈춤 data-bs-pause="hover" 슬라이드로 안하고 싶을 때 slide를 클래스에서 삭제한다. 자동 재생 멈추고 싶을 때 ride를 false로 설정해 준다. control button 살펴.. 2021. 7. 20.
CSS] 이미지 기울이기, 사이즈 조절, 원으로 만들기 이미지 기울이기 html 이미지에 클래스 이름을 정해주고 css에서 width를 조절해서 크기를 정해준다. rotate(숫자deg)로 얼마나 회전할 지 정한다. 사각 이미지 원으로 만들기 border-radius: ;로 조절한다. 모서리가 점점 깍인다. border-radius: 20%; 일 때 border-radius: 50%; 일 때 원모양이 되었다. 2021. 7. 19.

티스토리툴바