참고 블로그 CSS Flex(Flexible Box) 완벽 가이드 많은 경우 float, inline-block, table 등의 도움을 받아서 수평 레이아웃을 구성하지만 이는 차선책이며, 우리는 Flex(Flexible Box)라는 명확한 개념(속성들)으로 레이아웃을 쉽게 구성할 수 있습니다. CSS F heropy.blog 참고블로그 2 이번에야말로 CSS Flex를 익혀보자 이 튜토리얼은 “차세대 CSS 레이아웃” 시리즈의 첫번째 포스트입니다. 이번에야말로 CSS Flex를 익혀보자 이번에야말로 CSS Grid를 익혀보자 벌써부터 스크롤의 압박이 느껴지고,‘좀 편안하게 누 studiomeal.com flexbox 로 만들수 있는 10가지 레이아웃 * 컨테이너 속성 display: flex .cont..

* CSS 구조 div{ background-color: blue; } CSS 는 선택자(selector)와 중괄호({ }) 안의 속성이름(attribute name) : 속성값(attribute value) 이 콜론(:)으로 연결되어 있다. 여기서는 div 가 선택자이다. 의사 클래스 참조문서 의사 클래스 - CSS: Cascading Style Sheets | MDN CSS 의사 클래스(가상 클래스)는 선택자에 추가하는 키워드로, 선택한 요소가 특별한 상태여야 만족할 수 있습니다. 예를 들어 :hover를 사용하면 포인터를 올렸을 때에만 글씨 색을 바꾸고 싶을 developer.mozilla.org * 의사 클래스 제출 #submit{ all: unset; background-color: skyblu..

