jongyung

마크업(markup) 마크업이란, ,, 등과 같이 명령어의 형태가 각 괄호로 되어있는 태그의 시작과 종료 즉, 와 의 형태인 요소들로 코딩을 한 것입니다. 마크업을 할 때 지켜야 하는 기본 문법 규칙이 있습니다. 1. 요소는 시작 태그와 종료 태그가 있어야 합니다. 예시: 요소는 시작 태그와 종료 태그가 있어야 한다. 2. 요소는 제대로 중첩되어야 합니다. 예시: 중첩된 요소가 있을 때는 바르게 표현해야 한다. 3. img 태그에는 alt 속성이 있어야 합니다. 예시: 4. 권장하는 사항도 있습니다. 예시1: 태그나 속성은 소문자로 마크업 하는 것을 권장한다. 예시2: 속성의 값에는 따옴표 처리를 권장한다. 5. 주석처리 방법 주석 내용은 설명문이기 떄문에 브라우저 화면에 출력되지 않게 합니다. 예시: ..

블록 레벨 요소(Block-level Element) 블록 레벨 요소는 마크업을 할 때 줄이 바뀌는 특성을 가지고 있습니다. 블록 요소는 하나의 박스라고 생각하면 됩니다. 블록 레벨 요소의 태그들: 제목 ~: 1. HTML 문서에서 제목 (heading)을 정의할 때 사용하는 태그. 2. 텍스트와 인라인 요소를 포함할 수 있지만 블록 레벨 요소는 포함할 수 없다. 3. 스크린 리터(음석낭독프로그램)에서는 제목의 수준으로 바로 이동할 수 있기 때문에 번호순으로 정의하는 것이 좋다. 문단 : 1. HTML 문서에서 단락 (paragraph)을 정의할 때 사용하는 태그. 2. 텍스트와 인라인 요소를 포함할 수 있지만 블록 레벨 요소는 포함할 수 없다. 3. 텍스트의 행을 바꾸려면 태그를 사용한다. 인라인 요소..

텍스트와 관련된 태그들 See the Pen 연산자 by choeunkyoung (@choeunkyoung) on CodePen.

태그는 문서의 주요 콘텐츠 영역을 설정합니다. 주요 콘텐츠 영역은 문서의 핵심 주제나 앱의 핵심 기능에 직접적으로 연결됐거나 확장하는 콘텐츠로 이루어집니다. 속성 없이는 문서에 하나보다 많은 요소가 존재하면 안됩니다. main 요소의 컨텐츠는 문서의 유일한 내용이어야 합니다. 요소 개요에 영향을 주지 않고, body 등의 요소나 h2와 같은 제목 요소와 달리 페이지의 개념적 구조를 바꾸지 않으며 온전히 정보를 제공합니다. 태그는 주제별 그룹의 콘텐츠 섹션을 설정합니다. HTML 문서의 독립적인 구획을 나타내며, 더 적합한 의미를 가진 요소가 없을 때 사용합니다. 보통 은 제목을 포함하지만, 항상 그런 것은 아닙니다. 이 요소는 전역 특성만 포함합니다. 각각의 을 식별할 수단이 필요합니다. 주로 제목(-)..

태그는 문서의 최상단 요소를 나타냅니다. 태그는 문서 정보에 해당하는 내용을 설정합니다. 태그는 문서 본문에 해당하는 내용을 설정합니다. 태그는 문서의 기본 URL을 설정합니다. 태그는 문서의 외부 리소스를 설정합니다. 태그는 문서의 메타 정보를 설정합니다. 태그는 문서의 스타일 정보를 설정합니다. 태그는 문서의 제목을 설정합니다.

1. 변수 변수 안에 저장된 데이터를 불러올 수가 있습니다. 예제로 설명하겠습니다. let x = 100, y = 200, z = "javascript"; console.log(x, y, z); // 100200javascript let으로 변수를 정해주고, 콘솔로 불러오면 됩니다. 2. 상수 상수 안에 저장된 데이터를 불러올 수가 있습니다. 예제로 설명하겠습니다. const x = 100, y = 200, z = "javascript"; console.log(x, y, z); // 100200javascript const로 변수를 정해주고, 콘솔로 불러오면 됩니다. 3. 배열 변수안에 저장된 데이터를 불러오는 방법입니다. { const arr = [100, 200, "javascript"]; conso..

함수function에 대해서 알아보려고 합니다. 함수를 어떻게 사용하는 지를 예제로 들면서 설명하겠습니다. 함수를 변수, 매개변수, 배열, 객체, 객체생성자를 함께 써서 사용하고 프로토타입 함수를 예제로 들겠습니다. 1. 함수 유형 : 함수와 매개변수를 이용한 형태 매개변수를 이용해서 쓴 함수입니다. 매개변수를 지정해줘서 값을 출력할 때 불러주면 되는, 간단하지만 적을 게 많은 식입니다. function func(num, str1, str2){ document.write(num +". "+ str1 + "가 " + str2 + "되었습니다."," "); } func("1", "함수", "실행"); func("2", "자바스크립트", "실행"); func("3", "리액트", "실행"); // 1. 함수가..

함수로 퀴즈를 풀 수 있는 사이트를 만들어 보겠습니다. 링크: 퀴즈 이펙트 01 body의 main 과 script 부분을 나눠서 설명하겠습니다. . 정답 확인하기 연변대비 main 부분에서는 사이트의 틀을 만들어 준다고 생각하면 됩니다. 우선, quiz__wrap으로 class를 지정해서 묶어주었습니다. script 에서 보면, quizWrap을 document.querySelector()로 선택자를 만들어 줬는데요, 이 querySelector()는 Element 인터페이스의 메소드 입니다. querySelector() 메소드는 CSS 선택자에 매치되는 하나 이상의 element 중 첫 번째 항목을 반환해줍니다. 그렇기 때문에 그 다음부터는 wrap안에서 값을 찾으면 된다는 의미입니다. 그 다음은, ..

