본문 바로가기

Study137

블록 구조 / 인라인 구조 블록 레벨 요소와 인라인 요소 1. 블록 레벨 요소 블록 레벨 요소는 마크업을 할 때 줄이 바뀌는 특성을 가지고 있습니다. 블록 구조의 특징은 한 줄에 하나만 표현되는 것, 즉 가로로 정렬이 되지 않는다는 것입니다. 또한 영역을 포현하는 부분이기 때문에, 마진 값이나 패딩 값이 적용됩니다. 블록 구조는 블록 구조 안에 블록 구조와 인라인 구조 모두 올 수 있습니다. See the Pen block by HwangYoujin (@youJin2) on CodePen. 2. 인라인 요소 인라인 요소는 블록 레벨 요소처럼 행이 바뀌지 않고 한 줄로 출력됩니다. 한 줄에 여러개가 표현이 되며, 가로로 정렬이 됩니다. 영역은 텍스트 부분만 영역으로 존재하기 때문에, 패딩이나 마진이 적용되진 않습니다. 하지만 좌우에.. 2022. 8. 22.

02. 이미지 유형 - 3 이미지 유형 03 이미지 유형 레이아웃 사이트입니다. 이번 사이트는 flex로 작업했던 사이트와는 다르게 grid를 사용하였습니다. 원본 사이트 보기 원본 소스 보기 레이아웃 설정 figma로 그리드와 사이트의 레이아웃을 잡습니다. HTML html 소스입니다. 귀엽고 멋진 동물들 동물을 사랑합시다. 저는 동물을 정말 사랑합니다. 귀엽고 멋진 동물들을 만나보세요. 자연의 경이로움에 감탄하게 될 것입니다. 귀여운 앵무새 썬코뉴어는 정말 귀엽습니다. 호기심이 많고 사람을 좋아하는 종이기에 많은 사람들의 반려 앵무로 길러지고 있습니다. 너무 귀여워요 짱 페이스북 페이지이동 페이지이동 페이지이동 페이지이동 귀여운 여우 여우는 정말 귀엽습니다. 너무 귀여워서 눈물이 나요. 여우 유튜버가 있다는 걸 아시나요? 그거.. 2022. 8. 21.

