본문 바로가기

Programming

 (80)
[CSS] overflow : 내용이 레이아웃 범위를 벗어날 때 가리기 overflow 내가 지정한 width, height 값에 대하여 그 하위 내용이 범위를 벗어날 때 사용하는 방법이다. overflow-x, overflow-y 를 사용하여 상하/좌우에 대하여 지정할 수도 있다. overflow 속성 속성 의미 visible 바깥으로 나오는 기본 값 hidden 안쪽 외 나머지는 잘림 scroll 스크롤을 만듬 auto 내용이 넘어가면 자동으로 스크롤을 만들어 줌 코드 예시 overflow: hidden;
[CSS] Background 이미지 채우기 이미지 파일을 가지고 있을 때, 이를 이용하여 배경으로 화면 전체를 채우는 방법이다. 전체 코드 background: url("/background.jpg"); background-size: cover;
[JavaScript] for문에서 setTimeout() 호출 시 var, let 차이 변수를 선언하는 var, let 키워드는 서로 다른 스코프를 가지고 있다는 점에서 차이가 있다. 이 때문에 같은 코드를 실행했더라도 다른 결과를 출력하는 모습을 볼 수 있다. 내가 의도한 것은 1초 후에 0, 1, 2, ... 9 가 출력되는 것이었다. 왜 의도한대로 되지 않는지, 변수에 무슨 차이가 있는지 정리해보았다. var 다음과 같이 코드를 짰을 때, 함수 스코프를 가지는 var 키워드의 경우에는 10을 10번 출력한다. for (var i = 0; i < 10; i++) { setTimeout(function() { console.log(i) }, 1000) } for문이 시작하고 하위 setTimeout 함수도 1초 후에 시작되는데, 이 때 for문은 무척 빠른 속도로 돌기 때문에 setTim..
[CSS] Background 이미지 배경 어둡게 하기 이미지 파일로 배경을 꽉 채웠는데, 그 위에 텍스트를 화이트로 뿌리니 잘 보이지 않아서 한 방법이다! 배경색을 똑같이 설정하고 알파값만 주어 어둡게 하였는데, 이 때 사용한 그레디언트 방법 외에도 다양한 방법이 있어서 적어본다. 그레디언트 사용하기 1. 선형 그레이디언트 : 직선으로 진행하는 색상 무늬를 생성합니다. background: linear-gradient(blue, pink); 2. 방향 전환 : 방향을 지정함으로써 그레이디언트를 회전할 수 있습니다. background: linear-gradient(to right, blue, pink); 3. 대각선 그래디언트 : 한쪽 모서리에서 다른 쪽 모서리를 잇는 대각선 방향으로 진행하도록 할 수도 있습니다. background: linear-grad..
[Python] 나누기 연산자 (몫 소수점 포함/버리기 , 나머지 구하기) 매번 헷갈리는 나누기 연산자를 정리해보았다! 몫과 나머지를 구하는 것 외에도 중요한 것은 데이터 타입과 0으로 나눌때인 것 같다. 특히 0으로 나눌 때는 에러가 나기 때문에 주의해야한다. 나누기 연산자 연산자 설명 / 나누어 몫을 구함 (소수점 포함), 결과가 float 자료형(Data Type)으로 처리됨 // 나누어 몫을 구함 (소수점 이하 버리고, 정수 부분만 포함) % 나머지 코드 예시 print(10 / 5)# 2.0 print(10 // 5)# 2 print(10 % 5)# 0 print(10 / 3)# 3.3333333333333335 print(10 // 3)# 3 print(10 % 3)# 1 print(0 / 10) # 0.0 print(10 / 0)# ZeroDivisionError:..
[JavaScript] var, let, const 변수의 차이는? var, let, const 모두 변수를 선언하는 키워드이다. ES5 까지만 해도 var 변수를 사용했지만, ES6 이후로 let, const가 추가되었다. 그렇다면 차이점에는 어떤 것이 있을까? 간단하게 정리해보면, 아래 표와 같다. var let const 재선언 가능 불가능 재할당 가능 불가능 스코프 함수 스코프 블록 스코프 1. 변수에 재할당 var의 경우에는 변수 재선언과 재할당이 가능하고, let은 변수에 재할당이 가능한 반면 const는 불가능하기 때문에 immtuable하다고 할 수 있다. var number = 10 console.log(number) // 10 var number = 20// 재선언 console.log(number) // 20 number = 30// 재할당 conso..
[JavaScript] 함수 선언형과 함수 표현식의 차이점 막연히 사용하던 함수 선언식(Function Declaration)과 함수 표현식(Function Expression)에 대해 알아보고, 차이점을 소개하고자 한다! 호이스팅.. 정말 헷갈렸는데 정리가 좀 된 것 같다 ㅎㅎ 함수 선언형과 함수 표현식 함수 선언형 함수명이 정의되어 있고, 별도의 할당 명령이 없다. function sum(a,b) { return a + b; } 함수 표현식 정의한 함수를 별도의 변수에 할당한다. const sum = function(a,b) { return a + b; } 함수 선언식과 함수 표현식의 차이점 결과부터 말하면, 스코프와 호이스팅에서 차이가 있습니다. 1. Scope 함수 선언식 var와 같이 함수 스코프를 가진다. function func1() { functi..
[Next.js] TypeScript + Kakao Map API 사용하기 사실 내가 진행했던 프로젝트는 Next.js + TypeScritp 기반이였기 때문에, 앞서 React로 구현한 코드는 흐름을 이해할 수 있는 연습 과정이였다. Next.js로 구현하려니.. React와는 다르게 html 파일이 없었기 때문에, Script 태그는 어디에 넣어야하는지에 대한 고민이 생겼다. 결과적으론 Script를 생성하여 넣어주었는데, 왠지 더 좋은 방법이 있을 것 같다...! next에는 'next/script'도 제공하니, 다음에는 이를 사용해서 구현해봐야겠다~! TypeScript + Kakao Map API 사용하기 1. script 요소 생성하기 2. 환경변수로 설정한 앱 키 등록하기 그 외 부분은 앞서 React로 구현한 것과 동일하다! MapContainer.js 참고 20..

티스토리툴바