지난번 게시글에 이어서 다른 부분을 추가적으로 만들었습니다. 링크: 퀴즈 이펙트 02 (daanbi1345.github.io) Quiz 주관식 확인하기 유형 1 2 . 정답 확인하기 연변대비 설명 daanbi1345@gmail.com 형식은 지난 번과 같습니다. 새로 쓴 식은 textContent와 trim()이 있습니다. 먼저 textContent에 대해서 설명하겠습니다. 지난번에 쓴 innerText 와의 차이점은 크지 않지만, 어떤 식으로 쓰이는 지를 알아보기 위해서 비교해보겠습니다. innerText : innerText는 마크업 언어가 적용된 상태로 읽어옵니다. 즉 태그와 마크업 언어와 같은 태그값은 불러들이지 않습니다. 또한 사용자가 보이는 상태 style등 마크업 언어가 적용된 상태입니다. ..

틀린 문제를 위주로 풀이를 해설하겠습니다. 01. 결괏값을 작성하시오. { if( null ){ console.log("true"); } else { console.log("false"); } } 답 : false 02. 결괏값을 작성하시오. { let num = 0; while( num 6 ){ break; } console.log(num); } } 답 : 1 2 4 5 6 while문을 이용한 식입니다. true일 경우에 출력이 되는 식입니다. 문제 2번처럼 num++;의 위치가 중요합니다. 명령어 console의 위에 있으므로, 1의 값을 넣어줄 범위를 유의해서 풀어야 합니다. num의 값이 0으로 주어졌습니다. if 조건식이 걸려있습니다. 우선 num이 3일 경우에 continue 한다는 식은 3..

수업 시간에 했던 테스트를 복습해보겠습니다. //0~100 for문 for(let i=0; i { document.write("안녕"); } a(); const b = () => { document.write("하이"); } b(); c = (str) => { document.write(str); } c("hello"); func = () => { const d = "hi"; return d; } document.write(func()); 답: 안녕 하이 hello hi 위의 식들을 화살표 함수로 바꾼 식들입니다. function을 생략하고 괄호를 = () => 의 형태로 바꿔썼다고 생각하면 외우기 쉽습니다. //1~25까지의 숫자 중 짝수는 빨강, 홀수는 파랑색의 숫자를 가진 테이블 let a = 1;..

이번에는 세 가지의 주관식 문제를 만들어 보겠습니다. 링크: 퀴즈 이펙트 03 (daanbi1345.github.io) 정답 칸에 답을 적어서 맞으면, 정답입니다!가 뜨면서 웃는 강아지가 나오고, 틀리면, 오답입니다!가 뜨면서 우는 강아지가 나오고, 그 밑에 칸이 생기면서 tip이 나옵니다. body의 main부분과 script를 나눠서 보여드리겠습니다. body의 main . 정답입니다! 오답입니다! 정답 확인하기 의 부분이 문제부분입니다. 한 문제의 body만 보여드리는 것이기 때문에 main안에 해당 div class="quiz"부분은 세 개가 있습니다. quiz question에 em태그와 span태그를 넣어줬습니다. .quiz__question em { color: #ff3737; } .quiz..

모든 문제를 적고 틀린 문제만 오답 정리를 했습니다. 01. 결괏값을 작성하시오. { (function(){ console.log("함수가 실행되었습니다."); })(); } 답: 함수가 실행되었습니다. 02. 결괏값을 작성하시오. { function func(str = "함수가 실행되었습니다."){ document.write(str); } func(); } 답: 함수가 실행되었습니다. 03. 결괏값을 작성하시오. { let sum = 0; for(var i=1; i num2) return num1 else return num2 } console.log(func(10, 23) + func(40, 50)) } 답: 73

객관식 확인하기 유형을 만들어 보겠습니다. 링크: 퀴즈 이펙트 04 (daanbi1345.github.io) 객관식 문제를 풀면, 정답인지 오답인지를 확인하고, 정답을 확인하는 버튼이 사라지고 해설이 나오게 했습니다. body의 main부분과 script를 나눠서 보여드리겠습니다. body의 main 정답입니다! 오답입니다! 정답 확인하기 지난 번과 같은 틀 안에 주관식 답을 적는 칸은 없애고, 객관식 선택 버튼을 추가했습니다. div class="quiz__choice"로 묶어서 label for 태그에 input typs="radio" 태그를 넣었습니다. label은 폼의 양식에 이름 붙이는 태그입니다. 주요 속성은 for입니다. label의 for의 값과 양식의 id의 값이 같으면 연결됩니다. la..

화면에서 보이는 것처럼 마우스에 효과를 줄 수 있습니다. 이번에는 마우스 따라다니기 효과에 대해서 알아보도록 하겠습니다. body의 main부분과 style부분 그리고 script부분을 나눠서 설명하겠습니다. body의 main Life isn't about finding yourself. Life is about creating yourself. 삶은 자신을 찾아가는 것이 아니라 만들어 가는 것이다. clientX : 0px clientY : 0px offsetX : 0px offsetY : 0px pageX : 0px pageY : 0px screenX : 0px screenY : 0px body부분은 보이는 것처럼 간단합니다. 이번에는 class를 style과 함수를 적용하기 위해서 지정했습니다. ..

GSAP를 이용해서 마우스를 따라다니는 효과에 대해서 알아보겠습니다. The GreenSock Animation Platform(gsap) 를 사용했는데요, 프론트엔드 개발자와 디자이너들이 쉽게 사용할 수 있는 타임라인 기반의 애니메이션 자바스크립트 라이브러리입니다. 자바스크립트 라이브러리란? 쉽게 말해, 자주 사용되지만 일일히 구현하기엔 까다롭거나 불편한 자바스크립트의 코드의 특정 기능을 기성품으로 만들어 묶어놓은 패키지 같은 것을 말합니다. 예를 들자면 가구를 만들때 경첩이나 슬라이드 같은 하드웨어는 만들어진 것을 사서 조립하는 것과 비슷한 개념입니다. body 의 main 부분과 style 그리고 script 부분으로 나눠서 설명하겠습니다. body 의 main One needs to be slow..

마우스 따라다니는 돋보기 효과에 대해서 알아보겠습니다. 돋보기로 보는 것처럼 보이는 효과를 넣었습니다. body 의 main 부분과 style 그리고 script 부분으로 나눠서 설명하겠습니다. body 의 main It is hard to fight an enemy who has outposts in your head. 당신의 머릿속에 초소를 가지고 있는 적과 싸우기란 어려운 일이다. 설정이 매우 간단합니다. style에서 설정해줄 부분들을 class로 설정하고, 텍스트를 입력했습니다. style 지난 번과 비슷한 구조입니다. z-index 속성은 위치 지정 요소와, 그 자손 또는 하위 플렉스 아이템의 Z축 순서를 지정합니다. 더 큰 z-index 값을 가진 요소가 작은 값의 요소 위를 덮습니다. po..

