Today Hailie Learned

와이어프레임(Wireframe)이란? 웹 또는 애플리케이션을 개발할 때 레이아웃의 뼈대를 그리는 단계이다. 아주 단순하게, 레이아웃과 제품의 구조를 보여주는 용도이고, 전환 효과나, 애니메이션, 사용자 테스트 같은 스타일링 요소나 UX(사용자 경험, User Experience)를 판단하는 것이 아니다. 목업(Mock-up)이란? 웹 또는 앱을 제품이라고 할 때, 목업은 실제 제품이 작동하는 모습과 동일하게 HTML 문서를 작성하는 것. => 와이어프레임과 목업 작업은 js로 넘어가기 전, 설계도와 같다. 키포인트 display: flex; 를 자식 요소가 아닌 부모 요소에 적용해야한다. flex-direction 을 이용하여 요소를 정렬할 방향을 결정할 수 있다. justify-content 와 ali..

Logical OR Operator (||) 연산방식 연산자를 기준으로 왼쪽부터 Truthy 값을 찾습니다. Truthy 값을 찾은 경우, 연산을 중지하고 해당 값을 반환합니다. 마지막까지 Truthy 값을 찾지 못한 경우, 마지막에 위치한 값을 반환합니다. Logical AND Operator (&&) 연산방식 연산자를 기준으로 왼쪽부터 Falsy 값을 찾습니다. Falsy 값을 찾은 경우, 연산을 중지하고 해당 값을 반환합니다. 3. 마지막까지 Falsy 값을 찾지 못한 경우, 마지막에 위치한 값을 반환합니다. ! (NOT) NOT 연산자의 우선순위는 모든 논리 연산자 중에서 가장 높기 때문에 항상 &&나 || 보다 먼저 실행됩니다. alert() 메소드의 리턴값은 undefined!!

CSS (Cascading Style Sheets)란? 웹 페이지 스타일 및 레이아웃을 정의하는 스타일시트 언어이다. CSS는 웹사이트 사용자가 HTML 문서에 작성된 콘텐츠를 잘 이해할 수 있도록 돕는 역할을 한다. 즉, 웹 애플리케이션에 접근할 수 있는 사용자 인터페이스(user interface)를 만든다. 직관적이고 쉬운 UI 제작은 (user interface: 사용자 인터페이스) 프론트엔드 개발자의 기본 소양이다. 웹 프론트엔드 개바자는 웹 개발 기술을 기반으로 사용자와 소통할 수 있는 웹 페이지 제작을 담당한다. 그래서 애플리케이션과 소통에 필요한 UI제작은 프론트엔드 개발자의 기본 소양이다. 버튼을 만들고, 콘텐츠가 더욱 잘 보이게 레이아웃을 적절히 디자인하는 것 모두 프론트엔드 개발자가 ..

삼항 조건 연산자 (ternary operator)는 조건식의 평가 결과에 따라 반환할 값을 결정한다. 조건식 ? 조건식이 true 일 때 반환할 값 : 조건식이 false일 때 반환할 값 const result = score >= 60 ? 'pass' : 'fail'; 첫 번째 피연산자가 true로 평가되면 두 번째 피연산자를 반환하고, 첫 번째 피연산자가 false로 평가되면 세 번째 피연산자를 반환한다. 물음표 (?) 앞의 첫 번째 피연산자는 조건식, 즉 불리언 타입의 값으로 평가될 표현식이다. 만약 조건식의 평가 결과가 불리언 값이 아니면 불리언 값으로 암묵적 타입 변환된다. const x = 2; const result = x % 2 ? '홀수' : '짝수'; console.log(result)..

HTML = 웹페이지 구조를 담당하는 마크업 언어, tag들의 집합 (*tag = 부등호로 묶인 html의 기본요소) CSS = 디자인 요소를 시각화하는 스타일시트 언어 Javascript = 단순한 웹페이지를 프로그램으로 만들어 유저와 상호작용할 수 있게 해주는 프로그래밍 언어 = 한 줄 모두 차지 = 컨텐츠 크기만큼 차지 이미지 삽입하기 **이미지 주소는 마우스 우클릭 후 따올 수 있다. (크롬 기준) 링크 삽입하기 리스트화 시키기 ul - il (unordered)/ 순서가 없는 리스트를 작성할 때 사용 리스트1 리스트2 리스트3 HTML 삽입 미리보기할 수 없는 소스 ol - il (ordered) / 순서가 있는 리스트를 작성할 때 사용 리스트1 리스트2 리스트3 HTML 삽입 미리보기할 수 없..

반복문 for 반복문은 조건식의 평가 결과가 참인 경우 코드 블록을 실행한다. 그 후 조건식을 다시 평가하여 여전히 참인 경우 코드 블록을 다시 실행한다. 이는 조건식이 거짓일 때까지 반복된다. for (변수 선언문 또는 할당문; 조건식; 증감식) { 조건식이 참인 경우 반복 실행될 문; } ex1) for (var i = 0; i = 0; i--){ console.log(i); } 위 식은 i가 1부터 시작해서 0이상일때까지 console 창에 i를 log하..

메모리 칩에는 주소 버스와 데이터버스가 있다. 버스는 비트를 이동시키는 대량교통수단이다. 메모리 크기가 늘어나면 주소로 연결해야 할 비트 수도 많아진다. 임의 접근 메모리 (random access memory) RAM 을 사용하면 메모리 위치 중 원하는 곳은 어디든 원하는 순서로 쓰거나 읽을 수 있다. 디지털 카메라 정적 RAM (SRAM)은 비싸지만 아주 빠르다. 각 비트에 트랜지스터가 6개 들어간다. 트랜지스터는 공간을 차지하기 때문에 수십억~수조 비트를 저장하기에 좋다. 동적 RAM (DRAM)은 집적도(밀도, 단위 면적당 비트 개수)가 높기 때문에 큰 메모리 칩에 사용된다. SRAM & DRAM 모두 휘발성이다. (전원이 끊어지면 데이터가 사라진다. ) 코어 메모리는 오래된 비휘발성 RAM으로,..

논리연산자 NOT 논리 부정(!) 연산자는 언제나 불리언 값을 반환한다. 단, 피연산자가 반드시 불리언 값일 필요는 없다. 만약 피연산자가 불리언 값이 아니면 불리언 타입으로 암묵적 타입 변환된다. !false // true !(3>2) // false !undefined // true (undefined를 false로 취급-falsy) !"hello" // false ("hello"를 true로 취급-truthy) !0; // true 기억해야 할 9가지 falsy 값 if 문에서 false로 변환되기 때문에, if 구문이 실행되지 않습니다. if (false) if (null) if (undefinded) if (0) if (-0) if (NaN) if ('') if ("") if (``) 선언과 호..

HTML(Hyper Text Markup Language) = 웹을 구성하는 가장 기초가 되는 뼈대 HTML을 구성하는 기본 단위는 태그입니다. 여는 태그와 텍스트 문구 그리고 닫는 태그를 이용하여 만든 것들을 하나의 element(엘레먼트 혹은 요소)라고 부릅니다. : 브라우저에게 HTML 코드가 해당 태그 내부에 존재한다고 알려줍니다. : 아직 여러분이 사용하지는 않겠지만, 주로 외부 소스를 참조해야할때 사용하곤 합니다. : 브라우저는 이 태그에 포함되어 있는 내용들을 화면에 보여주게 됩니다. 이미지 태그는 src라고 부르는 하나의 속성을 갖고 있습니다. See the Pen Untitled by HelloHailie (@hellohailie) on CodePen. 이미지 주소 얻는 방법 1. 웹에서..