평행우주 : world 1

와이어프레임(Wireframe) 웹 또는 앱을 개발할 때 레이아웃의 뼈대를 그리는 단계로 가장 큰 목적은 화면 영역 구분 말 그대로 "와이어로 설계된 모양"을 의미하며, 단순한 선이나, 도형으로 웹이나 앱의 인터페이스를 시각적으로 묘사한 것 전환 효과나, 애니메이션, 사용자 테스트같은 스타일링 요소나 UX(사용자 경험, User Experience)는 제외 따라서 인터페이스를 그림으로 표현하는 형식 대신, 각 영역에서 사용할 주요 태그를 메모하는 형식으로 와이어프레임을 짜는 것이 좋음 목업(Mock-up) 실제 제품이 작동하는 모습과 동일하게 HTML 문서를 작성하는 것 예를 들어 트위터 클론코딩에 앞서, 트윗 작성자, 트윗 내용, 작성한 날짜 등을 HTML 문서 내에 하드코딩하는 방식 레이아웃 리셋 H..

셀렉터 h1 { } div { } 전체 셀렉터 * { } Tag 셀렉터 section, h1 { } ID 셀렉터 #only { } class 셀렉터 .widget { } .center { } attribute 셀렉터 (암기할 필요는 없습니다) a[href] { } p[id="only"] { } p[class~="out"] { } p[class|="out"] { } section[id^="sect"] { } div[class$="2"] { } div[class*="w"] { } 후손 셀렉터 header h1 {} 자식 셀렉터 (후손 셀렉터와의 차이를 반드시 알고 있어야 합니다) header > p { } 인접 형제 셀렉터 section + p { } 형제 셀렉터 section ~ p { } 가상 클래스 a..

이후 과정 반복 * 항상 푸시는 자신의 레포에 풀을 당길 때는 페어의 레포에서 *git master 빠져나오는 법 : rm -rf .git

Github workflow overview 내 컴퓨터에서 생성한 디렉토리를 init 명령어를 통해 Git의 관리 하에 들어가게 만들어 줍니다. 내 컴퓨터의 Git 디렉토리를 Remote Repository와 연결시켜 줍니다. pair의 변경 사항과 나의 변경 사항을 Remote Repository를 통해서 공유합니다. 지금부터 하나씩 알아봅시다! git int 기존 디렉토리를 git repository로 변환하거나 새로운 repository를 초기화 하는데 사용 내 컴퓨터에서 내가 직접 만든 디렉토리를 Git의 관리 하에 들어가게 만들어 주는 명령어 기존 프로젝트를 Git Repository로 변환하거나 새로운 Repository를 초기화하는 데에 사용 이를 통해 Local Repository가 생성된..

Github workflow overview Remote에 있는 다른 Repository에서 Fork를 통해 Remote에 있는 내 Repository로 전송 코드를 수정하기 위해 내 컴퓨터로 가져오는 작업이 또 필요함. 내 컴퓨터에서 작업을 하기 위해 clone 진행 내 컴퓨터의 작업 공간 (work space) 에서 작업에 들어간 파일들을 git의 관리 하에 있는 상태로 올려줄 수 있음. 이 영역을 staging area라고 함. staging area에 들어오지 않은 파일은 unstaged 혹은 untracked file이라고 말하며, staging area에 있는 파일들은 staged 된 파일 staging area에 들어온 파일들은 commit이 가능. commit을 하고 나면 내 remote ..

Git이란? 개발자의 코드를 효율적으로 관리하기 위해서 개발된 ‘분산형 버전 관리 시스템’ 스냅샷 : 특정 시점에 생성된 백업 복사본 commit : 스냅샷을 만들어 주는 작업 소스 코드가 변경된 이력을 쉽게 확인할 수 있고, 특정 시점에 저장된 버전과 비교하거나 특정 시점으로 되돌아갈 수 있음 github이란? Github은 Git Repository를 관리할 수 있는 클라우드 기반 서비스 Git으로 버전을 관리하는 폴더에 대해서 Github을 통해 여러 사람들이 공유 및 접근 가능 한 마디로 개발자들의 SNS Github에서 Code Review 등을 통해 협업이 가능하고, 수많은 오픈 소스 프로젝트들이 GitHub로부터 호스팅됨 Github은 내 컴퓨터에서 Git으로 관리하는 프로젝트를 올려둘 수 ..

CSS Dinner : CSS selectors 관련 학습 https://flukeout.github.io/ CSS Diner A fun game to help you learn and practice CSS selectors. flukeout.github.io 1분코딩 : CSS Flex 익혀보기 https://studiomeal.com/archives/197 이번에야말로 CSS Flex를 익혀보자 이 튜토리얼은 “차세대 CSS 레이아웃” 시리즈의 첫번째 포스트입니다. 이번에야말로 CSS Flex를 익혀보자 이번에야말로 CSS Grid를 익혀보자 벌써부터 스크롤의 압박이 느껴지고,‘좀 편안하게 누 studiomeal.com GRID GARDEN : CSS grid layout 관련 학습 https://..

자바스크립트를 나의 첫 언어로 배우는 중인데, 접하는 모든 교육 자료에서 JS가 너무 flexible하기 때문에 위험성이 높다고 한다. 분명 이를 해결할 방법이 있을 거 같아 검색하다가 알게된 방법을 기록한다. 어쨌든 타입스크립트를 꼭 배워야겠다. Vanila JS 엄격하게 사용하는 방법 JS는 타 언어에 비해 매우 flexible한 특징을 가지고 있다 덕분에 배우기는 쉬워도, 안정성이 떨어지게 되고, 이를 보완하기 위해 TS가 나왔다. 나는 아직 vanila JS만을 익히고 있는 초보여서 간단한 선언으로 보다 엄격하게 사용하는 법을 사용하려고 한다. JS 코드 선두 첫 줄에 넣으면 된다 'use strict';