Front End
`typeof` 연산자를 사용해보자
typeof 연산자?변수의 타입을 확인하기 위해 사용하는 연산자.typeof 값 형태로 사용하며, 결과는 타입의 이름으로 반환된다. → string, number, boolean, object, function, undefined 등console.log(typeof 1); // number console.log(typeof 'hello'); // string console.log(typeof true); // boolean let number = 1>2; console.log(number); // false console.log(typeof ['a', 'b']); // object console.log(typeof {number : 1, string : 'a'}); // object let num = f..
함수
함수 (Function)입력에 따라 그에 걸맞은 논리적인 일련의 작업을 하는 하나의 작업 단위어떠한 목적을 가진 작업들을 수행하는 코드들이 모인 블록코드(지시사항)의 묶음기능(function)의 단위입력과 출력간의 매핑(mapping)항상 출력값을 반환함(return)함수 사용법함수 선언 (declaration) 함수라는 버튼을 제작하는 단계. 함수는 변수와 다른 특별한 공간에 보관됨함수 선언식 가장 기본이 되는 함수 선언. function getTriangleArea(base, height) { let triangleArea = (base * height) / 2; return triangleArea; };함수 표현식 변수/상수 선언 후 그 안에 익명함수를 넣는 형식const getTriangleAre..
HTML 기초
웹 개발 이해하기언어로 구분 할 수 있는 웹 개발의 세 요소HTML뼈대, 구조(Structure)CSS스타일(Presentation)JavaScript상호작용(Interraction)HTMLHyperText Markup Language의 약자로 웹 페이지의 틀을 만드는 마크업 언어.HTML은 tag의 집합이며 tag는 HTML의 기본 구성 요소.부모 노드와 자식 노드로 구성되는 트리 구조를 띈다..html 확장자를 사용자주 사용하는 HTML 요소divblock 요소로 한 줄을 차지한다.spaninline 요소로 컨텐츠의 크기만큼 공간을 차지한다.img이미지를 삽입 할 때 쓰이며 속성에 주소 값src이 들어간다.a링크를 삽입 할 때 쓰이며 속성에 주소 값href이 들어간다.target 속성을 이용 해 링크..
CSS 박스 모델
모든 콘텐츠는 고유한 영역(box)가 있다모든 콘텐츠는 각자의 영역을 가지고 일반적으로 하나의 콘텐츠로 묶이는 요소들이 하나의 박스가 된다. 박스는 항상 직사각형이며 너비와 높이를 가진다.block vs inline vs inline-block박스는 줄 바꿈이 되는 block, 줄 바꿈 없이 옆으로 붙고 크기를 지정 할 수 없는 inline, 줄 바꿈이 없지만 크기 지정이 가능한 inline-block으로 구분 할 수 있다.block줄 바꿈이 일어남기본적으로 상위 요소의 100%의 너비를 가짐크기 지정이 가능함, , 등inline줄 바꿈이 일어나지 않음기본적으로 컨텐츠의 크기만큼 차지함크기 지정이 불가능함, , 등 inline-block줄 바꿈이 일어나지 않음기본적으로 컨텐츠의 크기만큼 차지함크기 지정이..
레이아웃 (와이어 프레임, 목업)
레이아웃웹 사이트 각각의 요소를 목적에 맞게 배치하는 것.와이어프레임웹이나 애플리케이션을 개발 할 때 레이아웃의 뼈대를 그리는 단계이며 말 그대로 “와이어로 설계된 모양”을 뜻함.단순한 선, 도형으로 웹이나 앱의 인터페이스를 시각적으로 묘사한다아주 단순하게 레이아웃과 제품의 구조를 보여주는 용도전환 효과, 애니메이션, 사용자 테스트 같은 스타일링 요소나 UX를 판단하는 것이 아님특정 목적을 가진 프로그램의 와이어프레임목업(Mock-up)대부분의 산업에서 목업은 실물 크기의 모형을 뜻하는 것 처럼, 웹이나 앱에서는 HTML 문서로 실제 제품이 작동하는 모습과 동일하게 하드코딩하는 것을 뜻함.HTML 문서를 통해 목업을 먼저 제작하지 않으면 JavaScript를 적용한 완성본이 어떤 형태를 가질지 상상하기 ..