검색을 할 수 있는 효과를 적용해서 만들어 보았습니다. 간략한 설명: 함수식을 이용해서 검색어에 해당되는 단어만 보이도록 설정했습니다. body의 main부분과 script부분을 나눠서 설명하겠습니다. body의 main JAVASCRIPT CSS 속성 검색하기 indexOf() / search() 검색하기 CSS 속성 갯수 : 0개 align-content : 콘텐츠 아이템의 상하관계 정렬 상태를 설정합니다. align-items : 콘텐츠 아이템의 내부 상하관계 정렬 상태를 설정합니다. align-self : 개별적인 콘텐츠 아이템의 정렬 상태를 설정합니다. all : 요소의 속성을 초기화 또는 상속을 설정합니다. animation : 애니메이션과 관련된 속성을 일괄적으로 설정합니다. animatio..

모든 문제를 적고 틀린 문제만 오답 정리를 했습니다. 01. 결괏값을 작성하시오. { const str = "javascript"; const text = str.indexOf("a"); const text2 = str.lastIndexOf("a"); const text3 = str.includes("a"); console.log(text); console.log(text2); console.log(text3); } 답: 1 3 true indexOf() 는 자릿수를 반환하고, 왼쪽에서 가장 첫 번 째부터 0번 째로 순서를 셉니다. 그러므로 javascript 의 알파벳의 왼쪽에서부터 세면, a 는 두 번 째 즉, 1 이 반환됩니다. lastIndexOf() 는 자릿수를 반환하고, 오른쪽에서 순서를 세지..

링크: 퀴즈 이펙트 06 (daanbi1345.github.io) 객관식 문제 유형인데, 한 문제를 풀면 다음 문제로 넘어가는 슬라이드 형식으로 만들어 보았습니다. body의 main부분과 script를 나눠서 보여드리겠습니다. body의 main 몇 문제 째인지 정답입니다! 오답입니다! 다음 문제 구조는 지난 번과 같습니다. quiz choice 부분을 script 에서 choiceTag 를 만들어서 ``안에 입력했습니다. 보다 간결한 방식이므로 이 방법을 적용했습니다. script 문제 정보 quizInfo 는 배열 안에 넣은 객체로 만들었습니다. 그 중에서도 infoChoice 즉, 객관식 선택지는 배열로 만들었습니다. 이전에 썼던 방식과 같이 선택자를 만들어서 반복적인 입력을 피했습니다. 이번에는..

이번에는 객관식을 여러 개로 늘려서 만들어 보겠습니다. 링크: 퀴즈 이펙트 05 (daanbi1345.github.io) 60문제가 담겨있기 때문에 문제 예시는 1번과 2번 문제만 쓰겠습니다. body의 main부분과 script를 나눠서 보여드리겠습니다. body의 main body에 이전에 했던 방식대로 div 태그에 class 명을 정해서 만들어도 됩니다. 하지만 이번에는 다른 방식을 적용해서 만들어 봤습니다. script에서 문제 출력 부분을 보면 알 수 있습니다. script 선택자를 querySelector와 querySelectorAll로 만들었습니다. querySelector()는 Element 인터페이스의 메소드 입니다. CSS 선택자에 매치되는 하나 이상의 element 중 첫 번째 항..

10 - 1 문자열에 접근하기 자바스크립트에서는 간단한 텍스트를 처리하려고 문자열 유형을 사용하곤 합니다. 원시 유형과 객체 단순히 값만 가지고 있는 경우 '원시 유형'이라고 하고, 프로퍼티와 메서드를 가진 경우 '객체'라고 합니다. 자바스크립트에서는 원시 유형이어도 프로퍼티와 메서드를 사용할 수 있습니다. 프로퍼티(property)는 일부 객체 지향 프로그래밍 언어에서 필드(데이터 멤버)와 메소드 간 기능의 중간인 클래스 멤버의 특수한 유형입니다. 메서드(method) 또는 멤버 함수(member function)는 객체 지향 프로그래밍에서 객체과 관련된 서브 루틴 (또는 함수)이며 데이터와 멤버 변수에 대한 접근 권한을 갖습니다. 예를 들어보면, 간단히 변수에 문자열을 할당한 후 length 라는 프..

설명: 마우스를 오버하면 이미지가 바뀌는 효과를 넣은 자바스크립트와 버튼을 누르면 사이드에서 메뉴가 나오는 자바스크립트를 만들어 봤습니다. 설명하기 쉽게 body 부분의 코드를 각각 나눠서 보여드리겠습니다. 마우스 오버하면 화면 바꾸기 우선, 이미지를 자바스크립트 파일 안에 저장해놓아야 합니다. 이미지의 이름을 각각 sunrise 와 summer 로 정했습니다. 이미지를 저장해놓은 경로를 코드에서 볼 수 있듯이(img src="assets/ico/sunrise/jpg"), 경로가 단순할 수록 덜 헷갈립니다. 화면에 나올 이미지를 sunrise 로 정해서 div 안에 넣었습니다. 이미지를 불러오면서, 효과를 넣으려면 class 가 필요하기 때문입니다. sunrise 라는 이름으로 변수를 저장했습니다. 해당..

틀린 문제 위주로 오답 정리를 하겠습니다. 01. 다음의 결괏값을 작성하시오. let num = 0; while(false){ num++; if( num == 3 ){ continue; } if( num > 10 ){ break; } } console.log(num); 답: 0 02. 다음의 결괏값을 작성하시오. let a = 6, b = 9, c = 3, result; result = ++a + b++ + ++c; console.log(result); console.log(a+b+c); 답: 20 21 전치, 후치 문제입니다. console.log(result) 값은 1 + a 와 b 그리고 1+ c 의 값을 더해야 하고, console.log(a+b+c) 에서 a 와 b 그리고 c 모두 1씩 증가한 ..

