식초의 지식보관소

Hello World 출력 console.log('Hello World'); node.js 설치하기! >여기서 js 파일 실행 가능 html 파일 연결하기 > js 파일 연결해서 실행 가능> 태그 안에 개발자 모드(ctrl+ shift + I) > console 탭 들어가면 Hello World 확인 가능 = node.js와 웹 모두 js에 대한 API가 있다(공통) 개발툴 활용하기 console 탭에서도 js바로 실행할 수 있다 source 탭 = 디버깅할 때 유용 > break point를 건다 자바스크립트 공식사이트는? 이크마 http://ecma-international.org/ Welcome to Ecma International Welcome Ecma International is an ind..

1. 왜 프로젝트로 공부해나가야 하는가? -좋은 기회가 있을 때 제출할 자료가 생긴다 -문제 해결 능력 생긴다(구현, 문제, 해결 연습) : 면접 때 용이 2. 포트폴리오를 어떻게 만들어 나면 좋은가? -시장 조사 > 가고 싶은 분야 선정 > 필요한 기술 -정적인 반응형 웹사이트 with HTML+CSS -동적인 웹사이트, 웹게임 with JS -백엔드 구축 with node.js -동일한 프로젝트 구현 with 프레임워크, 라이브러리(React) 3. 포트폴리오에 추가할 프로젝트는 어떤것? -히든 카드 프로젝트 -가고 싶은곳의 주요 기술/스텍을 1~2개에 초점 -독창적, 창의적인 아이디어 -자주 쓰는 앱들의 주요기능 카피 -ex. 카카오톡(사진, 동영상, 텍스트 전송), 페이스북(사진편집), 날씨 어플..

모바일 퍼스트 힌트 : 레이아웃 구조 생각하기 -레이아웃을 최소한으로 바꿔서 재배치 하는 것이 좋다 -너무 많은 미디어 쿼리로 작성하면 : 개발 힘듬, 유지 보수 힘듬, 사용자도 놀람 -2가지 레이아웃 만들 예정 Wireframe 만들기 -전반적인 구조 박스 단위로 나누어 그려 보는 것 -레이블링 : 각각의 큰 박스, 작은 박스, 아이템의 이름 정하기 영상 1. HTML 마크업 하기 -준비물 : MDN, Font Awesome, google fonts, color tool https://material.io/resources/color/#!/?view.left=0&view.right=0 Color Tool - Material Design Create and share color palettes for y..

방법 영상을 보고 감을 잡는다 > 힌트를 써놓는다 > 혼자 만들어 본다 > 해결 못한 부분 영상 보고 해결한다 영상 드림 코딩 : 반응형 헤더편 힌트 웹사이트 레이아웃 2가지 1. 넓은 너비 일 때 -네비 바 : 박스 3가지 (로고, 메뉴, 아이콘)=플랙스 박스, 양쪽 사이드&스페이스 골고루 =space-btween 2. 좁은 너비 일 때 -네비 바 : 미디어 쿼리 이용해서 박스 재배치, 박스 3가지 (로고, 메뉴, 아이콘), 플랙스박스 정렬=column 혼자 만들기 영상 보며 만들기 css 파일 연결하기 ~태그 1. HTML 구조 만들기 ~가장 큰 박스 만들기 : 시멘틱 태그 태그 : nav.navbar 탭 ~중간 3 박스 만들기 : .navbar__logo 탭, .navbar__menu 탭, .nav..

Emmet -자동완성 ! + tab : HTML 양식 작성 div + tab : div 태그 작성 div.클래스 이름 = .클래스 이름 + tab div#아이디 이름 = #아이디이름+ tab div > ul > li +tab : 자손 태그 div > ul + li +tab :형제 태그 ul > li*5 +tab : 5번 반복 div > ul > li ^ ol :li의 부모인 ul의 형제 노드에 태그 div >(header>ul>li*2) +footer>p +tab : 빠르게 그룹화 p{hello} +tab = hello : 빠르게 텍스트 작성 p.class${item $}*5 : 자동 번호 넣기 p>lorem : 더미용 텍스트 생성 P>lorem4 : 4개의 단어만 사용

