프론트엔드18 [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. [CSS] CSS appearance 체크박스, 라디오 모양 변경 방법 appearance : 운영체제 및 브라우저에 기본적으로 설정되어 있는 테마를 기반으로 요소를 표현할 때 사용합니다. 네이티브로 지원되는 모양을 해제하거나 추가할 때 사용합니다. appearance: none; /* 원래 쓰이는 속성을 없앱니다. */ 기본으로 나오는 모양을 없애고 사이즈를 조정해서 화면에 표시시켜준다. 체크박스를 1px로 없애버리고 이미지를 사용해서 체크박스 사용 1. 체크박스를 사라지게 만들기 input[type=checkbox].css-checkbox { overflow: hidden; position: absolute; left: -1000px; width: 1px; height: 1px; } 2. 라벨 태그에 이미지 넣기 input[type=checkbox].css-checkbo.. 2020. 12. 9. [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 위치, 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] 가상클래스, 컬러, 텍스트 속성, 배경 순서에 따른 가상 클래스 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. [CSS] CSS의 시작(CSS의 정의부터 앵커 가상 클래스 선택자까지) CSS(Cascading Style Sheets) HTML 요소들이 각종 미디어에서 어떻게 보일지를 정의하는데 사용되는 스타일 시트 언어입니다. HTML만으로 웹 페이지를 제작할 경우 HTML 요소의 세부 스타일을 지정하는데 어려움이 있습니다. 따라서 매우 많은 시간이 걸리며 완성한 후에도 스타일의 변경 및 유지보수가 매우 힘들다. 이 문제를 해결하기 위해 W3C에서 만든 스타일 시트 언어가 CSS입니다. CSS문법 * 3. 외부 스타일 : 웹 사이트 전체의 스타일을 하나의 파일에서 변경할 수 있도록 해줍니다. 외부에 작성된 스타일 시트 파일은 css확장명을 사용하여 저장합니다. 스타일을 적용할 페이지 CSS 선택자 1. 전체 선택자 ( * ) 스타일을 모두 요소에 적용할 때 사용한다. 전체 선택자는 한.. 2020. 12. 5. [HTML] HTML 이미지와 테이블 이미지 비트맵과 벡터이미지 비트맵은 각 픽셀이 모여 만들어진 정보의 집합으로 레스터 이미지라고도 부른다. 픽셀 단위로 화면에 렌더링한다. 그림판, 포토샵 등 툴로 편집할 수 있다. 벡터이미지는 수학적 정보의 형태들이 만들어내는 결과물이다. 이미지가 가지고 있는 점, 선, 면의 위치, 색상 등의 정보를 가지고 있으며 그를 화면에 렌더링합니다. 확대 및 축소를 해도 이미지가 깨지지 않습니다. 일러스트 같은 툴로 편집할 수 있다. jpg(jpeg) 압축율이 훌륭하여 사진이나 예술분야에서 많이 사용된다. 손실 압축(알고리즘)을 사용한다 파일명 또는 ./파일명 - ./파일명 ./하위폴더명/파일명 또는 하위폴더명/파일명 - 이미지가 상위폴더에 있는 경우 -> ../파일명 - 이미지가 상위폴더에 다른폴더 하위에 있는.. 2020. 11. 21. 이전 1 2 다음
