전체 글 65

자바스크립트 == (동등) 연산자와 === (일치) 연산자

자바스크립트에서 두 값이 같은지 확인할 때 사용하는 연산자는 == 연산자와 === 연산자가 있다! 이 비슷하게 생긴 두 연산자의 차이점은 다음과 같다. == 연산자는 비교하려는 피연산자의 타입이 다를 경우, 같은 타입으로 바꿔준 뒤 비교한다. 즉 1 == '1' 숫자 1과 문자열 1 을 비교하면 같은 타입으로 바꿔 준 뒤 비교하기때문에 결과가 true가 나온다! === 연산자는 타입 변환을 하지 않고 비교한다. 1 === '1' 을 했을때, 당연히 숫자 1 과 문자 '1' 은 다르기때문에 false 를 출력한다! js로 코딩할때 == 연산자로 비교하는 방법은 추천하지 않는다고한다. 그 이유는 == 연산자의 타입 변환에 따른 잘못된 결과를 얻을 수 있기 때문이란다.. 그래서 가급적이면 === 로 피연산자들..

[CSS] box-sizing: border-box;

HTML에서 padding을 주게되면 박스가 커진다. 이게 무슨소리냐면.. 다음과 같이 width 와 heigth가 300px인 박스가 있다. 이제 여기서 패딩을 30px 만큼 주게된다면 위와같은 모양으로 변하게된다. 여기서 살펴보면.. width:300px height:300px 의 크기는 그대로 유지한 채 박스가 커진다는걸 관찰 할 수 있다. 즉 우리가 내용을 작성할 공간은 변함이 없다는 것이다. 하지면 여기서 Hi 위의 코드처럼 box-sizing: border-box; 라는 css 속성을 주게되면? padding 이 들어간 모습은 잘 관찰할 수 있다. 하지만? 박스의 크기가 그냥 padding을 줬을 때보다 작아진 느낌이 든다! width:300px / height:300px 의 공간 내부에 pa..

CSS not()

not() 은css에서 뭔가가 적용되는것을 원치 않을때 사용합니다. 예를들어서 p:not(.classy) { color: red; } body :not(p) { color: green; } Some text. Some other text. One more text 위와 같은 CSS & HTML 코드가 있다면 p:not(.classy) {color: red; } 이므로 "classy" 라는 클래스가 아닌 p 태그의 색상은 빨간색으로 나오게 될것입니다. body : not(p) { color: green; } 에서는 body 태그에서 p 태그가 아닌 곳에서의 컬러는 green을 가지게 될 것입니다. 따라서 다음과 같은 출력 결과를 볼 수 있습니다. Some text. Some other text. One m..

CSS 미디어 쿼리 MDN

developer.mozilla.org/ko/docs/Web/Guide/CSS/Media_queries 미디어 쿼리 사용하기 미디어 쿼리는 단말기의 유형(출력물 vs. 화면)과, 어떤 특성이나 수치(화면 해상도, 뷰포트 너비 등)에 따라 웹 사이트나 앱의 스타일을 수정할 때 유용합니다. developer.mozilla.org developer.mozilla.org/ko/docs/Web/CSS/@media @media @media CSS @규칙은 스타일 시트의 일부를 하나 이상의 미디어 쿼리 결과에 따라 적용할 때 사용할 수 있습니다. developer.mozilla.org 이것도 내가 보려고 저장 ㅎ

CSS transition 사용할때 유용한 사이트

matthewlein.com/tools/ceaser Ceaser - CSS Easing Animation Tool - Matthew Lein Choose an easing type and test it out with a few effects. If you don’t quite like the easing, grab a handle and fix it. When you’re happy, snag your code and off you go. Now that we can use CSS transitions in all the modern browsers, let’s make them matthewlein.com transition과 관련한 속성들을 사용할때 차이점을 보기에 유용한 사이트! 저장! devel..

[Python] 메소드의 첫번째 Argument ?

class Car() : wheels = 4 doors = 4 windows = 4 seats = 4 def start(): print("I started") sonata = Car() sonata.start() 먼저, 메소드란 클래스안에 있는 function을 말합니다. 클래스 밖에있으면 function 안에있으면 Method.. 위 코드를 실행하면 에러를 출력합니다. start() method 는 0개의 argument를 받는 method 인데, 1개의 argument를 주었다는 에러메시지를 출력합니다. 분명 sonata.start() 를 보면 아무런 argument를 주지않고 있습니다. 그런데 어째서 에러가 나는것일까요? * 그 이유는 파이썬은 메소드를 호출할 때 그 메소드의 인스턴스를 첫번째 ar..

[HTML & CSS] position : relative , absolute

안녕하세요. 오늘은 저번 글에서 설명했던 position 속성의 fixed에 이어서 relative, absolute에 대해서도 기록해보려고 합니다. position : relative 속성은 엘리먼트의 위치를 약간씩 조절할때 유용한 속성입니다. 하나의 박스를 만들고 그 안에 작은 파란색 박스를 만들었습니다. 문서에는 이렇게 표시된 상태입니다. 이 상태에서 안에있는 작은blue박스의 위치를 조금 움직이고 싶습니다. 이럴때 position : relative를 이용할 수 있습니다. position : relative를 해주게되면, top, bottom, left, right 속성값도 조절할 수 있습니다. 이 값을 이용하여 저희는 작은 blue박스의 위치를 조절하게 되는 겁니다. 아래와 같은 사진처럼 됩니다..