웹응용개발_101 썸네일형 리스트형 플렉스박스 : 부모속성 Flexbox 속성 부모 속성 (flex container) display display는 플렉스 컨테이너를 정의합니다. 주어진 값에 따라 인라인 또는 블록. 모든 직계 자식에 대해 플렉스 컨텍스트를 활성화합니다. .container { display: flex; /* or inline-flex */ } CSS 열은 플렉스 컨테이너에 영향을 미치지 않습니다. flex-direction flex-direction은 주축을 설정하여 플렉스 아이템이 플렉스 컨테이너에 배치되는 방향을 정의합니다. Flexbox는 단일 방향 레이아웃 개념입니다. 플렉스 항목은 주로 가로 행 또는 세로 열에 배치되는 것으로 생각하십시오. .container { flex-direction: row | row-reverse | col.. 웹사이트 빠르게 만들기 Emmet 웹사이트 빠르게 만들기 Emmet HTML 빠른속도로 타이핑 하기 - HTML 빨리 만들기 - 생산력 향상 - 손목 건강 Emmet 코드를 빠르게 작성할수 있도록 도와주는 플러그인 EMMET의 전반적인 문법 1. HTML의 양식 - ! 입력후 탭키를 누르면 ! div div.class div#id .class #id 2. 네스팅 오퍼레이션 부모와 자식 형제들의 노드를 쉽게 작성할 수 있게 도와 준다. div > li > ul 이런식으로 하면 자동으로 아래와 같이 변환 된다. 형제노드를 만들고 싶다면 이런식으로 하면 자동으로 아래와 같이 변환 된다. 반복 자식노드에서 부모노드에 추가로 작성시 그룹 이것을 만들기위해 아래와 같이 입력한다. 태그안에 텍스트 넣기 자동으로 숫자를 할당하려면 아래와 같이 나온다... 웹개발을 위한 기본 Extension 11(Visual Studio Code) Visual Studio Code 설치 후 - VSCODE : 텍스트 에디팅 툴중에 하나로 타입스크립트 언어를 기반으로한 오픈소스 프로젝트 입니다. Visual Studio Code 웹개발을 위한 Extension Extensions 설치 1. Live Server HTML에서 CSS에 자동완성을 이용할수있다. 2. Material Theme 눈에 편안한 색 설정해보기 Set Color Theme 클릭하여 Material Theme Darker High Contrast (선택) 합니다. - 다른 색상들도 있으니 선택해보세요. 3. Material Icon Theme 기본적인 Icon 들을 생동감있게 해준다. 4. Prettier - Code Formatter 코드를 포맷팅 해주는 편안한 툴이다. 설치후 .. Teletype for Atom 사용하기-3 <참여자 편> 1. URL 실행 - 공유자로 부터 받은 URL 주소를 크롬브라우저 주소창 에서 실행 시킨다. - Atom 열기 클릭 ( Atom 에디터는 반드시 설치되어 있어야 한 다.) 2. Join a portal - Atom 에디터 우측 하단에서 join a portal 클릭 - 자동으로 portal 주소가 쓰여짐 - join 버튼 클릭 3. 완료 Teletype for Atom 사용하기-2 <공유자 편> 1. Atom 편집기 실행 - 공유할 소스 오픈 - 아래 "이곳을 클릭" 부분을 클릭한다. 2. 사이트 방문(teletpe.atom.io/login) - 인증 토큰을 생성하기 위해 사이트 방문한다. - 사이트 방문시 크롬 브라우저를 사용한다. - 자동으로 익스플로러창이 뜬경우 주소복사하여 크롬 이용한다. 3. Sign in - GitHub 가입시 입력한 메일주소와 패스워드를 입력한다. 4. Authorize atom 클릭 5. 생성된 토큰 복사 6. Atom 에디터에 복사 - 생성된 토큰을 아래와 같이 Atom 에디터 하단 복사한다. - 아래 Sign in 버튼을 클릭 한다. - 아래와 같이 창이 변경되며 - Share 를 오른쪽으로 밀면 URL 이 생성된다. - 아래 URL 을 복사하여 공동작업을 하려.. Teletype for Atom 사용하기-1 1. GitHub 가입 2. Atom 에서 Teletype 패키지 설치 작업 공간을 공유하고 코드를 실시간으로 함께 편집 합니다. 공동 작업을 시작하려면 Atom에서 Teletype을 열고 패키지를 설치하세요. 1. Atom 실행후 단축키(' Ctrl+, ') 이용하여 teletype package 검색 2. Install teletype Packages Atom 설치 Atom 에디터 설치하기Atom 사이트에서 쉽게 Download 버튼을 찾을 수 있습니다.각 OS에 맞는 버전을 다운로드 받고 설치하면 됩니다. (무료 버전) 1. Atom 확장팩 설치 -Atom만 설치 하면 사용하기 불편해서 확장팩(Package)을 설치 해야한다. ( 단축키 : ' Ctrl+, ') ATOM ->File -> Setting -> Install 아래 패키지 조회 후 설치 - emmet : HTML, CSS 태그 자동 완성 - atom-beautify : 소스 코드 정렬 - atom-html-preview : 별도 브라우져 없이 바로 확인 (Ctrl+Shift+H : 미리보기 기능 활성화/비활성화) 2. 유용한 package -atom 설치후 기본 package 설치 1. atom-bea.. 이전 1 다음
