웹 개발 공부 컨텐츠134 레이아웃04 레이아웃04 이번 레이아웃은 전체 영역이 들어간 구조입니다. 실제 사이트에서 이런 구조를 많이 사용하며, 컨테이너를 만들어서 가운데 영역을 설정합니다. * { 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; background-color: #00897B; } .container { width: 1200px; height: inherit; margin: 0 auto; backgroun.. 2022. 8. 5. 레이아웃05 레이아웃05 이번 레이아웃은 전체 영역이 들어간 구조에서 심화된 레이아웃입니다. 세분화된 블록을 설정하기 위해 컨테이너 안에 또 다시 블록을 잡아 세분화해야 합니다. float을 이용한 레이아웃 컨테이너 안에 float 방식을 쓸수록 구조가 복잡해지며 이 경우 clear을 주어야 할 블록을 알기 힘들기 때문에 clearfix 방식을 사용하는게 낫습니다. 컨텐츠 블록을 따로 만들어 해당 블록에 clearfix를 적용하면 정렬할 수 있습니다. * { padding: 0; margin: 0; } #header { width: 100%; height: 100px; background-color: #EEEBE9; } #header .h1 { width: 100%; height: 100px; background-c.. 2022. 8. 4. 레이아웃03 레이아웃03 이번 레이아웃은 심화된 레이아웃으로 article 블록이 하나 더 추가됐으며, article 블록이 aside 블록과 수직으로 나란히 붙어 있어 추가적인 블록 작업을 해주어야 합니다. float을 이용한 레이아웃 float 방식은 옮겨야 할 블록에 float:left로 정렬을 하고 clear:both를 통해 플로팅을 닫아 형태를 완성합니다. 많이 쓰이는 방식이나 복잡한 구조일수록 사용하기 힘든 단점이 있습니다. float 방식은 clear, overflow, clearfix 세가지 방식이 있습니다. 이번엔 clearfix 방식입니다. * { margin: 0; padding: 0; } body { background-color: #E1F5FE; height: 100%; } #wrap { ma.. 2022. 8. 4. 레이아웃02 레이아웃02 이번 레이아웃은 article 블록이 하나 더 추가된 형태로 반응형 시 추가된 article 블록이 레이아웃01과 조금 다르지만 비슷한 방식으로 반응형을 완성할 수 있습니다. float을 이용한 레이아웃 float 방식은 옮겨야 할 블록에 float:left로 정렬을 하고 clear:both를 통해 플로팅을 닫아 형태를 완성합니다. 많이 쓰이는 방식이나 복잡한 구조일수록 사용하기 힘든 단점이 있습니다. float 방식은 clear, overflow, clearfix 세가지 방식이 있습니다. 이번 방식은 ovrerflow 방식입니다. * { margin: 0; padding: 0; } body { background-color: #E8F5E9; height: 100%; } #wrap { wid.. 2022. 8. 4. 퀴즈 이펙트 만들기 02 퀴즈 만들기 자바스크립트 함수를 활용하여 퀴즈 만들기입니다. 퀴즈를 만들기 위한 3가지 요소에 대해 퀴즈 만들기01에 좀 더 자세히 적었습니다. 퀴즈 만들기 02 이번 퀴즈는 주관식 유형으로 사용자가 답안을 입력이 정답과 매치해 결과를 보여주는 방식입니다. 주관식 유형은 사용자가 답안을 적기 위한 input과 정답을 매칭하기 위한 방법이 필요합니다. ○ 스크립트 코드 //선택자 const quizType = document.querySelector(".quiz__type"); //퀴즈 종류 const quizNumber = document.querySelector(".quiz__question .number"); //퀴즈 번호 const quizAsk = document.querySelector(".qu.. 2022. 8. 4. 퀴즈 이펙트 만들기 01 퀴즈 만들기 자바스크립트 함수를 활용하여 퀴즈 만들기입니다. 퀴즈 만들기 01 이번 퀴즈는 정답 확인하기 유형으로 정답 확인 클릭 시 정답을 보여주는 간단한 형태입니다. HTML과 CSS로 만들어놓은 틀에 스크립트로 문제와 정답을 출력하기 위해서 우선 선택자를 지정해놓아야 하며, 요소 매서드와 이벤트 매서드를 활용해 지정한 선택자에 출력할 수 있습니다. ○ 선택자 //선택자 const quizType = document.querySelector(".quiz__type"); //퀴즈 종류 const quizNumber = document.querySelector(".quiz__question .number"); //퀴즈 번호 const quizAsk = document.querySelector(".quiz.. 2022. 8. 4. 레이아웃01 레이아웃01 레이아웃을 만드는 방법에는 크게 3가지가 있습니다. 01. float 방식 02. flex 방식 03. grid 방식 각각의 방식에는 장단점이 있으며 상황에 따라 선택하여 사용하는게 좋습니다. 이번 레이아웃은 가장 기본적이고 심플한 레이아웃입니다. float을 이용한 레이아웃 float 방식은 옮겨야 할 블록에 float:left로 정렬을 하고 clear:both를 통해 플로팅을 닫아 형태를 완성합니다. 많이 쓰이는 방식이나 복잡한 구조일수록 사용하기 힘든 단점이 있습니다. float 방식은 clear, overflow, clearfix 세가지 방식이 있습니다. 이번 방식은 clear 방식입니다. *{ margin: 0; } body { background-color: #FFF3E0; hei.. 2022. 7. 29. 지역변수/전역변수 전역변수와 지역변수 전역 변수는 함수 블록 밖이나 안에서 자유롭게 사용 가능하지만 지역 변수는 함수 블록 안에서만 사용 가능합니다. 전역 변수와 지역 변수 선언 방식 전역 변수 지역 변수 let 변수; function 함수 () { } function 함수 () { let 변수; } 함수 블록 안에 지역 변수는 반드시 var로 선언해주어야 하며 함수의 지역 변수는 함수 블록 밖에서 밖에 사용할 수 없습니다. [예시] 전역 변수 var kor = 90; function getScore(){ kor = 100; // 전역 변수 console.log ( kor ); // 100 } getScore(); console.log( kor ); // 100 [예시] 지역 변수 var kor = 90; function.. 2022. 7. 28. 함수 함수 함수는 프로그램에서 반복적으로 사용되는 기능을 만들 어내 위한 코드들의 집합입니다. 분류 매서드 설명 사용자 정의 함수 • 선언적 함수 • 익명 함수 프로그램에서 필요한 기능을 사용자가 직접 정의해서 사용하는 함수입니다. 내장 함수 • 인코딩, 디코딩 함수 • 숫자 판별 함수 • 유,무한 값 판별 함수 • 숫자변환 함수 • 문자변환 함수 • 자바스크립트 코드 변경 함수 프로그램 개발에서 자주 사용되는 기능들을 자바스크립트 내부적으로 제공해주는 함수입니다. 01. 선언적 함수 선언적 함수는 모든 함수의 기본 형태가 되는 함수입니다. { function func(){ document.write("함수가 실행되었습니다.") } func(); } 결과 확인하기 02. 익명 함수 익명 함수는 변수에 함수 데.. 2022. 7. 26. 데이터 타입 데이터 타입 데이터 타입은 변수에 저장되는 데이터 유형으로 Primitive(원시) 데이터 타입과 Object(객체) 데이터 타입으로 나눌 수 있습니다. 데이터 타입의 종류 데이터 타입은 다음과 같은 종류가 있습니다. 데이터 종류 설명 기호 숫자 데이터 숫자 데이터는 정수, 소수점, 지수를 표현할 수 있습니다. 문자 데이터 문자 데이터는 '' 또는 "" 로 표현하며 보통 작은 따옴표를 많이 사용합니다. 작은 따옴표 안에 작은 따옴표는 큰 따옴표로 처리합니다. 배열, 객체 데이터 데이터에 배열과 객체를 넣을 수 있습니다. [](배열), {}(객체) 논리 데이터 논리 데이터는 참과 거짓의 값을 표현합니다. 논리 데이터에서 0은 거짓을, 그 외의 숫자는 참을 의미합니다. boolean() 명령어는 변수의 값을.. 2022. 7. 26. 조건문 반복문 반복문은 프로그램에서 필요한 결과 값을 도출하기 위해 실행문의 순서를 반복적으로 실행시키는 문법을 말합니다. 반복문에는 while문, do while문, for문이 있으며, for문을 가장 많이 사용합니다. 1. while문 while문의 형식 while문 for문으로 바꿀 수 있어야 합니다. { let num = 1; while( num 2022. 7. 26. 반복문 반복문 반복문은 프로그램에서 필요한 결과 값을 도출하기 위해 실행문의 순서를 반복적으로 실행시키는 문법을 말합니다. 반복문에는 while문, do while문, for문이 있으며, for문을 가장 많이 사용합니다. 1. while문 while문의 형식 while문 for문으로 바꿀 수 있어야 합니다. { let num = 1; while( num 2022. 7. 25. 이전 1 ··· 8 9 10 11 12 다음
