Coding162 Layout 05 Layout 05 기본적인 레이아웃 구성 요소 float을 이용한 레이아웃 float 요소를 이용해 세로로만 나열이 아닌 가로로도 배치하여 레이아웃을 구성 * { margin: 0; height: 0; } #wrap { width: 100%; margin: 0 auto; background-color: #000; } #header { width: 100%; height: 100px; background-color: #EEEBE9; } #nav { width: 100%; height: 100px; background-color: #B9AAA5; } #main { width: 100%; height: 780px; background-color: #886F65; } #footer { width: 100%; h.. 2022. 7. 29. Layout 04 Layout 04 이번 레이아웃은 전체 영역이 들어간 구조입니다. 실제 사이트에서 이런 구조를 많이 사용하며, 컨테이너를 만들어서 가운데 영역을 설정합니다. container을 이용한 레이아웃 container 요소를 이용해 레이아웃을 구성 (반응형 포함) * { margin: 0; padding: 0; } #header { height: 100px; background-color: #e0f2f1; } #nav { height: 300px; background-color: #80cbc4; } #section { height: 580px; background-color: #26a694; } #footer { height: 100px; background-color: #00897b; } .container .. 2022. 7. 29. Layout 03 Layout 03 기본적인 레이아웃 구성 요소 float을 이용한 레이아웃 float 요소를 이용해 세로로만 나열이 아닌 가로로도 배치하여 레이아웃을 구성 * { margin: 0; padding: 0; } body { background-color: #e1f5fe; } #wrap { width: 1200px; margin: 0 auto; } #header { width: 1200px; height: 100px; background-color: #b3e5fc; } #nav { width: 1200px; height: 100px; background-color: #81d4fa; } #main { width: 1200px; } #aside { width: 300px; height: 780px; backgro.. 2022. 7. 29. Layout 02 Layout 02 기본적인 레이아웃 구성 요소 float을 이용한 레이아웃 float 요소를 이용해 세로로만 나열이 아닌 가로로도 배치하여 레이아웃을 구성 * { margin: 0; padding: 0; } body { background-color: #e8f5e9; } #wrap { width: 1200px; margin: 0 auto; } #header { width: 1200px; height: 100px; background-color: #c8e6c9; } #nav { width: 1200px; height: 100px; background-color: #a5d6a7; } #main { width: 1200px; overflow: hidden; } #aside { width: 300px; heig.. 2022. 7. 29. Layout 01 Layout 01 기본적인 레이아웃 구성 요소 float을 이용한 레이아웃 float 요소를 이용해 세로로만 나열이 아닌 가로로도 배치하여 레이아웃을 구성 * { margin: 0; padding: 0; } body { background-color: #fff3e0; } #wrap { width: 1200px; margin: 0 auto; } #header { width: 1200px; height: 100px; background-color: #ffe0b2; } #nav { width: 1200px; height: 100px; background-color: #ffcc80; } #aside { width: 400px; height: 780px; background-color: #ffb74d; float.. 2022. 7. 29. 지역 변수 / 전역 변수 지역 변수 / 전역 변수 변수는 함수 블록{}을 기준으로써 선언 위치에 따라 전역 및 지역 변수로 나뉜다. ps.전역 변수는 함수 블록{} 밖이나 안에서 자유롭게 사용 가능하지만, 지역 변수는 함수 블록{} 내에서만 가능 지역 변수와 전역 변수 선언 위치 지역 변수 전역 변수 function 함수() { var 변수; } var 변수; function 함수() { } 함수 레벨 스코프 var는 함수 블록{}에서만 지역 변수가 존재하며 블록{}이나 제어문 블록{}에서는 지역변수가 존재하지 않는다. ES6에서는 추가된 let과 const는 블록{}이나 제어문 블록{}에서도 지역 변수를 선언 가능 var num = 10; { var num = 20; // num은 전역 변수 console.log(num); /.. 2022. 7. 28. 함수 함수 함수는 프로그램에서 반복적으로 사용되는 기능을 만들어 내기 위한 코드들의 집합 분류 종류 설명 사용자 정의 함수 1. 선언적 함수 2. 익명 함수 프로그램에서 필요한 기능을 사용자가 직접 정의해서 사용하는 함수 내장 함수 1. 안코딩, 디코딩 함수 2. 숫자 판별 함수 3. 유 무한 값 판별 함수 4. 숫자변환 함수 5. 문자 변환 함수 6. 자바스크립트 코드 변경 함수 프로그램 개발에서 자주 사용되는 기능들을 자바스크립트 내부적으로 제공해주는 함수입니다. 선언적 함수 선언적 함수는 함수를 호출할 때 함수의 앞 또는 뒤에 호출 가능 function func(){ document.write("함수가 실행되었습니다.1"); } func(); 결과보기 함수가 실행되었습니다.1 익명 함수 익명 함수는 변수.. 2022. 7. 26. Data Type 데이터 타입 데이터 타입은 변수에 저장되는 데이터 타입 유형 Primitive(원시) 데이터 타입과 Object(객체) 데이터 타입으로 나뉜다. Primitive(원시) 데이터 타입은 number, string, boolean, null 등이 있으며, Object(객체) 데이터 타입에는 function, object, arrary 등이 있다. number(숫자) 데이터 정수, 소수점 , 지수를 표한 가능 var num = 10; var num2 = 10.5; var num3 = 1e+2; console.log(num1); // 10 console.log(num2); // 10.5 console.log(num2); // 100, 1e+2는 1*10의 2승을 의미 string(문자) 데이터 ''또는""로 표.. 2022. 7. 25. 조건문 See the Pen Untitled by KDB6 (@kdb6) on CodePen. prompt prompt()는 숫자로 입려간 데이터를 문자 데이터로 처리하기에 '+'연산자를 사용할 경우 더하기 연산이 아닌 연결 연산이 된다. 이 문제를 해결하기 위해서는 Number 사용 See the Pen if문 2 by KDB6 (@kdb6) on CodePen. switch switch(값)의 값과 case의 값들은 하나씩 비교해 일치하는 case를 실행시켜준다. switch문은 if문과 다르게 특정 조건에 만족 했을 때 블록{}을 스스로 빠져나가지 못한다. 이러기에 break명령어를 주어 switch case문의 블록{}을 빠져 나가도록 한다. See the Pen if문 3 by KDB6 (@kdb6) .. 2022. 7. 25. 반복문 반복문 반복문은 프로그램에에서 필요한 결과 값을 도출하기 위해 실행문의 순서를 반복적으로 실행시키는 문법을 말합니다. 반복문에는 while문, do while문, for문이 있으며, for문을 가장 많이 사용합니다. for (초기 값 ; 조건식; 증감값) { 실행문 } while문 for (초기 값 ; 조건식; 증감값) { 실행문 } do while문 for (초기 값 ; 조건식; 증감값) { 실행문 } for문 for (초기 값 ; 조건식; 증감값) { 실행문 } 0부터 99까지 출력하기 //0부터 99까지 출력하기 for(let i=0; i 2022. 7. 25. 연산자 연산자 프로그램에 필요한 수식을 만들 때 필요한 것이 연산자입니다. 자바스크립트에서 연산자에는 산술연산자, 대입연산자, 비교연산자, 논리연산자 등이 있습니다. 산술 연산자 산술 연산자는 사칙연산을 다루는 기본적이면서도 가장 많이 사용되는 연산자다. 산술 연산자는 모두 두 개의 피연산자를 가지는 이항 연산자이며, 피연산자들의 결합 방향은 왼쪽에서 오른쪽으로 이루어진다. 산술 연산자 종류 속성 설명 + 더하기 연산을 할 때 사용합니다. 문자와 문자, 문자와 변수 등을 연결할 때 사용합니다. - 빼기 연산을 할 때 사용합니다. * 곱하기 연산을 사용할 때 사용합니다. / 몫을 구 할 때 사용합니다. % 나머지를 구할 때 사용합니다. ++ 1씩 증가시킬 때 사용합니다. -- 1씩 감소시킬 때 사용합니다. '+'.. 2022. 7. 20. 기본 규칙 기본 규칙 자바스크립트를 다루기 위해서는 기초적인 특징과 기본 문법이 있다. 가장 기본이기에 이부분을 숙지하고 자바스크립트를 공부 자바스크립트란? JavaScript는 웹 페이지에서 복잡한 기능을 구현할 수 있도록 하는 스크립팅 언어 또는 프로그래밍 언어입니다. HTML은 정적인 레이아웃을 표현한다면, 자바스크립트는 동적인 기능을 표현합니다. 자바스크립트는 1995년 넷스케이프의 커뮤니케이션 브렌던 마이크가 개발 Netscape Navigsator 2.0 에 구현되었습니다. 1996년에는 마이크로소프트사의 자바스크립트 기본 규칙 1. 세미콜론(;) 하나의 실행문이 끝나면 마지막에 세미콜로(;)을 붙여준다. 세미콜론(;)을 붙여 주지 않아도 상관은 없습니다. var num = 5; document.writ.. 2022. 7. 20. 이전 1 ··· 3 4 5 6 다음
