코딩Gabojago~164 레이아웃05 레이아웃05 이번 레이아웃은 레이아웃 03번이랑 유사합니다. 공부하실 때 레이아웃03번도 참고하면 도움이 될 것입니다. float을 이용한 레이아웃 float이란, 페이지에서 이미지와 텍스트를 인라인으로 어우러지게 할 수 있는 기능입니다.(구버전) ※ float 속성을 적용하면 그 다음 요소에도 float가 적용되어 버그가 생길 수 있습니다. 이럴 때 사용할 수 있는 속성이 "clear" 입니다. 사용 방법 div태그는 block특성을 가지고 있기 때문에 세로로 나타납니다. 이를 가로로 정렬시켜주는 것이 float입니다. *{ margin: 0; padding: 0; } #wrap { width: 100%; } #header { height: 100px; background-color: #EEEBE9; .. 2022. 8. 3. 레이아웃04 레이아웃04 이번 레이아웃은 전체 영역이 들어간 구조입니다. 실제 사이트에서 이런 구조를 많이 사용하며, 컨테이너를 만들어서 가운데 영역을 설정합니다. 레이아웃04의 특징 레이아웃04는 처음 구조가 반응형에서도 다른 변화 없이 그대로 나타나기 때문에 float, flex, grid와 같은 속성을 이용하지 않아도 됩니다. *{ margin: 0; padding: 0; } #header { height: 100px; background-color: #E0F2F1; } #nav { height: 300px; background-color: #80CBC4; } #section { height: 580px; background-color: #26A69A; } #footer { height: 100px; backg.. 2022. 8. 3. 레이아웃03 레이아웃03 이번 레이아웃은 총 7개의 구조였다가 media 768px일 때 6개의 구조로 변화하는 구조입니다. 이때 없어지는 칸에 display: none; 을 써주어야 합니다. float을 이용한 레이아웃 float이란, 페이지에서 이미지와 텍스트를 인라인으로 어우러지게 할 수 있는 기능입니다.(구버전) ※ float 속성을 적용하면 그 다음 요소에도 float가 적용되어 버그가 생길 수 있습니다. 이럴 때 사용할 수 있는 속성이 "clear" 입니다. 사용 방법 div태그는 block특성을 가지고 있기 때문에 세로로 나타납니다. 이를 가로로 정렬시켜주는 것이 float입니다. * { margin: 0; padding: 0; } body { background-color: #E1F5FE; } #wra.. 2022. 8. 3. 레이아웃02 레이아웃02 이번 레이아웃은 가운데를 3분할한 구조입니다. 반응형으로 만들 때 바뀌는 구조를 주의해야 합니다. float을 이용한 레이아웃 float이란, 페이지에서 이미지와 텍스트를 인라인으로 어우러지게 할 수 있는 기능입니다.(구버전) ※ float 속성을 적용하면 그 다음 요소에도 float가 적용되어 버그가 생길 수 있습니다. 이럴 때 사용할 수 있는 속성이 "clear" 입니다. 사용 방법 div태그는 block특성을 가지고 있기 때문에 세로로 나타납니다. 이를 가로로 정렬시켜주는 것이 float입니다. * { margin: 0; padding: 0; } body { background-color: #E8F5E9; } #wrap { width: 1200px; margin: 0 auto; } #h.. 2022. 8. 3. 레이아웃01 레이아웃01 이번 레이아웃은 기본적인 구조로, 간단한 레이아웃 구조입니다. float을 이용한 레이아웃 float이란, 페이지에서 이미지와 텍스트를 인라인으로 어우러지게 할 수 있는 기능입니다.(구버전) ※ float 속성을 적용하면 그 다음 요소에도 float가 적용되어 버그가 생길 수 있습니다. 이럴 때 사용할 수 있는 속성이 "clear" 입니다. 사용 방법 div태그는 block특성을 가지고 있기 때문에 세로로 나타납니다. 이를 가로로 정렬시켜주는 것이 float입니다. * { margin: 0; padding: 0; } body { background-color: #fff3e0; } #wrap { width: 1200px; margin: 0 auto; } #header { width: 100%;.. 2022. 7. 29. 전역변수와 지역변수 전역변수와 지역 변수 변수는 함수 블록{}을 기준으로 변수의 선언 위치에 따라 '전역 변수'와 '지역 변수'로 나뉘어집니다. '전역 변수' : 함수 블록{} 밖이나 안에서 자유롭게 사용 가능 '지역 변수' : 함수 블록{} 내에서만 사용 가능 ▶ 전역 변수와 지역 변수 선언 위치 전역 변수 지역 변수 var 변수; function 함수 () { } function 함수 () { var 변수; } 예시 var kor = 90; function getScore(){ kor = 100; document.write(kor); } getScore(); document.write(kor); 결과 보기 함수 블록{}안에 있는 kor변수는 전역 변수입니다. ∴ getScore()함수를 호출하게 되면 kor 변수 값이 .. 2022. 7. 28. 함수(function) 함수 함수는 프로그램에서 반복적으로 사용되는 기능을 만들어 내기 위한 코드들의 집합으로 이해하면 됩니다. 01. 선언적 함수 선언적 함수는 function키워드로 함수를 만드는 선언적 방식입니다. function 함수 () { 실행문; } · 선언적 함수의 호출 '선언적 함수'는 함수를 호출할 때 함수의 앞 또는 뒤에서 호출 가능합니다. 변수나 함수를 선언하지 않고 호출하였을 때는 에러가 발생해야 하는 것이 맞지만, vas로 선언한 변수와 선언적 함수는 변수, 함수 선언 이전에 호출하여도 에러를 발생시키지 않습니다. 이것을 자바스크립트 성질을 '끌어올리기' 호이스팅(Hoisting)이라고 합니다. 02. 익명 함수 익명 함수는 변수에 함수 데이터를 저장하여 변수를 마치 함수처럼 사용 할 수 있도록 만들어.. 2022. 7. 26. 조건문 조건문 조건문은 특정 조건 만족 시(true인 경우)실행하는 명령의 집합이며, 종류로는 if와 switch가 있다. if문 if문은 조건식의 결과가 참(true)이면 주어진 실행문을 실행하고, 거짓(false)이면 아무것도 실행하지 않는 문장입니다. - if문의 형식 ① if (조건식) { 실행문; } - if문의 형식 ② if (조건식) { 실행문1; } else 실행문2; } - if문의 형식 ③ if (조건식1) { 실행문; } else if (조건식2) { 실행문2; } else { 실행문3; } - if문의 형식 ④ if문은 if문 안에 또 다른 if문을 중첩하여 사용할 수 있습니다. if (조건식1) { if (조건식2) { 실행문; } } switch문 switch문은 if~else문과 마찬.. 2022. 7. 26. 데이터 타입(Data Type) 데이터 타입(Data Type) 데이터 타입(Data Type)은 변수에 저장되는 데이터의 유형으로 원시(Primitive)데이터 타입과 객체(Object) 데이터 타입으로 나눌 수 있습니다. 원시 데이터 타입 : number, string, boolean, undefined, null, symbol 등 객체 데이터 타입 : function, object, array 등 number(숫자) 데이터 number 데이터는 정수, 소수점, 지수를 표현할 수 있습니다. var num1 = 10; //정수 var num2 = 10.5;//소수점 var num3 = le+2;//지수 string(문자) 데이터 string 데이터는 ''또는 ""으로 표현할 수 있습니다. 보통 문자 데이터는 작은따옴표로 많이 표현합니.. 2022. 7. 26. first project : "MY T" 2022. 7. 25. [CSS] 레이아웃(layout)에 대해 알아보자! 레이아웃(layout) CSS에서 "layout" 이란, 다양한 요소들들 적절한 위치에 배치하고 정렬할 수 있도록 하는 기능을 뜻합니다. 작성한 순서대로 입력되는 HTML만으로는 우리가 원하는 위치에 원하는 정보를 배치할 수 없기 때문에 CSS의 layout을 이용하는 것입니다. 레이아웃 종류 1. float 방법 float이란, 페이지에서 이미지와 텍스트를 인라인으로 어우러지게 할 수 있는 기능입니다.(구버전) ※ float 속성을 적용하면 그 다음 요소에도 float가 적용되어 버그가 생길 수 있습니다. 이럴 때 사용할 수 있는 속성이 "clear" 입니다. 사용 방법 div태그는 block특성을 가지고 있기 때문에 세로로 나타납니다. 이를 가로로 정렬시켜주는 것이 float입니다. float: le.. 2022. 7. 25. for문 정리 반복문 반복문은 프로그램에서 필요한 결과 값을 도출하기 위해 실행문의 순서를 반복적으로 실행시키는 문법을 말합니다. 빈복문에는 while문, do while문, for문이 있으며, for문을 가장 많이 사용합니다. while문 for문이 정해진 횟수만큼 반복한다면, while 문은 조건식이 true일 경우에 계속해서 반복합니다. 초기 값{ while (조건식){ 실행문; 증가감식; } do while문 조건에 따라 반복을 계속할지를 결정할 때 사용하는 것은 while 문과 동일하나, 무조건 {}를 한 번 실행하고, 조건을 검사하여 반복을 결정합니다. 초기 값{ do{ 실행문; 증가감식; } while (조건식) for문 for문은 특정 구문을 여러번 반복하고 싶을 때 사용하는 반복문입니다. for ( 초.. 2022. 7. 21. 연산자 자바스크립트 연산자 프로그램에서 필요하 수식을 만들 때 필요한 것이 연산자입니다. 자바스크립트에서 연산자에는 산술연산자, 대입연산자, 비교연산자, 논리연산자 등이 있습니다. 산술 연산자 산술 연산자는 사칙연산을 다루는 기본적이면서도 가장 많이 사용되는 연산자입니다. 산술 연산자 종류 속성 설명 + 더하기 연산을 할 때 사용합니다. 문자와 문자, 문자와 변수 등을 연결할 때 사용합니다. - 빼기 연산을 할 때 사용합니다. * 곱하기 연산을 할 때 사용합니다. / 몫을 구 할 때 사용합니다. % 나머지를 구할 때 사용합니다. ++ 1씩 증가시킬 때 사용합니다. -- 1씩 감소시킬 때 사용합니다. 대입 연산자 대입 연산자는 오른쪽에 있는 피연산자(값)을 =(대입연산자)왼쪽에 있는 피연산자(변수, 대상)에 저장.. 2022. 7. 20. 기본 규칙 기본 규칙 자바스크립트를 다루기 위해서는 기초적인 특징과 기본 문법이 있습니다. 가장 기본이기 때문에 이 부분을 숙지하고 자바스크립트를 공부해야합니다. 자바스크립트란? JavaScript는 웹 페이지에서 복잡한 기능을 구현할 수 있도록 하는 스크립트 프로그래밍 언어입니다. HTML은 정적인 레이아웃을 표현한다면, 자바스크립트는 동적인 기능을 표현합니다. 자바스크립트는 1995년 넷스케이프 커뮤니케이션의 브렌던 아이크가 개발하였으며 Netscape Navigsator2.0에 구현되었습니다. 1996년에는 마이크로소프트사의 Internet Explorer3.0 탑재되었으며 java 애플릿으로 구현된 웹 브라우저의 지지부진한 보급과 맞물려 빠르게 보급되었습니다. 1997년부터 ESMAScript를 따르는 표준.. 2022. 7. 20. 이전 1 ··· 3 4 5 6 다음
