1. Flexbox Layout Flexible Layout 아이템이 배열될 방향인 주축을 정할 수 있다. justify-content: main axis align-item: cross axis 암기팁) 저주콘서트, 크로스-라인 연습) https://flexboxfroggy.com/#ko Flexbox Froggy A game for learning CSS flexbox flexboxfroggy.com 2. Box model Content - The content of the box, where text and images appear / 컨텐츠 영역, 글과 이미지 등 Padding - Clears an area around the content. The padding is transparent / b..
CSS3 Syntax | PoiemaWeb CSS(Cascading Style Sheets)는 HTML이나 XML과 같은 구조화 된 문서(Document)를 화면, 종이 등에 어떻게 렌더링할 것인지를 정의하기 위한 언어이다. 즉, CSS는 HTML의 각 요소(Element)의 style(design, layout etc)을 poiemaweb.com [CSS] 1. CSS 기본 문법 Cascading Style Sheets: 구조화된 문서를 어떻게 렌더링할 것인지를 정의 HTML5에서 HTML은 정보와 구조화, CSS는 styling의 정의 로 역할의 명확한 구분이 이루어졌다 2. 셀렉터 style을 적용하려는 html요소를 셀렉터를 통해 특정함 3. CSS 프로퍼티 값의 단위 각 프로퍼티에 따라 사용할 ..
웹 프로그래밍 튜토리얼 | PoiemaWeb Front-end Development Tutorial poiemaweb.com [HTML5] 1. HTML5 기본 문법 2014년 10월 28일 확정된 차세대 웹 표준. html5 문서는 로 시작하여야 함 대표적인 HTML Editor: VSC, WebStorm, Atom, Brackets, Sublime text html document는 element들의 집합으로 이루어짐 좋은 코드->읽기 쉬운 코드->indent 잘 하자 Attribute(속성): 요소의 성질, 특징을 정의하는 명세 -ex) src: attribute name, html.png: attribute value 2. 시맨틱 요소와 검색 엔진 시맨틱 태그: 브라우저, 검색엔진, 개발자에게 콘..
복습 을 적는 이유->검색엔진이 잘 알아볼 수 있게(html5에서만 사용) ul: unordered list ol: ordered list li: list tiem 1. CSS(Cascading Style Sheet) cascading? 상속 빨강 그대로 상속 파랑색으로 새로 정의 파랑 트리구조 우선순위 1. 사용자 스타일(컴퓨터 사용자) ex) Windows의 고대비 설정 2. 제작자 스타일(개발자) 3. 브라우저 기본 스타일 동일 대분류에 있을 경우, !important>인라인 스타일>id 스타일>클래스 스타일>타입 스타일 Selector를 통해 지정이 가능하다 인라인 스타일-> Selector id 선택자-> #아이디 { 속성 : 값, ... } 클래스 선택자-> .클래스 { 속성: 값, ... }..
복습 커밋 메시지 컨벤션을 지키는 것이 정말 중요하다. (협업 및 나를 위해->추후 이해하기 편하도록) 1. World Wide Web 세계에서 처음 나온 사이트 info.cern.ch/hypertext/WWW/TheProject.html 2. Hyper Text Markup Language p는 '문단' 은 줄바꿈 Tag와 Attribute asdf ->html5에서 사용 검색엔진은 head 부터 본다 하이라이트 태그는 h1~h6 굵게 볼드 형광펜
Weekly I Learned 3 GIT? 컴퓨터 파일의 변경사항을 추적하고 여러 명의 사용자들 간에 해당 파일들의 작업을 조율하기 위한 스냅샷 스트림 GIT branch git branch test -> test라는 branch 생성 git switch test, git checkout test -> test branch로 옮기기 git branch -> 현재 branch 상태를 보여준다. *가 붙어있는 branch가 현재 있는 branch이다 GIT merge git merge -> 새 branch와 메인 branch를 병합한다 conflict -> 충돌상황, 둘 중 하나를 골라야 함 git status ->현재 내 git 상황 보기 git add . ->staging area에 파일 추가 git c..
Weekly I Learned 2 1. git의 명령어 add, commit, push는 각각 어떤 역할을 하는가? add: working directory에 있는 파일을 staging area에 올림 commit: working directory 의 모습을(staging area에 올린 파일만 포함) 하나의 버전으로 남기는 것(like 스냅샷) push: local repository에서 변경된 것들을 원격 repository(예: github)에 반영시키는 것 git fetch: 원격 repository에서 최신 메타데이터를 받아와 변경사항이 있는지 확인 git pull: 원격 repository에서 변경된 사항을 확인하고, 최신 데이터를 local repository로 가져온다 ->차이점: pull..
