개발자20 [JavaScript] 자바스크립트 타입변환, 묵시적 타입변환, 명시적 타입변환 자바스크립트의 타입 변환 자바스크립트의 변수는 타입이 고정되어 있지 않으며, 같은 변수에 다른 타입의 값을 대입할 수 있습니다. a = 10; // 숫자형 a = "10"; // 문자열형 👉🏻 a의 값이 숫자형에서 문자열형으로 바뀌어버린다. 1. 묵시적 타입 변환 자바스크립트에서는 특정 타입의 값을 기대하는 곳에 다른 타입의 값이 오면, 자동으로 타입을 변환해서 사용한다. const a = "10"; const b = "20"; const result = a + b; console.log(result); // 1020 result = a - b; console.log(result); // -10 result = a * b; console.log(result);// 200 const c = "문자"; re.. 2020. 12. 13. [JavaScript] 변수 let, 상수 const, var 차이 💻프로그래밍 컴퓨터의 프로그램을 작성하는 일. 일반적으로 프로그램의 작성 방법의 결정, 코딩, 디버깅 등의 작업 모두를 가리킵니다. 변수(Variable) 변수 란 데이터를 저장할 수 있는 메모리 공간을 의미합니다. 값이 변경될 수 있으며 자바스크립트에서는 let 키워드를사용하여 변수를 선언하고 선언되지 않은 변수를 사용하려고 하거나 접근하려고 하면 오류가 발생합니다. 자바스크립트는 변수 자체가 객체화 되어있다. 나중에 값을 바꿀 수 있다면 다 변수이다. 객체는 자기가 혼자서 뭔가 할 수 있는 것들이다. let 변수명; // 변수를 선언 let a; // 프로그램은 오른쪽부터 읽는다 변수명 = 값; // 변수의 초기화 a = 10; console.log(a); let ECMA Script 6 부터 변수 .. 2020. 12. 11. SASS(SCSS) 란 ? CSS Preprocessor 란? HTML, CSS를 다루는 분이라면 한 번은 Sass에 대해 들어봤을 것이다. Sass는 CSS 전(예비)처리기 이고, 보통 CSS Preprocessor 라고 부른다. CSS가 동작하기 전에 사용하는 기능으로, 웹에서는 분명 CSS만 동작하지만 CSS의 불편함을 이런 확장 기능으로 편하게 사용할 수 있다. 사스는 기초 언어에 힘과 우아함을 더해주는 CSS의 확장이다. 어떻게 사용하나요? 웹에서는 CSS만 동작한다. Sass, Less, Stylus 같은 전처리기는 직접 동작시킬 수 없다. CSS는 불편하니 일단 배제하고 우선 전처리기로 작성(코딩)한다. 단, 웹에서는 직접 동작하지 않으니 이렇게 작성한 전처리기를 웹에서 동작 가능한 표준의 CSS로 컴파일(Compil.. 2020. 12. 10. [JavaScript]자바스크립트(JavaScript) 시작, 특징, 출력, 주석 자바스크립트는 어떻게 시작되었나? 넷스케이프(회사) -> 네비게이터(브라우저) 네비게이터에 동적인 프로그램을 만들기 위해 Brendan Erich 영입 10일만에 '모카' 언어 개발 W3C에게 표준화를 위해 여러 중소기업들이 모여 ECMA Script 제안 구글이 가벼운 브라우저를 만듦. 크롬(V8 엔진) Active X 때문에 많은 이용자들이 익스플로러를 떠나게 된다. 그리하여 마이크로소프트가 표준화에 참여하게된다. 그때 모카를 이용하기로 하고, 모카를 livescript(라이브스크립트)로 바꿔서 사용했지만 마음에 들지않아 그 때 유명했던 Java에 script를 붙여서 자바스크립트라고 바꾸었다. 그러면서 모든 엔진에 자바스크립트가 들어가게 되었다. ECMA Script 6 표준화 된 이크마 중에 6번.. 2020. 12. 10. [CSS] CSS animation, CSS 선택자 우선순위 계산 CSS Animation : 요소의 현재 스타일을 다른 스타일로 천천히 변화 시킬 수 있습니다. CSS3에서는 @keyframe 규칙을 사용해 애니메이션 효과를 쉽게 적용할 수 있습니다. animation-fill-mode : 애니메이션이 끝난 후 어떻게 처리할지 설정합니다. backwards : 기본설정. 애니메이션의 스타일을 애니메이션이 시작되기 전으로 되돌립니다. forwards : 애니메이션 키프레임이 100% 도달했을 때 마지막 키프레임을 유지합니다. animation-direction : 애니메이션의 진행 방향을 정하는 속성입니다. reverse : 반대 순서로 진행합니다. alternate : 정해진 순서로 진행했다가 다시 반대 순서로 진행합니다. alternate-reverse : 반대 순.. 2020. 12. 8. [CSS] CSS Flex, 2D 새로운 기술들을 파헤쳐보자 ! CSS Flex (플렉서블 레이아웃) 대부분의 웹사이트는 수직 구성이며 "위-아래"로 스크롤 하여 사용합니다. 레이아웃을 구성할 때 가장 많이 사용하는 요소들이 대부분 블록개념으로 표시되며 이는 뷰에 수직으로 쌓이기 때문에 수직 구성은 상대적으로 쉽게 구성할 수 있습니다. 하지만 수평 구성의 경우는 속성이 명확하지 않기 때문에 이나 float 혹은 inline-block으로 구성했습니다. 따라서 쉽게 수평을 구성할 수 있는 Flex(플렉서블 레이아웃)이 차선책으로 만들어졌습니다. display : flex; flex-wrap 플렉스 라인에 더 이상의 여유가 없을 때, 플렉스 요소의 위치를 다음 줄로 넘길지 여부를 설정합니다. nowrap : 기본 설정, 플렉스 요소가 다음 줄로 넘어가지 않습니다. 대신 .. 2020. 12. 7. [CSS] CSS 위치, z-index, float, 다단 레이아웃, 미디어쿼리, HTML 시멘틱구조 위치 (position) : 요소의 위치를 결정하는 방식을 설정합니다. 1.정적 위치(static position) 지정방식 HTML 요소의 위치를 결정하는 기본적인 방식입니다. position 속성값이 static으로 설정된 요소는 top, left, right, bottom 속성값에 영향을 받지 않습니다. 정적 위치 지정방식은 단순히 웹 페이지의 흐름에 따라 차례대로 요소들의 위치를 결정하는 방식입니다. 2.상대 위치(relative postion) 지정방식 HTML 요소의 기본 위치를 기준으로 위치를 재설정하는 방식입니다. HTML 요소의 기본 위치란 정적위치 지정방식일 때 결정되는 위치를 의미합니다. 자신이 원래 놓여야하는 위치로부터 얼마나 떨어지게 할 것인지 지정할 수 있다.( static po.. 2020. 12. 6. [CSS] 박스 모델(box model), 테두리(border), 마진(margin), 박스사이징(box-sizing), 디스플레이(display), 폼(form) 박스 모델 (BOX MODEL) 모든 HTML 요소는 박스 모양으로 구성됩니다. 이것을 박스 모델이라고 부릅니다. 박스 모델은 HTML 요소를 패딩(padding), 테두리(border), 마진(margin), 그리고 내용(content)으로 구분합니다. 실제로 width와 height는 내용 부분에만 적용된다. 내용(content) : 텍스트나 이미지가 들어있는 박스의 실질적인 내용 부분입니다. 패딩(padding) : 내용과 테두리 사이의 간격입니다. padding-top : 위 padding-right : 오른쪽 padding-bottom : 아래 padding-left : 왼쪽 padding : 모든 패딩 속성을 한꺼번에 설정합니다. 방향은 상단부터 시작해서 시계방향으로 설정합니다. 안녕하세요. .. 2020. 12. 5. [CSS] 가상클래스, 컬러, 텍스트 속성, 배경 순서에 따른 가상 클래스 CSS 스타일을 주기 위해 클래스를 추가할 필요없이 요소 중에서 순서에 따라 원하는 특정 요소를 선택할 수 있습니다. 김사과 오렌지 이메론 li:first-child : li 요소 중에서 첫번째 해당하는 요소에 CSS를 적용합니다. ex) li:first-child { color : red; } li:last-child : li 요소 중에서 마지막에 해당하는 요소에 CSS를 적용합니다. li:nth-child(n) : li 요소 중에서 n번째 요소에 CSS를 적용합니다. ex) li:nth-child(2) { color: orange; } li:nth-child(odd) : li 요소 중에서 홀수번째 요소에 CSS를 적용합니다. li:nth-child(even) : li 요소 중.. 2020. 12. 5. 이전 1 2 3 다음
