본문 바로가기

전체 글

JavaScript 기초3
2020. 9. 15. dynamically typed language 런타임에서 타입이 정해지기 때문에, 선언할 때 어떤 타입인지 정의하지 않는다. 스트링 + 숫자 ==> 스트링 스트링 / 스트링 ==> 스트링이 숫자라면 계산되서 출력 let a = 1; let b = 'test'; let c = 5; let d = 2; console.log(a + b); console.log(c / d); // 1test // 2.5 string concatenation console.log(`string literals: 1 + 2 = ${1 + 2}`); // string literals: 1 + 2 = 3 // 이스케이프를 할 때는 \ 를 사용한다. 연산 기본적인 사칙연산, 나머지, ** (승), 카운터 연산 (증가, 감소) //비교..
JavaScript 기초2
2020. 9. 15. var ES6 전 버전에서 발생할 수 있었던 문제는 지나치게 유연했다는 점이다. 예를 들면 아래와 같은 코드에서 에러가 발생하지 않는다. a = 4; var a; console.log(a); test 라는 변수를 선언함과 동시에 값을 할당했는데, 변수 선언의 규칙인 var 를 사용하지 않았음에도 불구하고, console 에서는 온전히 4를 출력한다. 또한 var 를 선언해서 값을 할당하는 것에는, 데이터 타잎을 전혀 고려하지 않기 때문에 문제가 발생할 소지가 다분했다. 온전히 출력되는 이유는 hoisting 때문인데, hoisting 이란 선언한 변수, 혹은 함수를 유저가 작성한 순서와 상관없이 가장 위로 올려 보내는 것을 말한다. use strict 파일의 가장 위에 use strict 를 선언해주면 ..
JavaScript 기초1
2020. 9. 14. Web API : Web Application Programming Interface 브라우저가 이해하는 함수라는 의미 브라우저가 HTML 페이지를 다운받아서 실행하는 순서 위에서 부터 한 줄 씩 분석해서, html 과 css 를 병합해서 파싱한 후 브라우저에 정보를 보냄. Head 안에 스크립트가 포함되었을 때의 실행 순서 html 코드를 한 줄 씩 읽어서 파싱하다가, script 가 보이면 html 파싱을 멈추고 script 를 다운로드하고 실행 한다. 그 후 다시 html 을 파싱하여 브라우저에 정보를 전달한다. 이렇게 했을 경우 js 파일이 크고 인터넷 속도가 느리다면 사용자가 html 페이지를 보기까지 시간이 걸린다. 따라서, body 태그의 가장 마지막에 script 를 넣는 방법이 있다. h..
HTML : data-* 태그
2020. 9. 12. HTML data-* 태그 data-* 는 원하는 태그를 커스텀하는 것이다. 복잡한 화면을 정의할 때 class, id, name 으로 충분하지 않을 경우가 있는데, 이 때 사용하면 매우 유용하다. name 으로만 form 을 보내고, 받아온 정보를 뿌리기에 충분하지 않을 경우가 있는데, 이 때 data-name 이라고 정의하면, 서버에 보내는 태그 따로, 서버에서 받아온 정보를 뿌리는 태그인 'name' 을 따로따로 정의할 수 있다. data- 다음에 사용자의 기호에 따라서 정의해서 사용하면 된다.
CSS background-attachment : fixed;
2020. 9. 12. background-attachment: fixed; 백그라운드 이미지가 스크롤 되지 않는다. 브라우저를 스크롤 하면서 이미지는 움직이지 않지만, 이미지 보다 위에 있는 요소들이 움직이면서, 마스크 기능을 낼 수 있다. https://www.w3schools.com/cssref/tryit.asp?filename=trycss_background-attachment_fixed Tryit Editor v3.6 .fixed-bg { background-image: url("img_tree.gif"); min-height: 500px; background-attachment: fixed; background-position: center; background-repeat: no-repeat; background-..
CSS Global 변수 사용법
2020. 9. 12. CSS Global 변수 사용법 :root{ --color-red : #111111 --color-orange : #111111 --color-yellow : #111111 --color-green : #111111 --color-blue : #111111 } .class or id or tag etc... { color : var(--color-red); } 위와 같은 식으로 사용할 수 있다. 따라서 보통 색, 폰트, 크기 등의 자주 사용하는 값 또는 수치 등을 미리 정의하고, 필요한 곳에서 참조하도록 한다. >> '--' CSS 에서 정의한 custom 변수 설정 방법 또한 이것을 이용하여 calc 도 사용할 수 있다. ex) input { font-size : calc(var(--font-size-..
CSS 중앙정렬 몇 가지 기법
2020. 9. 12. CSS 중앙정렬 margin : auto block 레벨의 요소에 적용된다. 기본적으로 수평정렬은 가능하지만, 수직정렬까지는 되지 않는다. margin : auto margin : 0px auto; maring : auto 0px; text-align : center block 레벨이 아닌 요소, inline 요소라면 중앙 정렬이 가능하다. transform : translate (x, y, z); block 레벨에서도 사용이 가능하다. transform : translate (50%, 50%);
CSS 박스모델
2020. 9. 11. CSS 박스 모델 box-sizing context-box: 기본 값 (default) border-box box-sizing : context-box padding 값을 부여했을 때 박스 자체의 크기가 커지지만, 컨텐츠의 크기는 유지된다 box-sizing : border-box padding 값을 부여해도 박스 자체의 크기는 유지가 되며 컨텐츠의 넓이가 작아진다. 화면 레이아웃을 잡을 때 border-box 로 하는 것이 편하다. content-box 의 장점은 position:relatvie, absolute 로 하여, 컨첸츠의 위치를 더욱 유동적으로 위치시킬 수 있다는 장점이 있다고 한다. Ref: https://developer.mozilla.org/en-US/docs/Web/CSS/box-si..

티스토리툴바