본문 바로가기

코딩해보자 :9156

SITE | 검색유형 | includes( ) SEARCH 효과를 만들어보자 ! 문자열 메서드 includes( )을 활용하여 검색 페이지를 만들어봅시다. 원본 소스 보기 script를 살펴봅시다 ! const searchInfo = document.querySelector(".search__info .num") searchInfo.innerHTML = searchList.length > 전체 CSS 속성 갯수를 script로 추가시켜줍니다. 사용자가 입력한 키워드를 searchBox에 저장 ↓ dataset.name으로 css 속성의 모든 값을 불러옴 ↓ 값 중에서 사용자가 입력한 값이 있으면 숨김 해제 / 없으면 숨김 추가 2022. 8. 17.
SITE | imageType #2 SITE를 만들어봅시다 ! 우리가 평소에 자주 볼 수 있는 사이트를 생각해보면 수많은 레이아웃과 유형들로 이루어져 있음을 알 수 있습니다. 오늘은 그 중에서도 이미지 유형 두번째 방법을 배워봅시다. 1. CSS 살펴보기 #1. transition-timing-function 속성 속성값 의미 linear 전환 효과가 처음부터 끝까지 일정한 속도로 진행 ease 기본값; 전환 효과가 천천히 시작되고 빨라졌다가 다시 느려짐 ease-in 전환 효과가 천천히 시작 ease-out 전환 효과가 천천히 끝남 ease-in-out 전환 효과가 천천히 시작되어 천천히 끝남 cubic-bezier(n,n,n,n) 전환 효과가 사용자가 정의한 cubic-bezier 함수에 따라 진행 .image:hover .image_.. 2022. 8. 17.
SITE | imageType #1 SITE를 만들어봅시다 ! 우리가 평소에 자주 볼 수 있는 사이트를 생각해보면 수많은 레이아웃과 유형들로 이루어져 있음을 알 수 있습니다. 오늘은 그 중에서도 이미지 유형 첫번째 방법을 배워봅시다. 1. CSS 살펴보기 #1. background: url(img/22.jpg) no-repeat center; 배경에 사진을 넣고 반복없이 가운데 정렬을 해줍니다. 2. HTML 살펴보기 운동하자 운동 👟 운동의 시작, 스트레칭부터 다양한 스포츠의 종류를 알아봅시다. 운동하자 운동 운동의 시작, 스트레칭부터 다양한 스포츠의 종류를 알아봅시다. 운동의 시작, 스트레칭부터 다양한 스포츠의 종류를 알아봅시다. 운동의 시작, 스트레칭부터 다양한 스포츠의 종류를 알아봅시다. 자세히 보기 운동하자 운동 운동의 시작, 스.. 2022. 8. 17.
SEARCH | 검색 유형01 SEARCH 효과를 만들어보자 ! SEARCH 효과를 만들어 HTML/CSS/JAVASCRIPT 검색 페이지를 만들어봅시다. 원본 소스 보기 script를 살펴봅시다 ! addEventListener("keyup") | 이벤트 메서드 중 keyup은 키를 눌렀다가 뗐을 때 이벤트가 실행됩니다. indexOf | 문자열 메서드인 indexOf는 문자열에서 특정 문자의 위치를 찾아 숫자로 반환시켜 줍니다. indexOf( )를 활용해 0(false)이 되는 값만 hide를 지워 원하는 값이 나타날 수 있도록 해줍니다. 2022. 8. 17.
JAVASCRIPT | 문자열 메서드 | indexOf( ) / lastIndexOf( ) 문자열 메서드(검색)에 대해 알아보자 ! 다양한 문자열 메서드 중 문자열에서 특정 문자의 위치를 찾고 숫자를 반환하는 indexOf() / lastIndexOf()에 대해 알아봅시다. 01. indexOf( ); "문자열".indexOf(검색값) "문자열".indexOf(검색값, 위치값) const str1 = "javascript reference" const currentstr1 = str1.indexOf("javascript"); //0(j가 0번째) const currentstr2 = str1.indexOf("reference"); //11(r이 11번째) const currentstr3 = str1.indexOf("j"); //0 const currentstr4 = str1.indexOf("a".. 2022. 8. 16.
JAVASCRIPT | 문자열 메서드 | slice( ), substring( ), substr( ) 문자열 메서드(변경)에 대해 알아보자 ! 다양한 문자열 메서드 중 문자열에서 원하는 값을 추출하여 문자열로 반환하는 slice(), substring(), substr()에 대해 알아봅시다. 01. slice( ); "문자열".slice(시작 위치) "문자열".slice(시작 위치, 끝나는 위치) //문자열을 배열처럼 생각하고 하나씩 부른다 //시작 위치의 값 < 끝나는 위치의 값 const str1 = "javascript reference"; const currentstr1 = str1.slice(0); //javascript reference const currentstr2 = str1.slice(1); //avascript reference const currentstr3 = str1.slice(.. 2022. 8. 16.
JAVASCRIPT | 정규식 표현 정규식 표현에 대해 알아보자 ! 정규 표현식(regular expression; regex)이란 특정한 규칙을 가진 문자열의 집합을 표현하는 데 사용하는 형식 언어입니다. 현재 많은 프로그래밍 언어, 텍스트 처리 프로그램, 고급 텍스트 편집기 등이 정규 표현식 기능을 제공하고 있습니다. 한눈에 확인해보는 정규표현식 객체 주요 패턴 패턴 설명 abc abc 문자열을 검색 /abc/는 'abc' [abc] a, b, c 중 문자 하나를 검색 /[abc]/는 'ad', 'bd', 'cd' [^abc] a, b, c를 제외한 문자 하나를 검색 /[^abc]d/는 'ed', 'fd', 'gd' [A-Z] 알파벳 대문자 문자를 검색 [a-z] 알파벳 소문자 문자를 검색 [0-9] 0-9까지의 숫자를 검색 . 하나의.. 2022. 8. 16.
HTML | 구조 요소 구조 관련 요소에는 어떤게 있을까? 반응형웹 MENU01 MENU02 MENU03 MENU04 MENU05 콘텐츠 그룹01 콘텐츠 그룹02 주요기사 광고 경기도 안산시 상록구 중앙동 012)345-6789 kkb75281@gmail.com COPYRIGHT All rights reserved. 원본 소스 보기 원본 사이트 보기 2022. 8. 15.
JAVASCRIPT | 내장 함수 내장 함수에 대해 알아보자 ! 내장 함수는 자바스크립트에 기본적으로 내장되어 있는 함수들을 말합니다. 그렇기 때문에 사용자가 별도로 정의하지 않고 호출만해서 사용하는 함수입니다. 01. 인코딩, 디코딩 함수 'http://icoxpublish.com/search?query=자바스크립트'와 같이 URL 주소에 쿼리 정보를 전송하여 데이터를 처리해야 되는 프로그램의 경우 한글과 같은 유니코드 문자가 포함되어 있으면 오류가 발생할 수 있습니다. 이 경우 인코딩 함수를 이용해 문자를 부호화시키고 이 문자를 다시 디코딩함수를 이용하여 원래 문자로 되돌릴 수 있습니다. 함수명 설명 encodeURIComponent( ) 영문, 숫자와 ( ) - _ . ~ * ! '을 제외한 문자를 인코딩 decodeURICompo.. 2022. 8. 15.
CSS | 미디어쿼리(media query) 미디어쿼리(media query)에 대해 알아봅시다 ! 다양한 기기에서 웹브라우징을 지원하게 되면서 화면의 해상도에 따라 컨텐츠를 유연하게 배치하는 것이 중요해지고 있습니다. 이러한 반응형 웹사이트를 만들기 위한 미디어쿼리에 대해 알아봅시다. [ ] 1000px 보다 넓은 해상도일 때에 style_pc.css를 연결한다는 뜻 [ @media ] @media all and (min-width: 1000px) { 모든 기기에서 해상도가 최소 1000px 인 경우 적용할 속성들 ... } 로딩 시 성능 저하가 일어나지 않도록 CSS 파일을 하나로 만들고 CSS 내부에서 조건에 따라 분기시키는 것이 일반적인 형태의 반응형 웹 CSS 입니다. all은 Media Type을 나타내며 and 전, 후에 띄어 씁니다... 2022. 8. 15.
CSS | 기본 문법 CSS 기본 문법에 대해 알아봅시다 ! CSS(Cascading Style Sheets)를 정의하는 방법으로는 내부 스타일시트, 외부 스타일시트, 인라인 스타일시트 등이 있습니다. 그 중 외부 스트일시트를 많이 사용하는 편이지만 간단한 작업은 내부 스타일시트를 활용할 수 있습니다. 인라인 스타일시트는 거의 사용하지 않지만, 가장 우선순위가 높아서 꼭 필요한 경우 편리하게 사용할 수 있습니다. [ 내부 스타일시트 ] CSS를 HTML 문서 안에 태그로 기재하여 HTML 문서 안에 CSS가 함께 저장되도록 하는 형태입니다. 우리를 기쁘게 하는 것들. * p { color: red;}의 의미는 p 태그 안의 글자 색상을 빨간색으로 설정하라는 뜻 [ 외부 스타일시트 ] 따로 저장한 스타일 속성을 HTML 문서에.. 2022. 8. 15.
JAVASCRIPT | 배열 객체 배열에 대해 알아보자 ! 배열 속성, 메서드에 대해 알아봅시다 ! 앞으로 내용이 더 추가 될 예정입니다 :D 01. 배열 속성 : length : 배열 길이 구하기 : 반환(숫자) 02. 배열 메서드 : join() : 배열 요소 문자열을 결합 : 반환(문자열) 03. 배열 메서드 : push() : 배열 마지막 요소에 추가 : 반환(숫자) 04. 배열 메서드 : pop() : 배열 마지막 요소를 삭제 : 반환(삭제된 요소) 01. 배열 속성 : length : 배열 길이 구하기 : 반환(숫자) length 속성은 배열의 길이를 구할 수 있습니다. 번호 기본값 메서드 리턴값 1 [100, 200, 300, 400, 500] length 5 2 ['a', 'b', 'c', 'd', 'f'] 5 3 [1, .. 2022. 8. 11.
SITE | cardType #3 SITE를 만들어봅시다 ! 이번에는 또 다른 형식의 카드 유형으로 사이트 구성을 만들어봅시다. 1. Figma 활용하기 큰 영역 안에 3개의 카드가 있는 형태 입니다. 카드만 있는 것이 아닌 각각을 구분하는 선과 소제목 표시, 프로필 등 디테일 요소가 추가 되었습니다. 2. CSS 살펴보기 3. HTML 살펴보기 건축의 세계 Architects 세상에서 제일 높은 빌딩은 어디에 위치해 있고 특징이 무엇일까 ? (TOP5를 통해 살펴보자) 세상에서 제일 높은 빌딩은 어디에 위치하고 있으며 누가 설계하였을까? 높게 짓기 위해 특별히 적용한 공법이 있는지 다같이 알아보기로 하자. 먼저 5위를 말해보자면... Arc_Building 9 minute ago Roma (서양 건축사) 로마네스크 시대의 특징과 건축의.. 2022. 8. 11.
CSS | 벡터(Vector)와 비트맵(Bitmap) 벡터(Vector)와 비트맵(Bitmap)에 대해 알아봅시다 ! 이미지 저장 포맷 종류인 벡터(Vector)와 비트맵(Bitmap)에 대해 알아보고 어떤 상황에 쓰면 적절할지 확인해봅시다. 벡터(Vector) 벡터는 점과 점을 연결해 수학적인 함수 관계로 이미지를 표현해 선과 면을 만들어 내는 것을 의미합니다. 점과 점이 연결되어 선이 되고, 선이 3개 이상 모이면 면을 만들 수 있습니다. 선은 두께와 색상, 곡률 값을 가지며 면은 색상 값을 가집니다. 이러한 점, 선, 면이 모여 벡터 그래픽을 구성하게 됩니다. #깨짐 현상 없음 벡터의 의미에서 볼 수 있듯이 수학적 좌표값으로 이루어져 있기 때문에 이미지를 줄이거나 늘렸을 때 깨지는 현상이 일어나지 않습니다. #적은 용량 픽셀로 구성되어 있는 비트맵보다.. 2022. 8. 10.
SITE | cardType #2 SITE를 만들어봅시다 ! 이번에는 또 다른 형식의 카드 유형으로 사이트 구성을 만들어봅시다. 1. Figma 활용하기 같은 디자인의 카드를 4개씩 총 8개 배열한 형태입니다. 먼저 공통적인 카드의 틀을 만들어 놓고 component 처리를 해서 배열해주면 혹여나 수정사항이 생긴다해도 하나를 수정하면 전체가 똑같이 반영되어 수정이 용이합니다. 2. CSS 살펴보기 3. HTML 살펴보기 계절별 추천 여행지 봄, 여름, 가을, 겨울 4계절별 각각에 맞는 여러 여행지와 추천 식당, 카페 등을 모아서 정리해보았습니다. 잘 참고하셔서 좋은 여행 되시길 바래요! lt;article class="card"> lt;img src="img/card_bg02_01.jpg" alt="봄 Spring"> lt;h3 clas.. 2022. 8. 10.
HTML | 웹 표준, 웹 접근성, 웹 호환성 웹 표준 / 웹 접근성 / 웹 호환성 웹 표준, 웹 접근성, 웹 호환성에 대해 차근차근 알아봅시다. 1. 웹 표준이란? 웹 표준이란 브라우저 종류 및 버전에 따른 기능 차이에 대하여 호환이 가능하도록 제시된 표준을 말합니다. 다른 기종 혹은 플랫폼에 따라 달리 구현되는 기술을 동일하게 구현하며, 어느 한쪽에 최적화되어 치우치지 않도록 공통요소를 사용하여 웹 페이지를 제작하는 기법입니다. 표준화 단체인 W3C(World Wide Consortium)가 권고한 표준안에 따라 웹사이트를 작성할 때 이용하는 HTML, CSS, JavaScript 등에 대한 규정을 담고 있습니다. 이러한 웹 표준의 궁극적인 목적은 웹사이트에 접속한 사용자(장애인, 노약자를 포함한)가 어떠한 운영체제나 브라우저를 사용하더라도 동일.. 2022. 8. 9.
SITE | cardType #1 SITE를 만들어봅시다 ! 우리가 평소에 자주 볼 수 있는 사이트를 생각해보면 수많은 레이아웃과 유형들로 이루어져 있음을 알 수 있습니다. 오늘은 그 중에서도 카드 유형 첫번째 방법을 배워봅시다. 1. Figma 활용하기 모든 사이트들은 각각의 레이아웃을 가지고 있습니다. 레이아웃이 잘 짜여 있어야 그에 맞춰 코딩하기가 편하기 때문에 오차가 없도록 만들어 주는 것이 중요합니다. 아래 참고 사진은 figma를 통해 frame에 layout grid - Columns 를 사용해주었습니다. 2. CSS 살펴보기 #1. .section > h2 { } 부모 바로 밑에 있는 자식에게만 적용하고 싶을 때는 스트레칭(Stretching)> >스트레칭은 쉽게 말해서 평상시 상태보다 근육의 길이를 늘려주는 것으로 근육의.. 2022. 8. 9.
QUIZ | 문제 만들기 | 방법 04 QUIZ를 만들어보자 ! QUIZ의 여러 형태 중 객관식(한문항) 형식으로 만들어봅시다. 원본 소스 보기 script를 살펴봅시다 ! 문제/보기 출력 | 함수는 실행문으로 여러 실행문을 모아 정리해 줄 수 있습니다. 보기 출력 | 4개가 있기 때문에 반복문을 사용하여 출력해줍니다. 정답 확인 | 사용자가 어떤 답을 선택했는지 확인 > 사용자가 선택한 답과 정답 일치 여부 확인 > 일치하면 정답표시/ 그렇지 않으면 오답과 해설표시 2022. 8. 8.
JAVASCRIPT | 요소 객체 요소 객체 요소를 제어하기 위해서는 요소 선택을 먼저 해야 합니다. 오늘은 요소를 직접 선택하는 메서드에 대해 알아봅시다. 요소를 직접 선택하는 메서드 메서드 설명 getElementByld( ) document.getElementByld('content')일 경우 HTML 요소 중 id 속성이 'content'인 요소를 선택합니다. getElementsByClassName( ) document.getElementsByClassName('menu')일 경우 HTML 요소 중 class명이 'menu'인 요소들을 선택합니다. getElementsByTagName( ) document.getElementsByTagName('ul')일 경우 HTML 요소 중 태그명이 'ul'인 요소들을 선택합니다. quert.. 2022. 8. 6.
JAVASCRIPT | 전역/지역변수 전역변수/지역변수 변수는 함수 블록{}을 기준으로 선언 위치에 따라 '전역변수'와 '지역변수'로 나뉩니다. 1) 전역변수_ 함수 블록{} 밖이나 안에서 자유롭게 사용 가능 2) 지역변수_ 함수 블록{} 내에서만 사용 가능 1. 변수 선언 위치 전역 변수 지역 변수 var 변수; function 함수() { } function 함수() { var 변수; } 예시 1-1/ var kor = 90; function getScore() { kor = 100; //전역변수 console.log(kor); //100 } getScore(); console.log(kor); //100 전역 변수 : 함수 블록{ } 안에 있는 kor 변수 >> getScore( ) 함수 출력 시, kor 변수 값 (90 => 100).. 2022. 8. 6.
QUIZ | 문제 만들기 | 방법 03 QUIZ를 만들어보자 ! QUIZ의 여러 형태 중 주관식(여러문항) 형식으로 만들어봅시다. 원본 소스 보기 script를 살펴봅시다 ! #1. forEach( )는 순서를 인식하기 때문에 괄호 안에 i만 쓰면 요소로 인식합니다. forEach(e, i)로 써야 index 값으로 인식 할 수 있습니다. #2. 버튼이 여러개일 경우 또한 여러개가 있다는 것을 알려주고 실행해야 됩니다. 버튼이 한개일 경우 quizConfirm.addEventListener("click", () => { 버튼이 여러개일 경우 quizConfirm.forEach((btn, num) => { btn.addEventListener("click", () => { 2022. 8. 6.
QUIZ | 문제 만들기 | 방법 02 QUIZ를 만들어보자 ! QUIZ의 여러 형태 중 주관식 답변 형식으로 만들어봅시다. 원본 소스 보기 script를 살펴봅시다 ! 속성값 의미 textContent innerText와 같은 기능으로 쓰이지만 띄어쓰기를 포함해 텍스트를 있는 그대로 읽는다는 점이 다릅니다. toLowerCase() 해당 문자열을 소문자로 변환시키는 속성입니다. trim() 문자열에 있는 공백을 없애주는 속성입니다. 2022. 8. 4.
QUIZ | 문제 만들기 | 방법 01 QUIZ를 만들어보자 ! QUIZ의 여러 형태 중 정답 확인하기 형식으로 만들어봅시다. 원본 소스 보기 _ script를 살펴봅시다 ! 속성값 의미 innerText Element 속성으로 사용자에게 보여지는 텍스트 값을 불러오는 속성입니다. addEventListener document의 특정요소에 event를 등록하는 속성으로 이번 퀴즈에서는 click 이벤트를 사용했습니다. El.classList.add 클래스를 추가하는 속성입니다. 2022. 8. 4.
layout | 레이아웃 예제5 #TYPE_5 앞서 배운 float/flex/gid 방식을 사용해 예제를 풀어봅시다. 색상과 치수는 아래 피그마를 참고해주세요 ! 1-1. float을 사용해서 만들어주세요 ! * { margin: 0; padding: 0; } #wrap { width: 100%; } #header { width: 100%; height: 100px; background-color: #EEEBE9; } .header { width: 100%; height: 100px; background-color: #D5CCC9; } #nav { width: 100%; height: 100px; background-color: #B9AAA5; } .nav { width: 100%; height: 100px; background-col.. 2022. 8. 2.
layout | 레이아웃 예제4 #TYPE_4 앞서 배운 float/flex/gid 방식을 사용해 예제를 풀어봅시다. 색상과 치수는 아래 피그마를 참고해주세요 ! 1-1. container를 사용해서 만들어주세요 ! * { 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:.. 2022. 8. 2.
layout | 레이아웃 예제3 #TYPE_3 앞서 배운 float/flex/gid 방식을 사용해 예제를 풀어봅시다. 색상과 치수는 아래 피그마를 참고해주세요 ! 1-1. float을 사용해서 만들어주세요 ! * { margin: 0; padding: 0; } body { background-color: #E1F5FE; } #wrap { width: 1200px; margin: 0 auto; } #header { height: 100px; background-color: #B3E5FC; } #nav { height: 100px; background-color: #81D4FA; } #main { } #aside { width: 30%; height: 780px; background-color: #4FC3F7; float: left; } .. 2022. 8. 2.
layout | 레이아웃 예제2 #TYPE_2 앞서 배운 float/flex/gid 방식을 사용해 예제를 풀어봅시다. 색상과 치수는 아래 피그마를 참고해주세요 ! 1-1. float을 사용해서 만들어주세요 ! * { margin: 0; padding: 0; } body { background-color: #E8F5E9; } #wrap { width: 1200px; margin: 0 auto; } #header { width: 100%; height: 100px; background-color: #C8E6C9; } #main { width: 100%; overflow: hidden; } #nav { width: 100%; height: 100px; background-color: #A5D6A7; } #aside { width: 25%; .. 2022. 8. 2.
layout | 레이아웃 예제1 Layout 레이아웃이란 이미지나 글 등을 화면에서 보기 좋게 배열하는 것을 말합니다. 이번 게시글에서는 layout을 만드는 3가지 방법을 알아보려고 합니다. 1. Float-based layout float의 사전적 의미는 '뜨다','떠돌다'이며 말 그대로 특정 요소를 뜨게 하도록 해주는 속성입니다. 플로팅 된 요소는 블럭 요소가 되며 display: inline-block;을 한 것과 같이 됩니다. 01. float: 속성값(value); 속성값 의미 left 요소를 왼쪽 방향으로 띄운다 right 요소를 오른쪽 방향으로 띄운다 none 기본값, 요소를 띄우지 않는다 02. 플로팅 해제 플롯의 원기능은 글씨와 이미지가 있을 때 정리해주기 위해 나온 속성으로 플로팅한 요소는 기본적인 문서의 배치에서 .. 2022. 8. 2.
JAVASCRIPT | 함수 함수 함수는 프로그램에서 반복적으로 사용되는 기능을 만들어 내기 위한 코드들의 집합입니다. 1) 사용자 정의 함수_ 필요한 기능을 사용자가 직접 정의해서 사용하는 함수 2) 내장 함수_ 자주 사용되는 기능들을 자바스크립트 내부적으로 제공해 주는 함수 01. 선언적 함수 함수를 정의하고 호출하는 일반적인 함수를 말합니다. function func(){ document.write("함수가 실행되었습니다.1") } func(); 결과보기 함수가 실행되었습니다.1 02. 익명 함수 함수의 형태를 가지고 있지만 이름은 갖고 있지 않은 함수힙니다. const func = function(){ document.write("함수가 실행되었습니다.2"); } func(); 결과보기 함수가 실행되었습니다.2 03. 매개변.. 2022. 7. 26.
UI/UX 콘셉트 기획 2022. 7. 26.

It's cording time

코딩 여기서 정리하고 배워보자구 :9

자바스크립트

JAVASCRIPT

자세히 보기
html

HTML

자세히 보기
css

CSS

자세히 보기
광고 준비중입니다.

티스토리툴바