with with

화면에 딱 맞게 디자인하다보면 가끔 padding을 줄 때 박스가 화면을 벗어나는 경우가 있다. width: 1000px의 body에 width: 1000px의 div를 넣는다고 가정해보자. 화면에 딱 맞게 디자인 되었을 것이다. 여기서 text를 가장자리에서 좀 띄어놓고 싶어서 padding: 100px를 주었더니, div가 화면 밖으로 빠져나가버렸다. 이를 해결할 방법은 box-sizing: border-box속성을 주는 것이다. 마법같이 해결된다. 이 마법(?)을 이해하려면 padding의 원리부터 알아야 한다. 1000px의 박스에 200px의 padding을 주면 css는 기존 박스의 크기를 유지하기 위해 200px만큼 박스를 늘리게 된다. 즉 전체 박스의 크기는 1200px가 되는 것이다. 이..

열심히 클론코딩 하며 공부를 하고 있었다. 그냥 똑같이 만드는건 식상하니까 좀 차별화 되게 만들어보고 싶었다. 하지만, 바로 문제가 생겨벼렸다... (2시간 넘게 고민해보고 안되서 그날은 공부 포기하고 쉬었던...ㅜ) 바로 원치않게 화면의 요소가 앞으로 튀어나온 나온 것이다! 분명 다른데에선 이런 문제가 없었는데 이 페이지에서만 이랬다. 결국 앞으로 나온 부분들의 css를 찾아 조사해본 결과 기존 잘 되었던 페이지들과 차이점이 있었다. 바로 opacity, position 속성을 준 것이다. 냉정하게 오류난 부분이 기존의 것과 뭐가 다른지 알아내니까 원인을 찾기 쉬워졌고, 결국 찾아냈다. z-index 속성과 관련된 natural stacking order 문제 때문이었다. 문제를 설명하기에 앞서 pos..

문법 진수변환 print() 포메팅 print('%x' % n) # n: 10진수 int형 변수 # %x: 포메터 #x: 16진수 소문자 (Hexadecimal) #X: 16진수 대문자 #o: 8진수 (Octa) #b: 2진수 (Binary) 문자를 10진수 Unicode로 변경 ord(a) # a문자 -> 정수값 chr(a) # a정수값 -> 문자 # Unicord에 의거 ( A == 65 ) 소수점 반올림 포메팅 format(n, ".2f") # n을 소수점 둘째 자리까지 반올림 비트 시프트 연산 print(a a 40 # a 1 #~a = 11111111 11111111 11111111 11111110 -> -2 # ~n = -n - 1 관계에 있다고 보면 된다 나머지 비트 단위 연산자 # ~ (b..

저번에 일반 함수로 생성자 함수처럼 구현 하면서 생성자 함수를 굳이(필수적으로) 사용해야 하는가에 대한 궁금증이 남았었다. 완벽한 해답을 얻은 건 아니지만 그래도 궁금증이 조금은 해소될만한 답이 나와서 글을 써본다. 저번 포스팅에서 다음과 같이 언급했다. 실제로 두 함수의 차이는 생성자가 객체인지 사용자 정의 생성자인지의 차이와 프로토타입의 구성 뿐이다. 게다가 상속받은 프로토타입의 메서드도 완벽히 동일하다. ...거의 맞는 말이긴 한데(둘째 줄은 틀린 거였음.. 죄송합니다 ㅜ), 프로토타입의 구성에서 js 내부적으로 꽤나 유의미한 차이가 나는거 같다. 그 전에 프로토타입의 정의부터 살펴보자. js에서의 프로토타입은 부모 객체로 부터 상속받은 프로퍼티(속성)들의 집합(객체)을 의미한다. java에 ext..

생성자 함수는 유사한 객체를 여러 개 만들어야 하는 상황에 유용하다. 그런데 사실 생성자 함수와 그냥 함수는 크게 다를 바가 없지만, 관례라 해야하나... 3가지 차이점이 있다. 함수 이름의 첫 자는 대문자로 시작한다. 반드시 new 연산자를 앞에 붙여 호출한다. 생성자 함수 안에는 return문이 없다. (메서드 함수에서 사용되는 부분은 제외하고) 예시를 살펴보자. function User(name, age) { this.name = name; this.age = age; this.introduce = function () { console.log(`Hi, I'm ${this.name}, ${this.age} years old.`); }; } user1 = new User("Jane", 32); 이렇듯..

사전적 정의는 function(함수)과 Lexical Environment(어휘적 환경)의 조합으로, 함수가 생성될 당시의 외부 변수를 기억하고, 생성 이후에도 계속 접근 가능한 코드를 의미한다. ...글로 적으니 무슨 소리인지 모르겠다. 따라서 예시와 함께 알아볼건데, 그 전에 Lexical Env.에 대해 알아보자. Lexical Environment ##################################################### [1] const name = "Woong"; ##################################################### [2] function isAdult(age) { if (age > 19) { console.log(`${name}..

js공부를 하는 중 배열 안에 객체가 들어있는 자료형을 다뤄봤다. let userList = [ { name: "Mike", age: 30 }, { name: "Jane", age: 27 }, { name: "Tom", age: 18 }, ]; 이런 구조였는데, 여기에 userList의 객체의 속성은 유지한 채 새로운 속성을 추가하고 싶을 때 map() 과 Object.assign()을 사용하게 된다. map() 함수를 인자로 받아서 배열 모든 원소에 대해 함수의 기능을 실행한 뒤 새로운 배열로 반환해주는 함수이다. Object.assign() 객체 들을 인자로 받는데, 첫 번째 객체인 타겟 객체에 두 번째 이후의 객체의 요소들을 추가하는 것이다. 적용된 예시는 다음과 같다. let newUserList..