비주얼 스튜디오 간단한 text editor 툴 왼쪽 3번째 아이콘 : source control >깃이랑 연결, 버전 컨트롤 왼쪽 4번째 아이콘 : 디버거 > 코드 디버깅할때 왼쪽 5번째 아이콘 : 다양한 익스텐션 설치 셋팅 > 키보드 숏컷 확인 > 암기 다 안해도 커맨드 팔레트 사용 : ctrl +shift +p > 요약자만 검색해도 가능 cu(check for update) IDE 익스텐션 1. Material Theme : 배경화면 색 테마 2. Material Icon Theme : 아이콘 생동감 있음 3. Prettier : 코드를 포매팅 >설정창 이동 : ctrl +, >여러가지 설정을 함 4. Bracket Pair Colorizer : 괄호에 색 테마 5. Indent Rainbow : ..

플렉스 박스 레이아웃 이란? -그리드 레이아웃을 기본으로 한다 -플렉스 박스를 원하는 위치에 배치한다 (미디어 쿼리보다 쉬움) -여유 공간에 따라 너비, 높이, 위치 자유롭게 변형 가능하다 1. 플렉스 컨테이너 : 웹요소 전부 묶어준다. 2. 플렉스 항목 : 담기는 웹 요소, 1~6 모두 3. 주축 : 배치하는 기본 방향, 왼>오, 시작점 | 끝점 4. 교차축 : 주축과 교차되는 방향, 위>아래, 시작점 | 끝점 display 속성 : 플렉스 컨테이너 지정 ~묶어주려는 요소들의 부모 요소를 > 플렉스 컨테이너로 만듦 ~display 속성을 이용해 플렉스 박스 형태를 지정한다 ~flex 속성값 : 박스 레벨 요소 ~inline-flex 속성값 : 인라인 레벨 요소 {display : flex; } disp..

미디어 쿼리란? -사이트에 접속하는 장치에 따라 특정한 css스타일 사용하게 한다 -접속하는 기기(PC, 태블릿, 스마트폰)의 화면 크기에 따라 레이아웃이 달라진다 미디어 쿼리 구문 @media |not |only| screen |and (min-width: 200px)| { } 연산자 and : 조건을 추가한다 only : 미디어 쿼리를 지원하는 웹 브라우저에서만 조건 인식 not : 다음에 나오는 미디어 유형 제외 , : 동일한 스타일 유형을 사용할 때 쉼표 사용 미디어 유형 all : 모든 미디어 print : 인쇄 장치 screen : 컴퓨터, 스마트폰 tv aural : 화면을 읽어 소리로 출력 braille : 점자 tty embossed 미디어 쿼리 조건 1. 웹 문서의 가로 너비, 세로 높..

반응형 웹 디자인 -스마트폰, 태블릿, 스마트TV 등 브라우저 환경이 다양해짐 > 다양한 크기에 맞게 웹사이트 표시하는 방법 -화면 크기에 반응해 화면 요소들을 자동으로 바꾸어 사이트를 구현한다 ~장점 : 사이트 1개만 만들면 모든 기기에서 사용가능, 가로모드 가능, 사이트 유지 관리 편함 뷰포트 -뷰포트 = 스마트폰 화면에서 실제 내용이 표시되는 영역 -뷰포트 사용하면 접속한 기기 화면에 맞추어 확대, 축소해 표시하는 것이다 -pc화면과 모바일 화면의 픽셀 표현 방법이 다르다 -스마트폰 브라우저 : 웹키트 엔진을 기반으로 한다, 뷰포트 너비 980px 뷰포트 지정하기 ~가장 많이 사용하는 형태 content 속성 width : 뷰포트 너비 ~속성값: device-width | 크기 height : 뷰포..

연결 선택자 -선택자와 선택자를 연결해 적용 대상을 한정시킨다 하위 선택자(=자손 선택자) : 지정한 모든 하위 요소 -부모 요소에 포함된 하위 요소 모두에 스타일 적용 -자식, 손자까지 모두 적용 대상이 있으면 표시됨 -빈 칸 #container ul { } 자식 선택자 : 자식 요소만 -바로 아래 요소에만 스타일 적용 - > 부등호 #container > ul { } 인접 형제 선택자 : 가장 가까운 형제 요소 -먼저 나오는 것=형 요소, 나중에 나오는 것=동생 요소 -같은 레벨이면서 첫번째 요소에 스타일 적용 - + 더하기 h1 + ul { } 형제 선택자 : 형제 요소 -모든 형제 요소 - ~ 틸드 속성 선택자 -태그 안에 사용하는 속성들의 값에 따라 스타일 지정 -활용도 높다 [속성] 선택자 :..