[CSS] display란? / display 속성 / display 종류 / 🖼
display 속성이란? display 태그는 화면에 어떻게 드러나게 할지를 결정하는 속성입니다. 사실 이렇게 들으면 감이 잘 안오는데 요소 크기를 어떻게 결정할건가 를 결정하는 속성이라고 이해하시는게 조금 더 감이 잘 잡히는 것 같습니다! display 속성값의 종류 display 속성값은 4가지 입니다. none block inline inline-block 예제를 보면서 설명하는게 이해가 가장 빠를 것 같습니다. HTML I am none I am block I am inline I am inline-block CSS body div { font-size: large; margin-bottom: 50px; } .none_div { display: none; background-color: bluev..
2020. 1. 14.
[JS] Arrow Function / 화살표 함수란 ❓
화살표함수(Arrow function)는 ES6부터 쓸 수 있는 일종의 익명 함수이다. 일반적인 화살표함수의 모습은 이러하다. const fun1 = () => { return true; } 화살표 함수와 기존 함수의 차이점은? 왜 화살표 함수가 생겼을까? 1. this의 차이. 기존 함수는 this 가 호출시에 동적으로 결정되고, 화살표함수는 선언시에 정적으로 this가 결정된다. 기존 함수 (동적인 this) var obj = { state: 0, addState: function(){ btn.addEventListener('click', function(){ this.state += 1; }); } }; 화살표 함수 (정적인 this) var obj = { state: 0, addState: fun..
2020. 1. 8.
[CSS] vh란? / vw란? / what is vh? ❓ / %와의 차이
vh = viewport height vw = viewport width 즉, 현재 실행중인 스크린 크기에 맞춰 상대적 크기를 반환하겠다는 뜻입니다. 100vh, 100vw 가 전체 화면의 기준이 됩니다. 예를들어, 현재 스크린 크기가 height = 1000px, width = 800px 이라면 1vh = 10px / 1vw = 8px 이 될 것이고 height: 50vh; width: 25vw; 로 설정한다면 height - 500px width - 200px 실제로 이런식으로 적용이 되겠죠! % 와 차이는? 그렇다면 100% 과 100vh 설정하는 것이 무엇이 다르냐 하는 의문이 들 것입니다. 첫번째로는, vh 는 width 에서도 사용이 가능합니다. width: 100% 와 width: 100vh..
2020. 1. 7.
[JS] 자바스크립트 함수 종류 / 화살표 함수 차이점 ❓
방법 1. function 함수이름 {} function fun1() { return true; } function fun1(a,b) { return a+b; } 파싱하는 단계에서 함수가 정의된다. 방법 2. var a = 함수 (익명함수) var fun2_1 = function() { return true; } var fun2_2 = function(a,b) { return a+b; } 변수에 함수를 할당한다. 런타임 단계에서 함수가 정의된다. 그렇기 때문에, 방법 1과 다르게 함수 선언 순서에 따라 함수가 잘 작동하지 않을 수 있다! 방법3. Function을 이용한 객체로서의 선언 var fun3 = new Function("a", "b", "a+b"); 잘 안쓰인다고 한다. 방법4. 화살표함수 v..
2020. 1. 6.
[PHP] PHP 문자열 합치기 / Merge String /
PHP 문자열 php 는 "" 로 문자열 변수를 선언한다. $Str = "내용"; 문자열 합치기 문자열 사이에 .을 이용한다. 예제 $Str = "내용". "합치기"; echo $Str => 내용합치기 $A = "내용A"; $B = "내용B"; $AB = $A.$B echo $AB => 내용A내용B
2019. 10. 26.
[HTML] input에 IP 포맷 검증하기 / MAC 검증하기 / IP vaildation / MAC vaildation
Input으로 받은 값 IP 와 MAC 형식에 맞는지 검증하기 Input에 IP주소 혹은 MAC 주소를 받고싶은데 사용자가 잘못된 값을 입력한 것을 확인 혹은 다른 값을 입력하지 못하도록 하는 방법이다. 위 파일을 받아서 넣어주자. JS 넣는방법 / JS 함수 적용 form 이 들어가있는 html문서 : 혹은 의 onclick 속성에 함수 넣어주고 부분에 파일명 넣어준다. JS 파일 분석 / 이용법 위 파일을 불러온 후 확인해보면 var ipformat 과 var macformat은 각각 ip와 mac 형식이 맞는지 확인해주는 정규표현식이다. match 함수를 통해서 이 표현식에 맞는지 확인이 가능하다. IP.value.match(ipformat) -> IP(함수에서 받는값) 가 ipformat 형식에 ..
2019. 10. 13.
[CSS] display란? / display 속성 / display 종류 / 🖼
display 속성이란? display 태그는 화면에 어떻게 드러나게 할지를 결정하는 속성입니다. 사실 이렇게 들으면 감이 잘 안오는데 요소 크기를 어떻게 결정할건가 를 결정하는 속성이라고 이해하시는게 조금 더 감이 잘 잡히는 것 같습니다! display 속성값의 종류 display 속성값은 4가지 입니다. none block inline inline-block 예제를 보면서 설명하는게 이해가 가장 빠를 것 같습니다. HTML I am none I am block I am inline I am inline-block CSS body div { font-size: large; margin-bottom: 50px; } .none_div { display: none; background-color: bluev..
[JS] Arrow Function / 화살표 함수란 ❓
화살표함수(Arrow function)는 ES6부터 쓸 수 있는 일종의 익명 함수이다. 일반적인 화살표함수의 모습은 이러하다. const fun1 = () => { return true; } 화살표 함수와 기존 함수의 차이점은? 왜 화살표 함수가 생겼을까? 1. this의 차이. 기존 함수는 this 가 호출시에 동적으로 결정되고, 화살표함수는 선언시에 정적으로 this가 결정된다. 기존 함수 (동적인 this) var obj = { state: 0, addState: function(){ btn.addEventListener('click', function(){ this.state += 1; }); } }; 화살표 함수 (정적인 this) var obj = { state: 0, addState: fun..
[CSS] vh란? / vw란? / what is vh? ❓ / %와의 차이
vh = viewport height vw = viewport width 즉, 현재 실행중인 스크린 크기에 맞춰 상대적 크기를 반환하겠다는 뜻입니다. 100vh, 100vw 가 전체 화면의 기준이 됩니다. 예를들어, 현재 스크린 크기가 height = 1000px, width = 800px 이라면 1vh = 10px / 1vw = 8px 이 될 것이고 height: 50vh; width: 25vw; 로 설정한다면 height - 500px width - 200px 실제로 이런식으로 적용이 되겠죠! % 와 차이는? 그렇다면 100% 과 100vh 설정하는 것이 무엇이 다르냐 하는 의문이 들 것입니다. 첫번째로는, vh 는 width 에서도 사용이 가능합니다. width: 100% 와 width: 100vh..
[JS] 자바스크립트 함수 종류 / 화살표 함수 차이점 ❓
방법 1. function 함수이름 {} function fun1() { return true; } function fun1(a,b) { return a+b; } 파싱하는 단계에서 함수가 정의된다. 방법 2. var a = 함수 (익명함수) var fun2_1 = function() { return true; } var fun2_2 = function(a,b) { return a+b; } 변수에 함수를 할당한다. 런타임 단계에서 함수가 정의된다. 그렇기 때문에, 방법 1과 다르게 함수 선언 순서에 따라 함수가 잘 작동하지 않을 수 있다! 방법3. Function을 이용한 객체로서의 선언 var fun3 = new Function("a", "b", "a+b"); 잘 안쓰인다고 한다. 방법4. 화살표함수 v..
[PHP] PHP 문자열 합치기 / Merge String /
PHP 문자열 php 는 "" 로 문자열 변수를 선언한다. $Str = "내용"; 문자열 합치기 문자열 사이에 .을 이용한다. 예제 $Str = "내용". "합치기"; echo $Str => 내용합치기 $A = "내용A"; $B = "내용B"; $AB = $A.$B echo $AB => 내용A내용B
[HTML] input에 IP 포맷 검증하기 / MAC 검증하기 / IP vaildation / MAC vaildation
Input으로 받은 값 IP 와 MAC 형식에 맞는지 검증하기 Input에 IP주소 혹은 MAC 주소를 받고싶은데 사용자가 잘못된 값을 입력한 것을 확인 혹은 다른 값을 입력하지 못하도록 하는 방법이다. 위 파일을 받아서 넣어주자. JS 넣는방법 / JS 함수 적용 form 이 들어가있는 html문서 : 혹은 의 onclick 속성에 함수 넣어주고 부분에 파일명 넣어준다. JS 파일 분석 / 이용법 위 파일을 불러온 후 확인해보면 var ipformat 과 var macformat은 각각 ip와 mac 형식이 맞는지 확인해주는 정규표현식이다. match 함수를 통해서 이 표현식에 맞는지 확인이 가능하다. IP.value.match(ipformat) -> IP(함수에서 받는값) 가 ipformat 형식에 ..