기본적인 슬라이드 트랜지션 효과에 대해서 알아보겠습니다. body 의 main main 은 보이는 것처럼 간단합니다. 슬라이드에 들어갈 이미지를 slider__wrap 과 slider__img 라는 div 박스에 넣어서 묶었습니다. style 이미지를 가운데로 옮겨주고, 크기를 800 * 450 으로 정했습니다. 이미지가 바뀔 때 0.3 초가 걸리도록 했습니다. ::before 가상 요소를 설정해서 이미지마다 '이미지+번호'를 적었습니다. script - javascript //선택자 const sliderWrap = document.querySelector(".slider__wrap"); const sliderImg = sliderWrap.querySelector(".slider__img"); cons..

이미지가 옆으로 움직이는 슬라이드 효과를 만들어 봤습니다. style 부분과 body 의 main 부분이 동일하니, 이번에는 생략하겠습니다. javascript 와 gsap 그리고 jquery 의 세 가지 방식으로 써봤습니다. 선택자는 동일하게 적용되었기 때문에 따로 쓰자면, //선택자 const sliderWrap = document.querySelector(".slider__wrap"); const sliderImg = sliderWrap.querySelector(".slider__img"); //보여지는 영역 const sliderInner = sliderWrap.querySelector(".slider__inner"); //움직이는 영역 const slider = sliderWrap.querySe..