* HTML 뼈대구조 DOCTYPE - 해당문서의 HTML 버전을 알려주는 역할 (html 5 버전) head - 해당 문서에 대한 정보인 메타데이터(metadata)를 알려주는 역할 meta 태그의 charset 속성 - 해당 문서의 문자 인코딩 방식을 지정하는 역할 meta 태그의 name 속성 - 해당 문서에서 사용자가 볼 수 있는 영역인 뷰포트(viewport)를 제어하는 역할 meta 태그의 content 속성 - 모든 장치에서 웹화면이 잘 보이도록 뷰포트(viewport)를 설정하는 역할 title - 브라우저 탭에 표시되며 웹 페이지의 제목을 설정하는 역할 body - 브라우저 화면에 보이는 모든 태그를 감싸주는 역할 * HTML 요소의 구성 사진 갤러리 앱 사진 갤러리 앱 - 요소(elem..

참고 영상 * 간단한 프로토타이핑 (prototyping) * 가이드라인 1. 웹사이트의 정체성을 드러내는 문구와 설명을 헤딩태그(h1~h6)로 지정한다. 2. 사진을 검색할 수 있도록 input 태그를 사용한다. 3. 사진 리스트를 ul, li 태그 또는 div 태그로 나열한다. (굳이 ul, li 태그 사용하지 않아도 된다.) 4. 사진 리스트는 스크롤 내릴 수 있도록 6~9개 정도 만든다. 5. 블로그 하단의 반응형 웹 적용한 캡쳐화면을 참고해서 GalaxyS5, 아이폰 5/SE, 아이폰 6/7/8, 아이폰 6/7/8 plus 에서 반응형 웹을 적용해본다. 6. 네비게이션 바를 만들어본다. 7. 네비게이션 바 안에 프로필 사진을 넣을수 있도록 한다. (flexbox 사용하기, 네비게이션 오른쪽에 정..

* 프로그램 에러 (error) 프로그램 에러란 말 그대로 프로그램을 실행하는 도중에 발생되는 오류를 의미한다. 에러가 발생하는 이유는 수십만가지다. 크게 문법에러와 논리에러가 있다. 문법에러는 코드를 작성하면서 자바스크립트 문법에 맞게 작성하지 않았거나, 오타가 난 경우이다. 논리에러는 문법에는 전혀 이상이 없고, 콘솔창에도 에러가 뜨지 않지만 논리적인 절차의 오류로 인하여 프로그램이 정상적으로 동작하지 않는 경우이다. * 에러를 처리하는 이유 (디버깅 목적, 신뢰성 있는 코드, 유지보수 & 디버깅) 에러가 발생하면 스크립트는 동작을 멈추고 (프로그램이 중단되고), 콘솔창에 에러가 출력된다. 프로그램이 실행되다가 도중에 멈추면 위험한 경우가 있다. 예를 들어 자율주행 차량이 스스로 운전하다가 프로그램 ..

* 비동기 (asynchronous)의 개념 프로그램이 순차적으로 실행되다가 비동기 코드를 만나면 해당 코드는 나중에 실행하라고 등록만 해놓고 다음 부분을 먼저 실행하는 것을 비동기라고 한다. 회사에서 업무를 처리하다가 시간이 오래 걸리는 작업은 후임에게 맞겨놓고 자기는 그 다음 일을 처리한 다음 후임이 해당 작업을 끝내면 보고 받는 식이다. * 비동기 (asynchronous)를 사용하는 이유와 활용 비동기의 대표적인 예는 아래와 같이 서버에서 데이터를 가져오는 등의 시간이 오래 걸리는 작업이다. const API_URL = 'http://makeup-api.herokuapp.com/api/v1/products.json?brand=maybelline' fetch(API_URL) .then(functio..

참고자료 DOM | PoiemaWeb 브라우저는 웹 문서(HTML, XML, SVG)를 로드한 후, 파싱하여 DOM(문서 객체 모델. Document Object Model)을 생성한다. 파일로 만들어져 있는 웹 문서를 브라우저에 렌더링하기 위해서는 웹 문서를 브라우저 poiemaweb.com * DOM 의 개념 브라우저의 DOM 은 Document Object Model 의 약자이다. 번역하면 문서 객체 모델이다. 브라우저는 렌더링 엔진을 사용하여 HTML 문서를 읽어들이고(로드하고) 해석(파싱)한다. 그런 다음 HTML 문서를 객체화(DOM)하고, DOM 트리로 만든 다음 웹화면에 렌더링한다. (웹화면에 그린다.) * DOM 출력해보기 브라우저에 의하여 생성된 DOM 은 자바스크립트가 자신을 제어할 ..

* 배열의 개념 배열은 서로 관련된 데이터끼리 그룹으로 묶어 놓은 변수이다. 예를 들어 소나타, 카니발, 람보르기니 등과 같은 여러 종류의 자동차를 하나로 묶어서 자동차라는 배열로 관리할 수 있다. 배열은 데이터베이스에서는 컬렉션(collection)이라고 부르기도 한다. * 배열을 사용하는 이유 (데이터 그룹핑) const fruit1 = "apple" const fruit2 = "banana" const fruit3 = "orange" const fruit4 = "watermelon" const fruit5 = "strawberry" 배열을 사용하지 않으면 변수를 여러개 사용해야 한다. const fruits = ["apple", "banana", "orange", "watermelon", "stra..

객체 참고문서 JavaScript 객체 기본 - Web 개발 학습하기 | MDN 이 글에서는 JavaScript 객체와 관련된 기본적인 문법을 살펴보고 이전 코스에서 학습해서 이미 알고 있는 JavaScript 의 특징들과 우리가 이미 사용하고 있는 기능들이 이미 객체와 관련되어 있다는 developer.mozilla.org * 객체를 사용하는 이유 객체를 사용함으로써 데이터가 어떤 역할을 하는지 알 수 있으며, 다양한 타입의 데이터를 함께 그룹으로 묶을수 있다. * 객체의 구조 const obj = { key1: value1, key2: value2, key3: value3, } 객체는 콜론(:)을 기준으로 왼쪽에는 키(또는 프로퍼티) 오른쪽에는 값으로 구성되어 있다. 각각의 키-값 쌍은 콤마(,)로 ..

함수 참고문서 1 함수 - JavaScript | MDN 보통 함수란 자신의 외부(재귀 함수의 경우 스스로) 코드가 '호출'할 수 있는 하위 프로그램입니다. 프로그램과 마찬가지로, 함수 역시 명령문의 시퀀스로 구성된 함수 본문을 가집니다. 함수에 developer.mozilla.org * 함수의 개념 함수는 특정 기능을 수행하는 코드 블럭이다. 함수는 입력값을 가지거나, 출력값을 가질수 있다. 자바스크립트에서의 함수는 속성과 메서드를 가질수 있는 객체이다. function add(a, b){ return a + b } console.dir(add) 함수도 객체이므로 console 객체의 dir 메서드로 함수를 출력해보면 위와 같은 속성(프로퍼티)을 가진다. arguments, caller, length,..