Advanced Challenge & Nightmare Test Step1 - 숫자 버튼을 누르고 화면에 숫자를 입력하기 숫자 버튼을 눌렀을 때, 계산기의 화면에 숫자가 보여야 한다. 숫자 버튼을 여러 번 눌렀을 때, 계산기 화면에 숫자가 이어붙여져야(concatenation) 한다. Step2 - 연산자...
Flex(Flexible) Flex(Flexible) 는 “잘 구부러지는, 유연한” 이라는 뜻이다. Flexbox로 레이아웃을 구성한다는 것은, 박스를 유연하게 늘리거나 줄여 레이아웃을 잡는 방법이다. 1. display: flex 분석하기 display: flex 는 부모 박스 요소에 적용해, 자식 박스의 방향과 크기를 결정하는 레이아웃...
모든 콘텐츠는 각자의 영역을 가지며, 일반적으로 하나의 콘텐츠로 묶이는 요소들이 하나의 박스가 된다. 박스는 항상 직사각형이고, 너비(width) 와 높이(height) 를 가진다. CSS를 이용해 속성과 값으로 그 크기를 설정한다. block vs. inline, inline-block 박스의 종류는 줄 바꿈이 되는 박스와 줄 바꿈이 없이 옆으로...
CSS란? CSS (Cascading Style Sheets) 는 웹 페이지 스타일 및 레이아웃을 정의하는 스타일시트 언어다. 단순한 정보를 전달을 하기 위한 사이트라면 왼쪽도 괜찮지만, 좀 더 편안한 분위기, 정돈된 레이아웃, 문단 간격을 조정한 오른쪽이 조금 더 보기 좋고, 가독성이 좋아보인다. 이 두 사이트는 똑같은 HTML 파일을 사용...
시맨틱 요소(Semantic Element) 란? HTML의 최신 버전인 HTML5에서는 시맨팁 웹(Semantic Web) 이 중시되면서 여러 시맨트 요소가 새롭게 만들어졌다. 시맨틱 (Semantic) 이란 ‘의미가 있는, 의미론적인’ 이라고 해석할 수 있다. 다시 말해, 의미를 가진 요소를 사용하는 방식을 추구하기 시작했다. 시맨틱 요소 중 하...
HTML이란? HTML (Hyper Text Markup Language) 은 웹 페이지의 틀을 만드는 마크업 언어다. How to use HTML? HTML은 태그(tag)들의 집합 Tag : 부등호(<>)로 묶인 HTML의 기본 구성 요소 <!DOCTYPE html> <html> <he...
함수란? 현실에서 발생하는 대부분의 복잡한 문제는 더 작고 간단한 문제로 나눌 수 있다. 복잡한 문제를 해결하기 위해서는 반대로 작고 간단한 문제를 하나씩 해결하고, 마지막에는 크고 복잡한 문제를 해결한다. 이러한 과정을 컴퓨터라는 함수라는 것을 사용해 해결한다. 함수는 입력에 따라 그에 걸맞은 작업을 하는 하나의 작업 단위다. 샌드위...
반복문이란? 반복문 은 프로그램 내에서 똑같은 명령을 일정 횟수만큼 반복하여 수행하도록 제어하는 명령문이다. 1. for문 JavaScript의 대표적인 반복문인 for문이 있다. 먼저, 1부터 5까지의 수를 차례대로 더한 값을 구하는 코드를 작성한다고 가정하면, 가장 쉽게 떠올릴 수 있는 방법은 1부터 5까지의 수를 모두 직접 입력하는 것...
조건문(Conditional) 이란? 조건문(條件文, Conditional) 이란 어떤 조건이 주어질 때 어떤 동작을 수행하도록 하는, 즉 조건에 따라 실행이 달라지게 할 때 사용되는 문장이다. 1. if문 if문 은 주어진 조건식의 참(true) / 거짓(falst) 여부에 따라 실행이 결정된다. 참과 거짓을 판단하기 위한 Jav...
타입(Type) 이란? 정보를 전달하기 위해서 다양한 사용을 하고 자주 쓰는 표현은 분류가 필요하다. 타입(type) 은 값(value)의 종류다. 자바스크립트의 모든 값은 타입을 가지고 있다. 타입이 있어 쉽게 분류할 수 있다. 각 타입은 고유한 속성과 메서드를 가진다. 1. Number 타입 Number 는 ...
새 버전의 콘텐츠를 사용할 수 있습니다.