Scss로 강아지 만들기 Scss Sass(SCSS)는 Syntactically Awesome StyleSheet의 약어이며 코드의 재활용성을 올리고, 가독성을 올리는 등 CSS에서 보이던 단점을 보완하고, 개발의 효율을 올리기 위해 등장한 CSS 전처리기 언어입니다. 예시 Pug와 Scss를 이용하여 강아지를 만들어봅시다. Pug와 Scss소스는 codepen을 참조해주세요. HTML 소스(Pug변환) CSS 소스 (Scss변환) body { display: flex; flex-direction: column; justify-content: center; align-items: center; } html, body { background: #FFE16E; width: 100%; height: 100%; margin: 0; pa.. 2022. 8. 18.

Scss Scss Sass(SCSS)는 Syntactically Awesome StyleSheet의 약어이며 코드의 재활용성을 올리고, 가독성을 올리는 등 CSS에서 보이던 단점을 보완하고, 개발의 효율을 올리기 위해 등장한 CSS 전처리기 언어입니다. 사용 이유 작업이 크고 고도화 될수록 CSS를 사용할 때 불편함이 생깁니다. 이에 SCSS와 Sass는 CSS 작업을 쉽게 해주며 가독성과 재사용성을 높여주어 유지보수가 쉬워지게 도와줍니다. 또한 Sass는 변수의 사용 조건문과 반복문 Import Nesting Mixin Extend/Inheritance 다음과 같은 추가 기능과 유용한 도구들을 제공합니다. CSS와 비교하였을 때 Scss는 1. CSS보다 심플한 표기법으로 CSS를 구조화하여 표현 가능. 2. .. 2022. 8. 18.

02. 이미지 유형 - 2 이미지 유형 2 이미지 유형 레이아웃 사이트입니다. html과 css로 작업하였습니다. 원본 사이트 보기 원본 소스 보기 레이아웃 설정 figma로 그리드와 사이트의 레이아웃을 잡습니다. HTML html 소스입니다. BEST 소품샵 다양한 소품샵을 가 본 사람이 뽑은 최고의 소품샵 BEST3 class="image__box"> 내가만든 기린키링 href="" class="more" title="자세히보기">자세히보기 class="image__box"> 자그마한 인테리어방 href="" class="more" title="자세히보기">자세히보기 class="image__box"> 오늘의 감성 href="" class="more" title="자세히보기">자세히보기 CSS css 소스입니다. figma로 .. 2022. 8. 18.

02. 이미지 유형 - 1 이미지 유형 1 이미지 유형 레이아웃 사이트입니다. html과 css로 작업하였습니다. 원본 사이트 보기 원본 소스 보기 레이아웃 설정 figma로 그리드와 사이트의 레이아웃을 잡습니다. HTML html 소스입니다. 다이어리 꾸미기 당신만의 멋진 기록장, 개성있는 다이어리를 만들어보세요! 당신의 기억들 기억으로 남기는 것도 좋은 방법이지만 기록으로 남기지 않은 기억은 금방 휘발되는 법이죠. 당신의 기억과 감정을 어딘가에 박제하세요. 훗날 당신의 추억을 읽고 기뻐할 당신의 얼굴을 상상하세요! 자세히 보기 당신의 추억을 당신의 감정을 시각적으로 표현하고 싶지 않으신가요? 스티커를 붙이세요. 그림을 그리세요. 당신의 추억을 장식하세요. 적절한 장식은 감정을 실감나게 표현해줍니다. 마음에 드는 스티커나 그림으.. 2022. 8. 18.

includes() 12. 문자열 메서드 : 검색 : includes() : 문자열 포함 여부 검색 문자열 포함 여부를 검색하여, 불린(true, false)을 반환합니다. "문자열".includes(검색값) "문자열".includes(검색값, 시작값) const str1 = "javascript reference"; const currentStr1 = str1.includes('javascript'); //true const currentStr2 = str1.includes('j'); //true const currentStr3 = str1.includes('b'); //false const currentStr4 = str1.includes('reference'); //true const currentStr5 = str1.. 2022. 8. 17.

padStart() / padEnd() 11. 문자열 메서드 : 변경 : padStart() / padEnd() : 문자열 추가 padStart() / padEnd() 메서드는 주어진 길이에 맞게 앞/뒤 문자열을 채우고, 새로운 문자열을 반환합니다. "문자열".padStart(길이) "문자열".padStart(길이, 문자열) const str1 = "456"; const currentStr1 = str1.padStart(1,"0"); //456 const currentStr2 = str1.padStart(2,"0"); //456 const currentStr3 = str1.padStart(3,"0"); //456 const currentStr4 = str1.padStart(4,"0"); //0456 const currentStr5 = str1.. 2022. 8. 17.

replace() / replaceAll() 10. 문자열 메서드 : 변경 : replace() / replaceAll() : 문자열 변경 replace()는 문자열을 부분 문자열로 구분하고 배열로 반환해줍니다. "문자열".replace(찾을 문자열, 변경할 문자열) "문자열".replace(정규식) "문자열".replace(정규식, 변경할 문자열) const str1 = "javascript reference"; const currentStr1 = str1.replace("javascript", "자바스크립트"); //자바스크립트 reference const currentStr2 = str1.replace("j", "J"); //자바스크립트 reference const currentStr3 = str1.replace("e", "E"); //jav.. 2022. 8. 17.

split() 09. 문자열 메서드 : 변경 : split() : 문자열에서 원하는 값을 추출 문자열에서 원하는 값을 추출하는 메서드입니다. "문자열".split(구분자); "문자열".split(정규식 표현); "문자열".split(구분자, 갯수); const str1 = "javascript reference"; const currentStr1 = str1.split(''); //[0: "j"1: "a"2: "v"3: "a"4: "s" 5: "c"6: "r"7: "i"8: "p"9: "t"10: " "11: "r"12: "e"13: "f"14: "e"15: "r"16: "e"17: "n"18: "c"19: "e"] const currentStr2 = str1.split(''); //['javascript', 'ref.. 2022. 8. 17.

trim() / trimStart() / trimEnd() 08. trim() / trimStart() / trimEnd() 문자열에서 공백을 제거하는 메서드입니다. 문자열 메서드 : 변경 : trim() : 문자열의 앞뒤 공백을 제거합니다 : 반환(문자열) 문자열 메서드 : 변경 : trimStart() : 문자열의 앞 공백을 제거합니다 : 반환(문자열) 문자열 메서드 : 변경 : trimEnd() : 문자열의 뒤 공백을 제거합니다 : 반환(문자열) 번호 기본값 메서드 리턴값 const str1 = " javascript "; const currentStr1 = str1.trim(); document.querySelector(".sample08_N1").innerHTML = "1"; document.querySelector(".sample08_Q1").inne.. 2022. 8. 17.

문자열 결합 / 템플릿 문자열 07. 문자열 : 문자열 결합 / 템플릿 문자열 문자열을 결합하는 방법과 템플릿 문자열 표시 방법입니다. 번호 기본값 메서드 리턴값 const str1 = "자바스크립트"; const str2 = "제이쿼리"; document.querySelector(".sample07_N1").innerHTML = "1"; document.querySelector(".sample07_Q1").innerHTML = "자바스크립트, 제이쿼리"; document.querySelector(".sample07_M1").innerHTML = "문자열(string) 결합"; document.querySelector(".sample07_P1").innerHTML = str1 + str2; //자바스크립트제이쿼리 const num1 .. 2022. 8. 17.

toUpperCase() / toLowerCase() 06. tooUpperCase() / toLowerCase() toUpperCase() : 문자열을 대문자로 변경합니다. toLowerCase() : 문자열을 소문자로 변경합니다. 번호 기본값 메서드 리턴값 const str1 = "javascript"; const currentStr1 = str1.toUpperCase(); document.querySelector(".sample06_N1").innerHTML = "1"; document.querySelector(".sample06_Q1").innerHTML = "javascript"; document.querySelector(".sample06_M1").innerHTML = "toUpperCase()"; document.querySelector(".s.. 2022. 8. 17.

2. 서치 이펙트 - 2 서치 이펙트 만들기2 javascript를 이용하여 서치 이펙트를 만들었습니다. 열심히 공부하세요! 서치 이펙트2 원본 소스 보기 자바스크립트 추후 추가 예정 //선택자 const searchBox = document.querySelector(".search__box input"); //검색 영역 const searchList = document.querySelectorAll(".search__list ul li"); //목록 리스트 const searchInfo = document.querySelector(".search__info .num") //전체 갯수 //속성 갯수 설정하기 // for(let i=1; i { const searchWord = searchBox.value; //사용자가 입력한 키.. 2022. 8. 17.

2. 서치 이펙트 -1 서치 이펙트 만들기1 indexOf()를 이용하여 서치 이펙트를 만들었습니다. 열심히 공부하세요! 서치 이펙트1 원본 소스 보기 자바스크립트 //선택자 const searchBox = document.querySelector(".search__box input"); //검색 영역 const searchList = document.querySelectorAll(".search__list ul li"); //목록 리스트 const searchInfo = document.querySelector(".search__info .num") //전체 갯수 구하기 searchInfo.textContent = searchList.length; //검색 영역 searchBox.addEventListener("keyup",.. 2022. 8. 17.

정규표현식 정규 표현식 정규 표현식, 또는 정규식은 문자열에서 특정 문자 조합을 찾기 위한 패턴입니다. 정규 표현식 객체 주요 메서드 속성 값 속성 설명 test() 정규 표현식과 일치하는 문자열이 있으면 true, 없으면 false를 반환합니다. var reg =/Javascript/; console.log(reg.test('Javascript')); //true console.log(reg.test('script')); //false match() 정규표현식과 일치하는 문자열을 배열로 만듭니다. 일치하는 문자열이 없으면 null을 반환합니다. var reg =/Javascript/; str = 'Java script' console.log(str.match('reg')); //null 정규 표현식 객체 플래그 .. 2022. 8. 17.

구조 관련 요소 구조 관련 요소 h1 반응형웹 header nav MENU01 MENU02 MENU03 MENU04 MENU05 section 콘텐츠 그룹 01 section 콘텐츠 그룹 02 article 주요 기사 aside 광고 footer address 경기도 부천시 오정구 삼정동 032)674-5685 icoxpub@naver.com p COPYRIGHT ⓒALL rights reserved. CSS 소스 /* fonts */ @import url('https://webfontworld.github.io/gmarket/GmarketSans.css'); /* 리셋 */ /* 여백 초기화 */ * { margin: 0 auto; padding: 0; font-family: 'GmarketSans'; } /* 링크 .. 2022. 8. 17.

slice() / substring() / substr() 1. 문자열 메서드 : 변경 : slice() : 문자열에서 원하는 값을 추출 slice() : 문자열에서 원하는 값을 추출합니다. //slice(시작 위치) //slice(시작 위치, 끝나는 위치)//끝나는 위치 값이 시작 위치 값보다 커야함 //substr(시작위치) //substr(시작위치, 길이) const str1 = "javascript reference"; const currentStr1 = str1.slice(0); //javascript reference const currentStr2 = str1.slice(1); //avascript reference const currentStr3 = str1.slice(2); //vascript reference const currentStr4 =.. 2022. 8. 17.

indexOf()/lastIndexOf() indexOf() indexOf() 메서드는 배열에서 지정된 요소를 찾을 수 있는 첫 번째 인덱스를 반환하고 존재하지 않으면 -1을 반환합니다. indexOf()는 처음 발견되는 문자열에 대한 index를 반환하고, lastIndexOf는 마지막 문자열의 index를 반환합니다. "문자열".indexOf(검색값) "문자열".indexOf(검색값, 위치값) "문자열".lastIndexOf(검색값) "문자열".lastIndexOf(검색값, 위치값) const str1 = "javascript reference"; const currentStr1 = str1.indexOf('javascript'); //0 const currentStr2 = str1.indexOf('reference'); //11 const .. 2022. 8. 17.

객관식 유형 여러문제 객관식 여러문제 원본 소스 보기 자바스크립트 const quizWrap = document.querySelector(".quiz__wrap"); const quizScore = 0; const quizConfirm = document.querySelector(".quiz__confirm .check") //문제 출력 const updateQuiz = () => { const exam = []; quizInfo.forEach((question, number) => { exam.push(` ${question.answerType} ${question.answerNum}. ${question.answerAsk} 정답입니다! 틀렸습니다! ${question.answerChoice[1]} ${question.an.. 2022. 8. 16.

미디어 쿼리 미디어쿼리 뷰포트의 해상도에 따라 CSS를 분기시키는 미디어 쿼리는 반응형 프로젝트에서 반드시 필요한 기법입니다. 1. 최소 가로폭이 1000px보다 넓은 해상도일 때 style_pc.css를 연결한다는 뜻입니다. 크롬 브라우저에서 개발자 도구를 열고 Toggle device Toolbar를 누르면 기기마다의 해상도를 확인할 수 있고 기기 모델도 추가 가능합니다. 또한 다음 트로이 (http://troy.labs.daum.net/) 에서는 기기별 해상도를 제공하고 실제 작동 화면을 확인할 수도 있습니다. 모바일 기기 가로 세로 iPhone X 375 812 iPhone 6, 7, 8 375 667 iPhone 6, 7, 8 plus 414 736 iPhone 5 32.. 2022. 8. 16.

CSS 기본 규칙 기본 규칙 CSS를 다루기 위해서는 기초적인 특징과 기본 문법이 있습니다. 가장 기본이기 때문에 이 부분을 숙지하고 CSS를 공부하세요! CSS란 CSS는 Cascading Style Sheets의 약자로 HTML 요소들이 각종 미디어에서 어떻게 보이는가를 정의하는 데 사용되는 스타일 시트 언어입니다. HTML이 정보를 표현한다면 CSS는 HTML문서를 시작적으로 이쁘게 꾸며주는 역할을 합니다. CSS를 정의하는 방법으로는 내부 스타일시트, 외부 스타일시트, 인라인 스타일시트 등이 있습니다. 1. 내부 스타일시트 CSS를 HTML 문서 안에 태그로 기재하여 HTML문서 안에 CSS가 함께 저장되도록 하는 형태입니다. 우리를 기쁘게 하는 것들 우리를 기쁘게 하는 것들. 2. 외부 스타일시트 스타일 속성들을.. 2022. 8. 15.

내장함수 내장 함수 내장 함수는 자바스크립트에 기본적으로 내장되어 있는 함수들을 말합니다. 인코딩, 디코딩 함수 URL주소에 쿼리 정보를 전송하여 데이터를 처리해야 하는 경우, 유니코드 문자가 포함되어 있으면 오류가 발생할 수 있습니다. 때문에 인코딩 함수를 이용하여 문자를 부호화 시키고 부호화된 문자를 다시 디코딩 함수를 이용하여 원래 문자로 되돌릴 수 있습니다. 함수명 설명 encodeURIComponent() 영문, 숫자와 ( ) - _ . ~ * ! ' 을 제외한 문자를 인코딩합니다. decodeURIComponent encodeURIComponent()의 디코딩 함수 숫자, 유/무한 값 판별 함수 함수명 설명 isNaN() 숫자인지 아닌지를 판별하는 함수입니다. 숫자이면 false를 반환해 주고 숫자가 .. 2022. 8. 15.

배열 관련 메서드 배열 관련 메서드 01. 배열 메서드 : join() : 배열 요소 문자열을 결합 :반환(문자열) length 속성은 배열의 길이를 구할 수 있다. 번호 기본값 메서드 리턴값 const arrNum = [100, 200, 300, 400, 500]; const text1 = arrNum.join(''); const text2 = arrNum.join(' '); const text3 = arrNum.join('★'); const text4 = arrNum.join('-'); 03. 배열 메서드 : push() / pop() push() 메서드는 배열 마지막 요소에 추가하고, pop() 메서드는 배열 마지막 요소를 삭제한다. 번호 기본값 메서드 리턴값 결과값 const arrNum = [100, 200, 3.. 2022. 8. 11.

03. 카드 유형 - 3 카드유형 3 카드 유형 레이아웃 사이트입니다. html과 css로 작업하였습니다. 원본 사이트 보기 원본 소스 보기 레이아웃 설정 figma로 그리드와 사이트의 레이아웃을 잡습니다. HTML html 소스입니다. 다이어리의 세계 Write 손글씨를 이용하여 당신의 다이어리를 예쁘게 꾸며보세요! 손글씨를 이용하여 당신의 다이어리를 예쁘게 꾸며보세요! 이미지가 없어도 멋지게 다이어리를 꾸밀 수 있답니다. 그림을 그리지 못한다고 해도, 보여줄 이미지가 없다고 해도 겁먹지 말고 다이어리 꾸미기를 시도하세요 예쁘고 멋진 다이어리로 다른사람들의 마음을 사로잡아요 Writelove 9 Resources Write 손글씨를 이용하여 당신의 다이어리를 예쁘게 꾸며보세요! 손글씨를 이용하여 당신의 다이어리를 예쁘게 꾸며보.. 2022. 8. 11.

01. 비트맵과 벡터 디지털 이미지(Digital Images) 디지털 이미지(Digital Image) 또는 "이미지"라고 불리는 용어는 디지털 카메라를 이용하여 현실세계의 사물을 촬영하거나 스캐너를 이용하여 사진이나 그림을 디지털 형태로 받아들인 것을 말합니다. 이미지를 디지털화 하는 방식은 크게 비트맵 방식과 벡터 방식으로 나뉩니다. Pixel 픽셀이란 Picture(그림) + Element(원소)의 합성어로서 화소라고도 하는 화면을 구성하는 가장 기본이 되는 단위입니다. 이 점 하나에 해당 색의 정보(빨간색, 녹색, 파란색, 투명도 등)가 담겨져 있으며, 이는 곧 그림의 용량과 직결됩니다. 비트맵(Bitmap) 방식 비트맵 방식은 '비트의 지도(Map of bits)'라는 뜻으로, 각 픽셀에 저장된 비트 정보가 집합된.. 2022. 8. 10.

02. 카드 유형-2 카드유형2 카드 유형 레이아웃 사이트입니다. html과 css로 작업하였습니다. 원본 사이트 보기 원본 소스 보기 레이아웃 설정 figma로 그리드와 사이트의 레이아웃을 잡습니다. HTML html 소스입니다. 멋진 앵무새를 보세요🦜 화려한 앵무새의 광기, 폭력성, 그리고 귀여움을 알리려고 합니다. 사람들이 뭐라고 할 때도 있지만 그런 부분까지 정말 귀여운걸요 예쁜 우리 앵무새들의 매력에 빠져보세요. 청금강청금강청금강청금강청금강 멋진 앵무새들 생활을 보세요. 청금강은 사람들이 알고 있는 대표적인 앵무새입니다. 화려한 그 모습을 보면 모두 앵무와 사랑에 빠지게 될 것입니다. 더보기 목도리앵무 멋진 앵무새들 생활을 보세요. 청금강은 사람들이 알고 있는 대표적인 앵무새입니다. 화려한 그 모습을 보면 모두 앵무.. 2022. 8. 10.

01. 카드 유형-1 카드유형 카드 유형 레이아웃 사이트입니다. html과 css로 작업하였습니다. 원본 사이트 보기 원본 소스 보기 레이아웃 설정 figma로 그리드와 사이트의 레이아웃을 잡습니다. HTML html 소스입니다. 다이어리 꾸미기 당신만의 멋진 기록장, 개성있는 다이어리를 만들어보세요! 멋진 글을 적어보세요. 어떠한 글이 멋진 글이라고 정확히 정할 수는 없습니다만 당신이 쓰는 글이라면 어떤 글이든 멋질 거예요! 연필을 들고 종이에 적어볼까요? 더 자세히 보기 당신의 추억을 기록하세요 기억으로 남기는 것도 좋은 방법이지만 기록으로 남기지 않은 기억은 금방 휘발되는 법이죠. 당신의 기억과 감정을 어딘가에 박제하세요. 더 자세히 보기 당신의 추억을 장식하세요 당신의 감정을 시각적으로 표현하고 싶지 않으신가요? 스티.. 2022. 8. 9.

웹 접근성/웹 호환성 웹 접근성(Web Accessibility) 장애인, 고령자 등 모든 사용자가 어떠한 기술이나 환경에서도 전문적인 능력 없이 웹사이트에서 제공하는 모든 정보를 동등하게 접근하고 이해할 수 있는 권리입니다. 웹 접근성 준수 이유 장애인, 고령자 등을 포함한 모든 사람들이 웹에서 원하는 정보들을 자유롭게 접근 하고 이용할 수 있습니다. 또한 '08년 4월 11일부터 시행된 ‘장애인차별금지 및 권리구제 등에 관한 법률’ 및 동법 시행령 등 관련 규정을 준수할 수 있게 됩니다. 웹 표준(Web Standard) 웹 표준이란 브라우저 종류 및 버전에 따른 기능 차이에 대하여 호환이 가능하도록 제시된 표준입니다. 다른 기종 혹은 플랫폼에 따라 달리 구현되는 기술을 동일하게 구현함과 동시에 어느 한쪽에 최적화되어 치.. 2022. 8. 9.

퀴즈 이펙트 - 객관식 유형 객관식 유형 원본 소스 보기 자바스크립트 1. 선택자를 설정합니다. 2. 문제 정보 데이터를 저장합니다. 2-1. 문제 출력 함수를 설정합니다. 2-1-1. 선택지를 출력합니다. 2-1-2. 문제의 해설을 숨깁니다. 3. 정답을 확인합니다. 3-1. 사용자가 쓴 정답과 문제의 정답이 맞는지 확인해야합니다. 3-2. 사용자가 고른 input 박스를 가져와야 합니다. (※innerText는 문자만을 인식하고 innerHTML은 태그까지 인식합니다.) 4. 정답을 클릭합니다. //선택자 const quizType = document.querySelector(".quiz__type"); //퀴즈 종류 const quizNumber = document.querySelector(".quiz__question .nu.. 2022. 8. 8.

이전 1 2 3 4 5 다음

728x90

HTML

자세히보기

CSS

자세히보기

JAVASCRIPT

자세히보기

티스토리툴바