이번에는 위로 움직이는 슬라이드를 만들어 봤습니다. 왼쪽으로 움직이는 슬라이드는 X축을 중심으로 움직였습니다. 따라서 이번 슬라이드 효과는 Y축을 중심으로 움직인다는 것을 우츄할 수 있습니다. 그렇기 때문에 지난 번과 별로 다른 것이 없습니다. 공통된 style 부분과 선택자 부분은 생략하겠습니다. script - javascript sliderInner.style.transition = "all 0.6s"; setInterval(() => { currentIndex = (currentIndex + 1) % sliderCount; //1 2 3 4 0 1 2 3 4 0 ... sliderInner.style.transform = "translateY("+ -450 * currentIndex + "px)"..

javascript sliderInner.appendChild(sliderClone); function sliderEffect(){ currentIndex++; sliderInner.style.transition = "all 0.6s"; sliderInner.style.transform = "translateX(-"+ sliderWidth * currentIndex +"px)"; //마지막 이미지에 위치했을 때 if(currentIndex == sliderCount){ setTimeout(() => { sliderInner.style.transition = "0s"; sliderInner.style.transform = "translateX(0px)"; }, 700); currentIndex = 0; }..

설명: 이번에는 연속으로 위로 움직이는 슬라이드 효과를 만들어 봤습니다. 왼쪽으로 움직이는 슬라이드 효과와 다른 점이 몇 가지 없습니다. 간략하게 설명하면, 움직이는 축을 가로 즉, x 축에서 세로인 y 축으로 바꾸면 됩니다. 그렇게 바꾼 축을 실행하려면, 스타일 시트에서 한 display : flex; 설정을 해제하고, 선택자 중에서 이미의 가로 값을 세로 값으로 바꿔서 쓰면 됩니다. 스타일 시트, 선택자, javascript, gsap 그리고 jquery 를 순서대로 설명하겠습니다. style /* slider__wrap */ .slider__wrap { width: 100%; height: 100vh; display: flex; align-items: center; justify-content: c..

설명: 버튼은 페이지의 왼쪽과 오른쪽에 있는 preview 와 next 버튼을 말하고, 닷메뉴는 페이지의 하단에 위치한 다섯 개의 동그란 메뉴를 말합니다. 각각의 버튼과 닷메뉴를 누르면, 이미지가 이동하면서 누른 순서와 방향대로 보여집니다. body 의 main 과 script 로 나눠서 보여드리겠습니다. body 의 main prev next 각 이미지에 class 를 부여해서 해당하는 순서의 닷메뉴를 누르면, 그 이미지가 보일 수 있도록 했습니다. script //선택자 const sliderWrap = document.querySelector(".slider__wrap"); const sliderImg = sliderWrap.querySelector(".slider__img"); //보여지는 영역 ..

설명: 이미지 위에 썸네일을 띄웠습니다. 왼쪽과 오른쪽에는 preview 버튼과 next 버튼을 만들어서 각자 클릭했을 때 해당하는 이미지가 순서대로 나오도록 설정했습니다. body 의 main 와 script 로 나눠서 설명하겠습니다. body 의 main prev next body 의 구조는 간단합니다. 이미지 전체가 나오는 영역을 slider__img 로 정하고, 썸네일과 버튼의 영역도 각각 slider__thumb, slider__btn 로 정했습니다. 이미지의 왼쪽과 오른쪽에 위치한 preview 와 next 버튼도 각각의 class를 정했습니다. script //선택자 let images = [ "./img/sliderEffect06-min.jpg", "./img/sliderEffect07-m..

설명: Parallax effect(피럴랙스 효과)는 물체의 움직임에 따라 시차가 발생하여, 같은 물체를 보는 관찰자들이 서로 다른 시각적인 경험을 하는 현상을 말합니다. 쉽게 말해, 우리 눈 앞에 있는 두 개의 물체가 서로 다른 거리에 위치해 있을 때, 더 가까이 있는 물체는 더 빨리 움직이는 것처럼 보이고, 더 멀리 있는 물체는 더 느리게 움직이는 것처럼 보입니다. 이 효과를 적용해보겠습니다. body 의 main 과 좌측 하단에 있는 aside 그리고 script 로 나눠서 설명하겠습니다. body 의 main 01 Section1 결과도 중요하지만, 과정을 더 중요하게 생각한다. 02 Section2 산을 움직이려 하는 이는 작은 돌을 들어내는 일로 시작한다. 03 Section3 높은 목표를 세..

설명: 패럴랙스 효과를 이용해서 사이트를 간단하게 만들어 봤습니다. 스크롤을 내리면 효과가 적용이 되는 것을 알 수 있습니다. 왼쪽 상단에는 스크롤의 값이 숫자로 나오게 설정했습니다. 설명은 style, body 그리고 script 로 나눠서 하겠습니다. style @font-face { font-family: 'ReciaSerifDisplay'; font-weight: normal; font-style: normal; src: url('https://cdn.jsdelivr.net/gh/webfontworld/recia/ReciaSerifDisplay.eot'); src: url('https://cdn.jsdelivr.net/gh/webfontworld/recia/ReciaSerifDisplay.eot?..

문자열 객체 문자열 객체(String Object)는 문자열 데이터를 나타내는 객체입니다. 문자열은 일련의 문자를 포함하며, 문자열 객체는 이러한 문자열 데이터를 생성, 저장 및 조작하는 데 사용됩니다. 자바스크립트에서는 문자열 객체가 내장된 String 클래스의 인스턴스입니다. 이러한 객체를 만들려면 따옴표나 쌍따옴표로 둘러싸인 문자열 리터럴을 사용하거나, String 클래스의 생성자를 사용하여 새로운 문자열 객체를 만들 수 있습니다. 문자열 객체는 문자열 데이터를 다루는 다양한 기능을 제공합니다. 예를 들어, 문자열 객체의 메서드를 사용하여 문자열을 자르거나 붙이거나 대문자로 바꾸는 등의 작업을 수행할 수 있습니다. 🐇at() const str = '👨‍👩‍👦'; console.log(str.at(0..

설명: 보이는 것처럼 게임 효과를 활용해서 페이지를 만들어 봤습니다. css 는 따로 설명하지 않고, body 의 footer 와 script 를 나누어서 설명하겠습니다. body 의 footer 현재 맥을 사용하고 있으면, 화면 크기는 1920 x 760 입니다. footer 에는 별다른 설정을 하지 않았습니다. script 에서 함수식을 활용해서 화면 크기를 구현하는 설정을 했습니다. script jquery 와 gsap 를 이용했습니다. jQuery는 HTML의 클라이언트 사이드 스크립팅을 간편하게 만드는 인기 있는 JavaScript 라이브러리입니다. 다양한 기능과 유용한 메서드를 제공하여 웹 개발을 더욱 효율적이고 쉽게 할 수 있도록 도와줍니다. GSAP (GreenSock Animation P..

설명: 지난 번 게임효과 게시글에서는 화면 구현에 대한 설명을 했습니다. 이번에는 구현한 화면이 정말로 실행이 되어, 음악을 재생할 수 있드록 설정했습니다. html 파일이 아닌, js 파일에 설정했습니다. 설명은 이 js 파일을 토대로 하겠습니다. music.js const allMusic = [ { name : "1. Rain on me", artist : "Lady Gaga(ft Ariana Grande)", img : "music_view01", audio: "music_audio01" }, { name : "2. Juicy", artist : "Doja Cat", img : "music_view02", audio: "music_audio02" }, { name : "3. My hair", art..

CSS 기본 문법 CSS(Cascading Style Sheet)를 정의하는 방법으로는, 내부 스타일시트, 외부 스타일시트, 인라인 스타일시트 등이 있습니다. 내부 스타일시트 CSS를 HTML 문서 안에 태그로 기재하여 HTML 문서 안에 CSS가 함께 저장되도록 하는 형태입니다. 외부 스타일시트 스타일 속성들을 따로 저장하여 HTML 문서에 파일명으로 연결할 수 있습니다. 이 때 스타일은 .css 확장자를 가진 별도의 파일로 저장하고, HTML에서는 태그를 이용해서 선언합니다. 내부 스타일시트는 그 스타일이 기술된 페이지에만 적용되지만, 외부 스타일시트는 그 스타일을 선언한 모든 HTML 페이지에 적용됩니다. @import CSS 안으로 다른 CSS 파일을 불러들일 경우에 사용합니다. 맨 윗 줄에 기술..

선택자(selector)란? 선택자란 CSS로 UI의 어느 부분을 디자인 할 부분, 즉 표현할 대상입니다. CSS로 속성을 부여하는 형식은 다음과 같습니다. 요소를 선택하는 방법, 즉 선택자의 종류로는 type 선택자, id 선택자, class 선택자 등 여러 가지가 있습니다. 그 중에서 ID 선택자와 CLASS 선택자의 차이점에 대해서 알아보려고 합니다. ID 선택자 HTML 문서의 요소 중 같은 요소도 각기 다른 이름을 지정해서 따로 속성을 부여할 수가 있습니다. HTML 요소에 id로 이름을 붙일 때에는 유일한 이름을 부여해야 하며, 다른 요소에 같은 id 명을 또 주면 안됩니다. 아이디명 또한 태그와 겹치면 안됩니다. CSS에서는 id 선택자 앞에 #를 붙여야 합니다. id명이나 class명은 숫..

See the Pen Untitled by choeunkyoung (@choeunkyoung) on CodePen. codepen 사이트를 통해서 움직이는 애니메이션을 만들 수 있습니다.

block 요소는 원래 세로로만 나열되지만, float을 이용해서 가로로 배치할 수 있습니다. float은 레이아웃을 완성하기 위해서 필수적입니다. float을 지정하는 법과 해제하는 법을 알아보려고 합니다. float float은 요소를 좌측이나 우측에 붙이고 아래 내용이 그 주변을 흐르게 하는 속성입니다. 세로로만 나열되던 블록들을 가로로 배치할 때 씁니다. float 한 박스에 가로 사이즈를 지정해 주면 크로스브라우징 됩니다. heading 요소나 인라인 요소들은 가로 사이즈 없이 float을 해도 레이아웃이 흐트러지지 않습니다. float의 형식은 "float: left;" 이런 모습입니다. 여기서 left는 요소를 왼쪽에 배치하고 나머지 콘텐츠는 그 주변에 흐르도록 한다는 의미이고, right를..

선택자란 CSS로 UI의 표현할 대상이 되는 부분입니다. 지난 번에 게시한 ID 와 CLASS 의 차이점을 알아보는 게시글에서 밝혔 듯이, CSS로 속성을 부여하는 형식은 위와 같습니다. ID와 CLASS외에도 다른 선택자들이 있기 때문에 이번 게시글에서는 ID와 CLASS를 포함한 14가의 선택자에 대해서 알아보려고 합니다. 1. type 선택자 html 문서의 태그 이름을 선택자로 사용할 수 있습니다. p태그 안의 글자들을 파란색으로 표시하는 속성을 부여해주는 예제로 설명하겠습니다. ~ ~ 머리가 좋아지는 음식 결과로는 머리가 좋아지는 음식 이 나옵니다. 2. id 선택자 html 문서의 요소 중 같은 요소라도 각기 다른 이름을 지정하여 따로 속성을 부여할 수 있습니다.유일한 이름을 붙여야 하고, c..

1. font-family 문자의 글꼴을 지정하는 속성입니다. 여러 단어이거나 한글 글꼴인 경우는 따옴표로 감싸고 여러 개의 글꼴을 쉼표로 구분하여, 지정한 글꼴이 없을 경우 그 다음 글꼴로 지정할 수 있습니다. font-family: '돋움', Dotum, Arial, Helvetica, Sans-serif ; 2. font-size, 단위의 고찰 문자의 글자 크기를 지정하는 속성입니다. 글자 크기는 명시하지 않을 경우 16px이 기본값입니다. css에서 유용하게 사용하는 단위에는 다음과 같은 것들이 있습니다. px 해상도에 따라 상대적으로 달라지는 기본 단위로서, 다음과 같이 표현합니다. font-size: 12px; % 부모 요소의 글자 크기를 100% 기준으로 계산한 % 단위로서, 다음과 같이 표..

01. flex layout flex layout은 요소들이 포함된 큰 박스에 flex를 선언하고, 안에 있는 요소들에게는 유연하게 배치하는 속성들을 부여하여 레이아웃을 잡는 것입니다. display: flex; display: -webkit-flex; display: -ms-flexbox; 위의 구문은 해당 요소에 flex로 레이아웃을 설계하고 선언한다는 뜻입니다. flex 지금은 float 세 개의 요소를 가로로 나열할 수 있습니다. flex로 구현한다면 다음과 같이 표현합니다. flex: 1; flex: 1;은 원래 flex: 1 1 0;의 줄인 표현입니다. 지금은 1 1 auto와도 같습니다. 또 1 1 100px과도 같습니다. 앞이 1이면 뒤가 뭐든 같은데, 이 세 값은 flex-grow, fl..

02. grid layout grid layout은 비교적 직관적이어서 다른 레이아웃보다 사전지식이 덜 필요합니다. 일단 원하는 레이이웃을 먼저 스케치라고 그것을 위해 필요한 속성을 추가하는 방식으로 설명해보겠습니다. 네 개짜리 박스를 마크업합니다. header sidemenu content footer 이 박스에 grid layout을 사용한다고 선언합니다. .wrap ( display: grid; ) 가로로 2칸 세로로 3칸 이므로 grid-template-columns에 두 개의 가로 크기를 차례로 지정하고 grid-template-rows 에는 위부터 아래까지 세 개의 세로 크기를 지정합니다. .wrap ( display: grid; grid-template-columns: 30% 70%; gri..

코딩으로 웹사이트를 만드는 설명을 해보겠습니다. figma로 웹사이트의 이미지 예제를 만들고 시작했습니다. 해당 이미지를 실질적인 사이트로 만들어 나가는 과정입니다. 우선, 코드를 보여드리고 설명하겠습니다. 해외 여행 여행지에서 볼 거리들과 머무를 숙소 등을 소개합니다. 여행지에서 가장 중요한 것들을 빼먹을 수는 없죠. 그 나라가 자랑하는 관광지를 소개합니다. 광장 쇼핑과 거리 구경을 할 수 있는 쇼핑몰의 광장을 소개합니다. 장인들의 전통이 녹아 있는 가게들부터 명품을 살 수 있는 거리까지 전부 놓칠 순 없죠. 전통과 문화를 즐겨보세요. 자세히 보기 거리 축제 거리에서 시간마다 마차를 몰고 소공연을 펼치고 있습니다. 작은 축제이지만 그곳이 아니면 볼 수 없는 기회를 놓치지 마세요. 어디에서 사진을 찍든 ..

지난 번에 한 웹사이트 카드 유형 만들기에 이어서 이번에는 이미지 유형을 만들어 봤습니다. 마찬가지로, figma로 미리 사이트의 이미지 예제를 만들어 봤습니다. 설명은 body부분과 head에 입력한 style부분으로 나눠서 하겠습니다. body body부분의 코드입니다. 해외 여행 가고 싶은 여행지를 소개합니다. 이탈리아 해외 여행이 생각나요? 이탈리아를 소개합니다. 자세히 보기 이집트 해외여행 가고 싶지 않나요? 이집트를 소개합니다. 자세히 보기 큰 틀부터 그 안에 들어있는 요소들은 큰 제목 문장 이미지 넣을 공간 이미지 위에 넣을 큰 제목 이미지 위에 넣을 문장 자세히 보기 버튼 이미지 넣을 공간 이미지 위에 넣을 큰 제목 이미지 위에 넣을 문장 자세히 보기 버튼 이런 모양입니다. 가장 큰 틀은 ..

이번에는 figma로 만든 다음의 이미지/텍스트 유형을 코딩으로 만들어 보겠습니다. 간략한 설명: 보이는 것처럼 이번에는 사이트를 크게 세 부분으로 나눌 수 있습니다. 글이 써있는 부분(article class="desc"), 음식 사진(article class="food"), 기념품 사진(article class="souvenir")으로 나누어서 만들었습니다. 이제 body와 style을 나눠서 세부적인 설명을 하겠습니다. body NOTICE 음식점과 기념품 가게 고르는 Tip 맛있는 음식을 맛보고 싶은 마음은 누구나 있습니다. 그리고 기념품을 사서 보관하거나 선물하는 일도 많죠. 오소 부코 프로슈토 리볼리타 살팀보카 쿠샤리 에이시 하맘 토르시 마비스 치약 낙타 인형 시샤 도구 지난 번에 만들었던 사..

figma로 만든 다음의 슬라이드 유형을 코딩으로 만들어 보겠습니다. 간략한 설명: 사진이 전체 배경이고, 사진 위에 글자와 버튼을 올렸습니다. 글자와 버튼들이 잘 보일 수 있도록 사진을 조금 어둡게 했습니다. EVENT 버튼과 자세히 보기, 상담 신청 버튼들과 페이지를 넘기는 화살표, 그리고 페이지가 넘어가는 것을 알 수 있도록 밑에 표시를 해줬습니다. 이제 body와 style을 나눠서 세부적인 설명을 하겠습니다. body 메인 슬라이드 영역 event 이탈리아로 떠나는 여행 이탈리아로 떠나는 여행이 궁금하시지 않으세요? 지금부터 이탈리아로 떠나는 여행이 얼마나 즐거울지 소개합니다. 자세히 보기 상담 신청 이전 이미지 다음 이미지 첫번째 이미지 두번째 이미지 세번째 이미지 재생 정지 각 부분들을 나눠..

figma로 만든 다음의 텍스 유형을 코딩으로 만들어 보겠습니다. 링크: 텍스트 유형 (daanbi1345.github.io) 간략한 설명: 마우스 오버 효과를 넣어서 만들어 봤습니다. 롤오버 또는 Hover란 이미지, 텍스트, 버튼 등에 마우스 포인터가 올라갔을 때 발동되는 일종의 전환효과를 말합니다. 이 기능은 디자인 모드 곳곳에서 확인할 수 있습니다. 각 카테고리 창 위에 마우스를 올리면 보기와 같이 회색으로 창이 변하고, 더보기 버튼에 마우스를 올리면 + 버튼이 돌아가는 효과입니다. 그 외에는 아이콘을 만들고 이전에 했던 것처럼 텍스트를 넣고 위치를 설정했습니다. 이제 body와 style을 나눠서 세부적인 설명을 하겠습니다. body Notice 해외 여행 여행 가방 꾸리기 여행의 가장 기본은 ..

설명: 이미 만들어 놓은 사이트 부분들을 종합해서 하나의 사이트로 만들어 보았습니다. html 과 css 를 나눠서 만들어 봤습니다. html 은 body 부분을 설명하고, css 는 이전에 작업했던 내용과 같기 때문에 따로 보여드리지는 않겠습니다. css 는 반응형을 고려한 media query 부분을 더했을 뿐, 이전에 style sheet 에 입력한 내용과 같지만, 공통적으로 들어간 내용들 예를 들어서, 글씨체나 여백 등의 부분들은 모아서 따로 정리했습니다. css 는 이 부분들을 common, font, 그리고 reset 으로 나눠서 설명하겠습니다. html 의 body 헤더 영역 바로가기 슬라이드 영역 바로가기 이미지 영역 바로가기 이미지/텍스트 영역 바로가기 카드 영역 바로가기 베너 영역 바로..

MySQL이란? MySQL은 오픈 소스 관계형 데이터베이스 관리 시스템(RDBMS)입니다. 사용자, 다중 스레드 RDBMS로서, 데이터의 안정성과 보안성을 제공합니다. 대부분의 운영 체제에서 작동하며, 웹 애플리케이션 개발, 데이터 분석, 빅 데이터, 클라우드 기반 애플리케이션 등에 많이 사용됩니다. SQL(Structured Query Language)을 사용하여 데이터를 관리합니다. SQL은 데이터베이스에 저장된 데이터를 조작하기 위한 표준적인 언어로서, 데이터를 검색, 삽입, 업데이트, 삭제하는데 사용됩니다. MySQL은 이러한 SQL 문을 이용하여 데이터를 쿼리하고, 데이터의 무결성을 유지하며, 데이터베이스를 관리합니다. MySQL은 사용이 간편하며, 대용량 데이터베이스를 처리할 수 있는 고성능 ..

오늘 배운 배용들이 많아서 외우기 힘들다. 그래서 정리해보겠다. 우선, 선언적 함수와 익명 함수 그리고 매개변수 함수와 리턴값 함수에 대해서 써보겠다. 선언적 함수 function func(){ document.write("함수가 실행되었습니다.1") } func(); 선언적 화살표 함수 func = () => { document.write("함수가 실행되었습니다.5") } func(); 익명 함수 const func = function(){ document.write("함수가 실행되었습니다.2") } func(); 익명 화살표 함수 const func = () => { document.write("함수가 실행되었습니다.6") } func(); 매개변수 함수 function func(str){ docum..

See the Pen Untitled by choeunkyoung (@choeunkyoung) on CodePen.

자바스크립트 테스트05 재시험을 오답 정리해봤다. 01. 다음의 결괏값을 작성하시오. { const str = "javascript refercence"; str.indexOf("javascript"); str.indexOf("javascripts"); str.indexOf("j"); str.indexOf("J"); str.indexOf("a"); str.indexOf("ja"); str.indexOf("jv"); str.indexOf("refercence"); str.indexOf("r"); str.indexOf("re"); str.indexOf("javascript", 0); str.indexOf("javascript", 1); str.indexOf("refercence", 0); str.indexO..

일러스트레이터를 처음으로 사용해봤다. 익숙해지려면 많이 연습해보는 수 밖에 없는 것 같다. 라인을 따라서 그려보는데 엉성한 라인이 나온 결과물을 보니, 웃음이 절로 나왔다. 어렸을 때 그림판에서 그려보던 것과 비슷한 모양이 웃겨서 웃었다. 일러스트레이터에 원하는 이미지를 넣고서 새로운 파일을 A4 용지 사이즈로 열어서 작업을 했다. pen tool 로 라인을 따고, live paint 로 색을 입히고, 명암을 넣었다. 토끼 따라 그리기 아빠 토끼와 애기 토끼인 것 같은 그림이다. 라인도 엉성하고 굵기도 엉성하다. 애기 토끼의 얼굴이 찌그러져서 덜 귀여워졌다. 색과 명암을 입혀봤는데, 애기 토끼는 하다가 도중에 실수를 해서 명암이 제대로 들어가지 않았다. 아쉬웠지만 다시 생각해보니 라인부터 엉성했기에 결과..

2011년 4월 17일 필기 기출문제 1. 현재 수행 중에 있는 명령어 코드(Code)를 저장하고 있는 임시 저장 장치는? ① 인덱스 레지스터(Index Register) ② 명령 레지스터(Instruction Register) ③ 누산기(Accumulator) ④ 메모리 레지스터(Memory Register) 답: 2 가. 인덱스 레지스터(Index Register) : 특정한 값을 주소와 계산하여 새로운 주소를 만드는 방법 나. 명령 레지스터(Instruction Register) : 현재 실행중인 명령 을 기억하는 레지스터 다..누산기(Accumulator) : 연산된 결과를 기억하는 레지스터 라. 메모리 레지스터(Memory Register) :메모리 레지스터는 실제는 MAR과 MBR를 말하는 것..

2015년 7월 19일 필기 기출문제입니다. 1. 색의 3속성 중 사람의 눈이 가장 예민하고 강하게 반응하는 대비는? ❶ 명도대비 ② 색상대비 ③ 보색대비 ④ 채도대비 해설: 명도대비:명도가 다른 두 색의 영향에 의해 명도차가 다르게 지각되는 현상. 주위 색에 따라 더욱 밝게 느껴지거나 더욱 어둡게 느껴짐. ex) 흰바탕에 회색 점/검은바탕에 회색 점동시대비 중 가장 예민하게 작용함. 2. 색의 주목성에 대한 설명으로 옳지 않은 것은? ① 명시도가 높으면 색의 주목성이 높다. ② 채도 차이가 클수록 주목성이 높다. ③ 빨강은 초록보다 주목성이 높다. ❹ 명도와 채도가 낮은 색이 주목성이 높다. 해설: 명도와 채도가 낮으면 주목성도 함께 낮아진다. 3. 디자인의 원리 중 비례에 대한 설명이 잘못된 것은? ..

2011년 10월 9일 필기 기출문제입니다. 1. 입출력 조작의 시간과 중앙처리장치의 처리시간과의 불균형 을 보완하는 것은? ❶ 채널장치 ② 제어장치 ③ 터미널장치 ④ 콘솔장치 해설: 채중입 : 채널은 중앙처리장치와 입출력장치 사이에 존재하며 서로의 속도 차이를 보완합니다. 2. 명령어 형식(instruction format)에서 첫 번째 바이트에 기억 되는 것은? ① operand ② length ③ question mark ❹ opcode 해설: 명령어의 구성명령어 코드부 + 주소부 (한글), OP-code + Operand (영문) 3. 반가산기(Half-Adder)의 논리회로도에서 자리올림이 발생하 는 회로는? ① OR ② NOT ③ ExclusiveOR ❹ AND 해설: 반가산기 구성: S = ..

function getRandomQuote() { fetch("https://dummyjson.com/quotes") .then(response => response.json()) .then(quotes => { const randomIndex = Math.floor(Math.random() * quotes.quotes.length); const quoteElement = document.createElement("p"); const authorElement = document.createElement("p"); quoteElement.textContent = quotes.quotes[randomIndex].quote; authorElement.textContent = quotes.quotes[rando..

설명: 자동으로 복권 번호를 생성해 주는 코드를 짜려고 하는데, 번호가 중복되면 안되므로 set 을 이용하고, 숫자는 1부터 45까지의 범위 안에 있어야 하며, 6개의 무작위 수를 추출하는 코드를 짜봤습니다. code 로또 번호 생성기 click 🥖style font-family 로 가져온 글씨체를 적용하고, 글씨의 크기와 위치를 설정했습니다. 배경색과 글씨색도 설정하고, 클릭 버튼의 크기와 위치도 설정했습니다. 박스 안에 들어있는 글자의 세로 위치를 정하고 싶을 때에는 몇 가지의 방법이 있습니다. 1줄 텍스트 : 박스 높이와 line-height 의 줄 높이를 같게 설정하기 3줄 텍스트 : padding-top 을 설정하고 그 값만큼 박스의 높이를 빼서 재설정하기 3줄 텍스트 : box-sizing 를..

설명: quiz 1 번의 배경화면을 사진을 넣어서 10초마다 명언과 함께 바뀌도록 설정했습니다. body 의 구조는 동일하기 때문에 따로 설명하지 않겠습니다. style 과 script 를 나눠서 설명하겠습니다. style @font-face { font-family: 'UhBeemysen'; src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_five@.2.0/UhBeemysen.woff') format('woff'); font-weight: normal; font-style: normal; } * { margin: 0; padding: 0; } body { background-repeat: no-repeat; background-size: c..

JS 01. 다음의 결괏값을 작성하시오. let i = 0; let sum = 0; while(i < 10){ i = i+1; if( i % 3 == 0) sum -= i; if( i % 3 == 1) sum += i; if( i % 3 == 2) sum *= i } console.log(sum) 02. 다음의 결괏값을 작성하시오. let num = [10, 20, 30, 40, 50]; let i, max, min; max = min = num[0]; for(i=0; i max) max = num[i]; if(num[i] < min) min = num[i]; } console.log(max, min); 03. 다음의 결괏값을 작성하시오. function func(begin, diff, n){ cnt =..

Figma 로 구현한 사이트 디자인 설명: figma 로 팀프로젝트 웹사이트의 디자인을 만들어봤습다. 스크롤을 내리면서 고정되어 있는 헤더나 설명이 쓰여있는 부분은 구현해내지 못했습니다. 그 외에도 다른 페이지에 나오는 모습은 여기에 담겨있지 않지만 비슷한 디자인에 기능을 추가할 생각입니다. 참고한 사이트 목록 https://www.adidas.co.kr/ adidas Official Website | adidas KR Shop for adidas shoes, clothing and collections, adidas Originals, Running, Football, Training and more on the official adidas KR website. www.adidas.co.kr https..

설명: 게시판 검색 결과 화면입니다. 코드를 나눠서 설명하겠습니다. PHP

설명: 게시판 페이지에서 페이지를 넘길 때 현재 페이지를 나타내도록 하는 설정과 처음으로 넘기는 버튼, 이전으로 넘기는 버튼, 다음으로 넘기는 버튼 그리고 마지막으로 넘기는 버튼을 설정했습니다. 추가적으로 게시글이 없을 때 페이지를 넘기는 버튼들을 사라지도록 하는 설정도 했습니다. board.php

설명: html 로 목표로 하는 페이지를 만든 후에 php 로 만들었습니다. 게시판 페이지를 만드는 과정에 있기 때문에 오늘 수정한 부분을 설명하겠습니다. 게시글을 보는 설정과 게시판을 삭제하는 설정에 대해서 설명하겠습니다. boardView.php

설명: php 를 이용해서 사이트를 만들어 봤습니다. PHP는 서버 측에서 실행되는 스크립트 언어로, 동적 웹 사이트 및 웹 애플리케이션 개발에 사용됩니다. PHP는 HTML에 내장되어 있을 수 있으며, 데이터베이스와 상호 작용하고, 사용자 입력 처리 및 파일 업로드와 같은 작업을 수행할 수 있습니다. PHP는 오픈 소스이며, 많은 개발자들이 커뮤니티를 통해 개발에 참여하고 있습니다. PHP는 다양한 운영 체제에서 사용할 수 있으며, 웹 서버에서 지원되는 대부분의 프로그래밍 언어와 함께 사용됩니다. PHP는 다양한 웹 프로그래밍 기술을 지원합니다. 예를 들어, PHP는 데이터베이스와의 상호 작용에 사용되는 MySQL, PostgreSQL 및 Oracle과 같은 데이터베이스를 지원합니다. 또한, PHP는 ..