본문 바로가기

분류 전체보기162

레이아웃 - 03 레이아웃03 이번 레이아웃은 전체 영역이 들어간 구조입니다. 실제 사이트에서 이런 구조를 많이 사용하며, 컨테이너를 만들어서 가운데 영역을 설정합니다. float을 이용한 레이아웃 float 속성을 설정한 뒤 overflow: hidden; 를 설정하면 벗아나는 부분이 보이지 않는 단점이 있으므로 부모 영역을 설정한 후, 그 곳에다가 'clearfix'를 설정해 줄 수 있습니다. before와 after를 설정 해준 뒤 content: ''; 설정으로 가상의 요소를 줍니다. display: block; 으로 블럭화를 시킨 후, line-height: 0;을 설정(공간을 차지하기 때문에 설정 해 줍니다.) 해줍니다. 마지막으로 after의 부분에 clear: both;를 설정해주면 됩니다. * { marg.. 2022. 8. 4.
레이아웃 - 02 레이아웃02 이번 레이아웃은 전체 영역이 들어간 구조입니다. 실제 사이트에서 이런 구조를 많이 사용하며, 컨테이너를 만들어서 가운데 영역을 설정합니다. float을 이용한 레이아웃 float에서 clear : both; 대신 구조를 묶어서 부모 속성에게 overflow: hidden; 속성을 줄 수 있습니다. * { 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-c.. 2022. 7. 29.
레이아웃 - 01 레이아웃01 이번 레이아웃은 전체 영역이 들어간 구조입니다. 실제 사이트에서 이런 구조를 많이 사용하며, 컨테이너를 만들어서 가운데 영역을 설정합니다. float을 이용한 레이아웃 이번 레이아웃은 전체 영역이 들어간 구조입니다. 실제 사이트에서 이런 구조를 많이 사용하며, 컨테이너를 만들어서 가운데 영역을 설정합니다. float는 사용시 clear속성을 이용하여 이후의 요소들이 더이상 float의 속성에 영향을 받지 않도록 합니다. * { margin: 0; padding: 0; } body { background-color: #FFF3E0; } #wrap { width: 1200px; margin: 0 auto; } #header { width: 1200px; height: 100px; backgrou.. 2022. 7. 29.
지역변수와 전역변수 지역변수/전역변수 변수는 함수 블록{ }을 기준으로 변수의 선언 위치에 따라 '전역변수'와 '지역 변수'로 나누어집니다. '전역 변수'는 함수 블록{ } 밖이나 안에서 자유롭게 사용 가능하지만 '지역 변수'는 함수 블록{} 내에서만 사용할 수 있습니다. 전역변수 지역변수 var 변수; funciton 함수() { } funciton 함수() { var 변수; } 예제1 함수 블록 { } 안에 있는 kor 변수는 전역변수 입니다. var kor = 90; function getScore() { kor = 100; //전역변수 console.log(kor); //100 } getScore(); console.log(kor); //100 예제2 함수 블록{ }안에 지역 변수는 반드시 var로 선언해 주어야 하.. 2022. 7. 28.
함수에 대해 알아보기 함수 함수(function)란 첫 번째 집합의 한 원소가 두 번째 집합의 오직 한 원소에만 대응하는 관계를 의미합니다. 분류 종류 설명 사용자 정의 함수 선언적 함수 익명 함수 프로그램에서 필요한 기능을 사용자가 직접 정의 해서 사용하는 함수입니다. 내장 함수 인코딩, 디코딩 함수 숫자 판별 함수 유•무한 값 판별 함수 숫자변환 함수 문자 변환 함수 자바스크립트 코드 변경 함수 프로그램 개발에서 자주 사용되는 기능들을 자바스크립트 내부적으로 제공해 주는 함수 입니다. 01. 선언적 함수 funciton 함수() { 실행문; } funciton compute() { console.log('선언적 함수'); } function func() { document.write("함수가 실행되었습니다.1"); } f.. 2022. 7. 26.
UI/UX 콘셉트 기획 발표 자료 2022. 7. 26.
데이터 타입 데이터 타입 데이터 타입은 변수에 저장되는 데이터의 유형으로 원시(Primitive)데이터 타입 과 객체(Object)데이터 타입 으로 나눌 수 있습니다. 원시(Primitive)데이터 타입으로는 number, strong, boolean, undefined, null, symbol 등이 있으며, 객체(Object)데이터 타입에는 function, object, array 등이 있습니다. number(숫자) 데이터 number 데이터는 정수, 소수점, 지수를 표현할 수 있습니다. var num1 = 10; var num2 = 10.5; var num3 = le+2; console.log(num1); // 10 console.log(num1); // 10 console.log(num3); // 100 ,l.. 2022. 7. 26.
If문 조건문 조건문은 주어진 조건식의 결과에 따라 별도의 명령을 수행하도록 제어하는 명령문입니다. 가장 기본이 되는 명령문은 if문 입니다. if문 if (조건식) { 실행문; } if (조건식) { 실행문1; } else { 실행문2; } if (조건식1) { 실행문1; } else if (조건식2) { 실행문2; } else { 실행문3; } if문 { var age = prompt('나이입력',''); //''는 작은 따옴표 두개 입니다. var adissionFee = ''; if (age < 13 || age glt;= 65) { adissionFee = '2000원'; } else if (age glt;= 13 && age < 20) { adissionFee = '4000원'; } else { ad.. 2022. 7. 26.
Layout만들기 레이아웃 레이아웃(layout)이란, 특정 공간에 여러 구성요소를 보기좋게 효과적으로 배치 하는 작업을 의미합니다. 레이아웃 : float float 속성은 해당 HTML 요소가 주변의 다른 요소들과 자연스럽게 어울리도록 만들어 줍니다. 이 속성은 본래 자연스럽게 어울리게 하는 목적으로 만들어졌지만, 현재는 웹 페이지의 레이아웃(layout)을 작성 할 때자주 사용됩니다. clear 속성 컨테이너 요소에 float 속성이 적용되면 그 이후에 등장하는 모든 요소들은 정확한 위치를 설정하기가 매우 힘들어집니다. 따라서 float속성이 적용하고자 하는 요소가 모두 등장하고 난 다음에 clear속성을 이용하여 이후의 요소들이 더이상 float의 속성에 영향을 받지 않도록 합니다. See the Pen 레이아웃1.. 2022. 7. 26.
for문 이해하기 반복문 반복문은 프로그램에서 필요한 결과 값을 도출하기 위해 실행문의 순서를 반복적으로 실행시키는 문법을 말합니다. 반복문에는 while문, do while문, for문이 있으며, for문을 가장 많이 사용합니다. while문 초기값 while (조건식) { 실행문; 증가감식; } do while문 do while문은 while문과 다르게 do를 먼저 실행 하기 때문에 첫번째 실행은 조건없이 실행합니다. 초기값 do { 실행문; 증가감식; } while (조건식) for문 for (초기값; 조건식; 증감값){ 실행문; } 0부터 99까지 출력하기 //0부터 99까지 출력하기 for(let i=1; i 2022. 7. 21.
연산자 자바스크립트 연산자 프로그램에 필요한 수식을 만들 때 필요한 것이 연산자 입니다. 자바스크립트에서 연산자에는 산술연산자, 대입연산자, 비교연산자, 논리연산자 등이 있습니다. 산술 연산자 산술 연산자는 사칙연산을 다루는 기본적이면서도 가장 많이 사용되는 연산자 입니다. 산술연산자 설명 + 더하기 연산을 할 때 사용합니다. 문자와 문자, 문자와 변수등을 연결할 때 사용합니다. - 빼기 연산을 할 때 사용합니다. * 곱하기 연산을 할때 사용합니다. / 몫을 구 할 때 사용 합니다. % 나머지를 구할 때 사용 합니다. ++ 1씩 증가시킬 때 사용합니다. -- 1씩 감소시킬 때 사용합니다. 대입 연산자 대입 연산자는 변수에 값을 대입할 때 사용하는 연산자이며, 연산자들의 결합 방향은 오른쪽에서 왼쪽입니다. 대입 .. 2022. 7. 20.
기본규칙 기본 규칙 자바스크립트를 다루기 위해서는 기초적인 특징과 기본 문법이 있습니다. 가장 기본이기 때문에 이 부분을 숙지하고 자바스크립트를 공부해야 합니다. 자바스크립트란? JavaScript는 웹 페이지에서 복잡한 기능을 구현할 수 있도록 하는 스크립팅 프로그래밍 언어입니다 HTML은 정적인 레이아웃으 표현한다면, 자바스크립트는 동적인 기능을 표현합니다. 자바스크립트는 1995년 넷스케이프 커뮤니케이션의 브렌던 아이크가 개발하였스며 Netscape Navigsator2.0에 구현되었습니다. 1996년에는 마이크로소프트사의 Internet Explorer3.0 탑재되었으며 java 애플릿으로 구현된 웹 브라우저의 지지부진한 보급과 맞물려 빠르게 보급되었습니다. 1997년부터 ESMAScript를 따르는 표준.. 2022. 7. 20.
자바스크립트

Javascript

자세히 보기
html

HTML

태그 보기
css

CSS

속성 보기
광고 준비중입니다.
<

티스토리툴바