BoostCource/Front-end 26

[FE] 03. JavaScript 배열, 객체

3. 웹 애플리케이션 개발 - JavaScript * JavaScript 배열 1. new Array() 문으로 선언할 수도 있지만 잘 사용하지 않는다. 보통은 간단히 var a = [] 를 사용한다. var a = []; //배열 안에는 모든 타입이 다 들어갈 수 있다. 함수도 배열 안에 배열도, 배열 안에 객체도 들어갈 수 있음. var a = [1,2,3,"hello", null, true, []]; 2. 배열의 length 속성으로 길이를 알 수 있다. (배열의 index는 0부터 시작한다.) 3. 배열의 배열(중첩)은 [[{}]] 이와 같이 표현한다. 4. 배열에 원소 추가는 index번호와 함께 추가한다. var a = [4]; a[1000] = 3; console.log(a.length); ..

[FE] 02. WEB UI 개발

2. DB 연결 웹 애플리케이션 - WEB UI * window 객체 (alert, setTimeout 등...) window.setTimeout() setTimeout() //window는 전역객체라서 생략 가능하다. function run() { setTimeout(function() { var msg = "hello codesquad"; console.log(msg); //이 메시지는 즉시 실행되지 않습니다. }, 1000); } run(); 1000(1초)이라고 설정해 둔 시간이 지나면 메시지(함수 실행)를 띄운다. setTimeout 실행 순서: setTimeout의 실행은 비동기(asynchronous)로 실행되어, 동기적인 다른 실행이 끝나야 실행된다. setTimeout 안의 함수(콜백함수..

[FE] 02. JavaScript 기초

* JavaScript 변수, 연산자 타입 - 자바스크립트의 버전 자바스크립트 버전은 ECMAScript(줄여서ES)의 버전에 따라서 결정된다. 이를 자바스크립트 실행 엔진이 한 라인씩 반영, ES5, ES6(ES2015) … 2018년을 중심으로 ES6를 지원하는 브라우저가 많기 떄문에 몇 년간 ES6 문법이 표준이다. ES6는 ES5문법을 포함하고 있어 하위 호환성 문제가 없다. (but, feature별로 지원하지 않는 브라우저가 있을 수 있으므로 조심) - 변수 변수는 var / let, const(ES6에 있는 기능)로 선언한다. 선언에 따라 scope라는 변수의 유효범위가 달라진다. ex) var a = "boostcourse"; - 연산자 연산자 우선순위를 표현하기 위해서는 ()를 사용한다...

[FE] 01. HTML & CSS (2)

* float 기반 샘플 화면 레이아웃 [참고] http://flexboxfroggy.com/#ko 기본 배치를 한 후 필요한 부분에 float를 사용해서 좌, 우로 배치하는 것이 일반적이다. clear: left, clear: both는 float를 인식해서 겹치지 않게 해준다. float인 경우에는 자식으로 생각하지 않기 때문에 wrap에 설정한 배경색이 적용되지 않았다. 이 경우에는 wrap안에 overflow 속성을 줘서 인식하게끔 할 수 있다. %로 주는 경우 고정 폭이 아닌 가변폭으로 적용되어 페이지 크기에 따라 반응한다. - HTML 타이틀 입니다. menu home name 반가워요! :-) crong jk honux pobi oh~ right footer입니다. - CSS li { lis..

[FE] 01. HTML & CSS (1)

* HTML Tag의 종류 [참고] https://www.w3schools.com/tags/default.asp 링크, 이미지, 목록, 제목 anchor, img, ul/li, p, div 등이 자주 사용된다. div: block 엘리먼트, 일반적인 영역(더미 영역)을 표현할 때 가장 많이 사용 ul, li: list를 나타낼 때 a href: 링크 추가 반갑습니다 여기 여러분들이 좋아하는 과일이 있어요. 사과 사과 메론 귤 * HTML layout Tag [참고] https://www.w3schools.com/tags/tag_header.asp 레이아웃: HTML 화면을 구성하는 기본적인 모습들 header: div와 같은 역할 section: 영역을 분리 nav: 네비게이션 (카테고리처럼 사용) fo..

[FE] 01. HTML 기본

HTML 정리 - HTML 구조 홍길동 웹 사이트 방문을 환영합니다. 웹 사이트의 콘텐츠 로 구성됨. html은 head, title, body로 구성되어있다.body안에 프로그램을 작성한다. 은 줄바꿈 옵션 &는 스페이스바 - HTML 태그 h1 글자 크기 확인입니다 h1 글자 크기 확인입니다 h1 글자 크기 확인입니다 h1 글자 크기 확인입니다 h1 글자 크기 확인입니다 h1 글자 크기 확인입니다 h 태그는 자동 줄 바꿈 기능을 제공하며 숫자가 작을 수록 큰 글자이다. 글이나 사진에 링크를 걸고싶다면 테그를 추가한다. 홍길동 웹사이트로 이동 //이렇게 설정할 경우 현재 창에서 링크가 열림 새로운 창에서 링크가 열리도록 하고싶다면 MBC 가기 표(table) 만들기 표 제목 HD1 HD1 1-1 1-2..