본문 바로가기

Study137

요소 크기 메서드 요소 크기 메서드 정리> 위치 및 크기를 표현하는 속성 메서드 속성/메서드 설명 1 element.clientWidth 요소의 가로값(마진/보더 미포함) 2 element.clientHeight 요소의 높이값(마진/보더 미포함) 3 element.clientTop 요소의 Y축값(부모기준) 4 element.clientLeft 요소의 X축값(부모기준) 5 element.offsetWidth 요소의 가로값(보더/패딩 포함) 6 element.offsetHeight 요소의 가로값(보더/패딩 포함) 7 element.offsetTop 요소의 Y축값(문서 기준) 8 element.offsetLeft 요소의 X축값(문서 기준) 9 element.getBoundingClientRect() 요소의 크기와 뷰포트에 상대.. 2022. 9. 1.

05. 이미지/텍스트 유형 1 이미지/텍스트 유형 01 이미지/텍스트 유형 레이아웃 사이트입니다. 원본 사이트 보기 원본 소스 보기 레이아웃 설정 figma로 그리드와 사이트의 레이아웃을 잡습니다. HTML html 소스입니다. 유용한 사이트 살펴보기 이미지 텍스트 유형01 유용한 사이트 살펴보기 웹디자이너, 웹 퍼블리셔, 프론트앤드 개발자를 위한 유용한 사이트입니다. 튜토리얼 사이트 레퍼런스 사이트 웹폰트 사이트 CSS 사이트 WebGL 사이트 Youtube 사이트 레퍼런스 사이트 튜토리얼 사이트 CSS css 소스입니다. figma로 설정해놓은 레이아웃이나 zaplin을 보며 적절하게 css를 설정해줍니다. /* fonts */ @import url('https://webfontworld.github.io/NexonLv1Gothi.. 2022. 9. 1.

04. 헤더 유형 1 헤더 유형 01 헤더 유형 레이아웃 사이트입니다. 원본 사이트 보기 원본 소스 보기 레이아웃 설정 figma로 그리드와 사이트의 레이아웃을 잡습니다. HTML html 소스입니다. Web site 헤더 영역 슬라이드 영역 배너 영역 컨텐츠 영역 푸터 영역 로그인 CSS css 소스입니다. figma로 설정해놓은 레이아웃이나 zaplin을 보며 적절하게 css를 설정해줍니다. /* fonts */ @import url('https://webfontworld.github.io/NexonLv1Gothic/NexonLv1Gothic.css'); .nexon { font-family: 'NexonLv1Gothic'; font-weight: 400; } /* reset */ * { margin: 0; padding.. 2022. 9. 1.

03. 텍스트 유형 3 텍스트 유형 03 텍스트 유형 레이아웃 사이트입니다. 원본 사이트 보기 원본 소스 보기 레이아웃 설정 figma로 그리드와 사이트의 레이아웃을 잡습니다. HTML html 소스입니다. 🍞Youcodein 베이커리 후기🥐 우리 베이커리 손님들의 진짜 100% 리얼 후기들입니다. 최고의 베이커리. 한국, 아니 우주에서 가장 맛있는 빵들입니다. 사장님이 정말 정성을 담아 빵을 만드는 게 보입니다. 제가 가장 좋아하는 빵은 슈크림인데요 바삭한 빵과 달콤하면서도 깊은 맛의 크림이 환상의 조합입니다. 요 슈크림이 아주 미X..녀석입니다 박선혜 22. 08. 31 자세히 보기 친구가 추천해서 소금빵 먹어봤는데 너무너무 맛있었어요! 어쩜 이렇게 맛있는지 제가 먹어본 소금빵중 제일 맛있었어요~ 다음에 또 가서 사먹으려구.. 2022. 9. 1.

무슨 말을 하고 있나요? 학원에 있는데 학원 사람들은 대부분 시험을 보러 가고.... 거의 자습이네요. 오늘의 주제는 딱히 없습니다. 일단 써보고 생각해보려 합니다. 오늘 열심히 공부를 했는데 돌아버리는줄 알았습니다. 이럴때 꼭 EXP 에디션의 STRESS 를 들어야 합니다. 폭발 일보직전 돌기 일보직전 열기 일보직전 I'm just stressed ! ! ! 제가 저번 노래 추천글에 쓴 그 노래 맞습니다. 명곡이니 아직 안 들으신 분들은 꼭 들어주세요. 최근 독서를 해야겠다는 생각을 합니다. 생각만 하고 안 읽게 되는게 문제입니다. 예전엔 독서하는걸 참 좋아했는데 이상하게 나이를 먹으면서 책을 잘 안보게 되더라구요. 영상물도 길이가 긴 영상물은 마음의 준비를 하고 봐야합니다. 집중력의 문제 같기도 하지만 뭔가, 컨텐츠를 즐기며.. 2022. 8. 31.

03. 텍스트 유형 - 2 텍스트 유형 02 텍스트 유형 레이아웃 사이트입니다. 이번 사이트는 이전 사이트와는 달리 아이콘과 텍스트로만 이루어져 있습니다. 원본 사이트 보기 원본 소스 보기 레이아웃 설정 figma로 그리드와 사이트의 레이아웃을 잡습니다. HTML html 소스입니다. GOOD BREAD 빵을 더 맛있게 먹자! 평소에 빵을 즐겨 드시나요? 빵을 더 맛있게 즐기는 방법들을 지금 이 자리에서 소개해드립니다! 그냥 먹는다 정말 맛있는 빵은 어떠한 기교를 부리지 않고 먹어도 맛있습니다. 순수한 빵을 맛보시면 이 말의 의미를 알게 될 것이라 자신합니다. 구워서 불의 발견은 인간에게 아주 혁명적인 일이었습니다. 그리고 그 불로 우리는 빵을 구워먹는 기적을 행할 수 있었습니다. 크림/잼과 그냥 빵만 먹기 심심하다면? 크림이나 .. 2022. 8. 31.

JQuery 탐색 선택자 JQuery 탐색 선택자 1. 기본 탐색 선택자 선택자 종류 설명 children() $("div").children() div 요소의 자식 요소를 선택합니다. parent() $("p").parent() p 요소의 부모 요소를 선택합니다. parents() $("p").parents("div") p 요소의 부모가 되는 모든 div 요소를 선택합니다. closest() $("p").closest("div") p 요소의 부모가 되는 첫 번째 div 요소를 선택합니다. next() $("div.m").next() div.m 요소의 다음 요소를 선택합니다. nextAll() $("div.m").nextAll() div.m 요소의 다음 요소들을 모두 선택합니다. nextUntil() $("div.m").next.. 2022. 8. 31.

JQuery 필터 선택자 JQuery 필터선택자 JQuery의 필터 선택자입니다. 선택자에 ":" 이 붙은 선택자를 필터선택자라고 합니다. 1. 기본 필터 선택자 선택자 종류 설명 :even $("tr:even") tr 요소 중 짝수 행만 선택합니다. :odd $("tr:odd") tr 요소 중 홀수 행만 선택합니다. :first $("td:first") 첫 번째 td 요소를 선택합니다. :last $("td:last") 마지막 td 요소를 선택합니다. :header $("td:header") 헤딩(h1~h6) 요소를 선택합니다. :eq() $("li:eq(0)") index가 0인 li요소를 선택합니다. index는 0번이 첫 번째 요소입니다. :gt() $("li:gt(0)") index가 0보다 큰 li요소를 선택합니다. .. 2022. 8. 31.

JQuery 속성선택자 JQuery 속성선택자 JQuery의 속성 선택자입니다. 속성 선택자 선택자 종류 설명 요소[속성] $("span[class]") span 요소 중 class 속성을 가지고 있는 요소를 선택합니다. 요소[속성='값'] $("span[class='abc']) span요소 중 class가 'abc'인 요소를 선택합니다. 요소[속성!='값'] $("span[class!='abc']) span요소 중 class가 'abc'가 아닌 요소를 선택합니다. 요소[속성~='값'] $("span[class~='abc']) span요소 중 class가 'abc'가 포함하는 요소를 선택합니다. 'abc'앞뒤로 연결된 문자가 없어야 합니다. 'bg abc'는 선택되나 'bg_abc'는 선택되지 않습니다. 요소[속성*='값'] .. 2022. 8. 30.

JQuery 기본 선택자 JQuery 기본선택자 JQuery는 html 요소와 관련된 기능구현이 많아 그만큼 CSS와 매우 밀접한 관계가 있습니다. 기본 선택자 선택자 종류 설명 태그 선택자 $("p") p요소를 설명합니다. id 선택자 $("#gnb") #gnb 요소를 선택합니다. class 선택자 $(".logo") .logo인 요소를 선택합니다. 자식 선택자 $("#gnb > ul > li") #gnb의 자식 요소의 자식 요소 li를 선택합니다. 하위 선택자 $("#gnb ul") #gnb의 하위에 있는 모든 ul 요소를 선택합니다. 인접 선택자 $("#visual + #content") #visual의 다음에 오는 #content요소를 선택합니다. 형제 선택자 $("#visual ~ #footer") #visual의 형제.. 2022. 8. 30.

03. 텍스트 유형 01 텍스트 유형 01 텍스트 유형 레이아웃 사이트입니다. 이번 사이트는 이전 사이트와는 달리 아이콘과 텍스트로만 이루어져 있습니다. 원본 사이트 보기 원본 소스 보기 레이아웃 설정 figma로 그리드와 사이트의 레이아웃을 잡습니다. HTML html 소스입니다. 텍스트 유형01 🍞빵을 맛있게 먹는 방법🥐 그냥 먹는다 인간의 가장 기본적인 행위인 먹는다는 행위를 통해 빵이라는 음식물을 섭취해봅시다. 공복일 시 더욱 맛있습니다. 더보기 구워서 먹는다 불의 발견은 인간에게 아주 혁명적인 일이었습니다. 그리고 그 불로 우리는 빵을 구워먹는 기적을 행할 수 있었습니다. 더보기 얹어서 먹는다 그냥 빵만 먹기 심심하다면? 크림이나 잼을 얹어서 드세요! 달콤하고 고소한 맛을 추가할 수 있어요! 맛있게 드세요~ 더보기 커피.. 2022. 8. 30.

애니메이션2 애니메이션 만들기 HTML과 CSS를 이용하여 애니메이션을 만들어봅시다. 예시 예시입니다 HTML 소스 > CSS 소스 body { height: 100vh; background-image: linear-gradient(-60deg, #ff5858 0%, #f09819 100%) } .loading { position: absolute; left: 50%; top: 50%; width: 20px; height: 150px; animation: loading 1s ease infinite; } .loading .circle1 { display: block; width: 20px; height: 20px; border-radius: 50%; background: #fff; } .loading .circle2.. 2022. 8. 30.

애니메이션1 애니메이션 만들기 HTML과 CSS를 이용하여 애니메이션을 만들어봅시다. 예시 예시입니다 HTML 소스 CSS 소스 body { height: 100vh; background-image: linear-gradient(to top, skyblue, pink) } .box { width: 50px; height: 50px; position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin: auto; } .box::before { content: ''; width: 50px; height: 5px; background: #000; position: absolute; top: 58px; left: 0; border-radius: 50%; opacity: 0.2.. 2022. 8. 30.

JQuery란? JQuery 제이쿼리(jQuery)는 오픈 소스 기반의 자바스크립트 라이브러리입니다. 제이쿼리는 웹 사이트를 제작할 때 자바스크립트를 더욱 손쉽게 활용할 수 있게 해줍니다. 또한, 제이쿼리를 사용하면 짧고 단순한 코드로도 웹 페이지에 다양한 효과나 연출을 적용할 수 있습니다. JQuery 특징 1. 크로스 플랫폼을 지원하는 jQuery는 어떠한 브라우저에서도 동일하게 동작한다. 그렇기 때문에 브라우저 호환성을 고려하여 대체 코드를 작성할 필요가 없습니다. 2. 네이티브 DOM API 보다 직관적이고 편리한 API를 제공한다. CSS 스타일의 selector를 사용할 수 있으며 조작 또한 유연하게 할 수 있습니다. 3. 이벤트 처리, Ajax, Animation 효과를 쉽게 사용할 수 있습니다. 4. 다양.. 2022. 8. 30.

GSAP란? GSAP 웹 브라우저에서 탁월한 애니메이션을 구현하기 위한 자바스크립트 라이브러리입니다. 기존의 CSS 애니메이션과 JavsScript 애니메이션보다 사용성이 편하고, 탁월한 퍼포먼스가 돋보이는 애니메이션 전용 라이브러리입니다. 사용법 기존의 style이나 js 링크처럼 GSAP에서 script 링크를 가져와, 애니메이션을 쉽게 적용할 수 있게 만들어줍니다. 예시 원본 소스 보기 GSAP 소스 2022. 8. 29.

220828 아.... 코딩만 하자니 뭔가 심심하기도 하고.... 과제는 다 했고.... 어떤 사람은 블로그를 꾸민다고 하는데 저는 아직 그럴 자신은 없어서 일기를 씁니다. 오늘 일기의 주제는 요즘 듣고 있는 노래입니다. 여러분들은 음악 감상을 좋아하시나요? 저는 정말 좋아합니다. 노래를 듣는 것도 좋아하고 노래를 부르는 것도 좋아하는데 요즘 노래방을 못 가서 너무 슬프네요. 코딩을 할 때도 노래를 들으면서 하는 편입니다. 저는 노동요라고 말하는데요. 오늘은 제 노동요를 소개해볼까 합니다. 1. 이엑스피 에디션 STRESS https://youtu.be/rFYg2sVyn80 이 아이돌...?은 한국인이 한 명도 없는 K-POP 아이돌 그룹입니다. 미국 컬럼비아 대학생원생이 논문을 준비하려고 만든 그룹이라고 하네요. .. 2022. 8. 29.

03. 슬라이드 이펙트 - 좌로 움직이기 슬라이드 이펙트 02. 좌로 움직이기 javascript를 이용하여 슬라이드 이펙트를 만들었습니다. 열심히 공부하세요! 슬라이드 이펙트 02 원본 소스 보기 자바스크립트 const sliderInner = document.querySelector(".slider__inner"); //움직이는 영역 const slider = document.querySelectorAll(".slider"); //이미지 let currentIndex = 0; sliderInner.style.transition = "all 0.6s"; setInterval(() => { currentIndex = (currentIndex + 1) % slider.length; sliderInner.style.transform = "trans.. 2022. 8. 29.

03. 슬라이드 이펙트 - 트랜지션 효과 슬라이드 이펙트 01. 트랜지션 효과 javascript를 이용하여 슬라이드 이펙트를 만들었습니다. 열심히 공부하세요! 슬라이드 이펙트 01 원본 소스 보기 자바스크립트 const sliderWrap = document.querySelector(".slider__wrap"); const sliderImg = sliderWrap.querySelector(".slider__img"); const slider = sliderWrap.querySelectorAll(".slider"); let currentIndex = 0; //현재 보이는 이미지 변수 let sliderCount = slider.length; //이미지 갯수 setInterval(() => { let nextIndex = (currentInde.. 2022. 8. 29.

요소 숨기기 CSS에서 요소를 숨기는 방법 CSS에서 요소를 숨기는 방법에 대해 알아보겠습니다. display: none; 이 속성을 적용하면 요소가 완전히 사라집니다. 요소가 없는 걸로 되기 때문에 접근성이 아예 없습니다. 존재하지 않는 요소이기때문에 공간 또한 차지하지 않습니다. visibility: hidden; 요소가 보이지 않지만 요소가 있었던 높이값만큼 공간이 남아있습니다. 이 경우 요소가 존재하지만 보이지만 않게 한 것입니다. 요소가 남아있기때문에 접근성은 유지할 수 있지만 불필요한 공간이 생겨버립니다. width: 0; height: 0; 특정 요소의 너비와 높이를 0으로 설정하여 숨기는 방식입니다. transform: scale(0); 시각적으로 엘리먼트를 감추지만, 빈 공간이 남습니다. 그러나 스크.. 2022. 8. 26.

퀴즈 이펙트 객관식 여러 문제 2 객관식 여러문제 원본 소스 보기 자바스크립트 //문제정보 const quizInfo = [ { answerType : "웹디자인기능사 2011년 04회", answerNum : "1", answerAsk : "디자인의 합목적성에 대한 설명으로 옳은 것은?", answerChoice : [ "정해진 바탕으로 최상의 디자인을 창출하는 것을 말한다.", "디자인을 할 때 목적에 맞는 수단을 사용하였는지를 말한다.", "보다 실용적이고 심미적으로 개선, 발전시키는 것을 말한다.", "개성적인 미의식을 창출해내는 것을 말한다." ], answerResult : "디자인을 할 때 목적에 맞는 수단을 사용하였는지를 말한다.", answerEx : "디자인을 할 때 목적에 맞는 수단을 사용하였는지를 말한다." }, {.. 2022. 8. 24.

사슴 그리기 일러스트레이터로 일러스트 그리기 Adobe 일러스트레이터를 사용하여 토끼 일러스트를 그려보았습니다. 일러스트레이터는 벡터 형식의 일러스트 작업을 할 수 있는 툴입니다. 1. 펜툴로 그림의 패스를 똑같이 따라해줍니다. 2. 펜툴로 그린 토끼를 Expand합니다. 3. Live paint를 사용하여 색을 채웁니다. 목업 2022. 8. 24.

색 표현 색상 표현 방법 CSS에서 색을 표현하는 방법에는 다음과 같이 세 가지 방법이 있습니다. 1. 색상 이름으로 표현 2. RGB 색상값으로 표현 3. 16진수 색상값으로 표현 색상 이름으로 표현 색상 이름으로 표현이 가능하다. W3C에서 정의한 16개의 HTML4 표준 색상 이름은 다음과 같습니다. aqua black blue fuchsia gray green lime maroon navy olive purple red silver teal white yellow RGB 색상값으로 표현 모니터나 스크린은 빨간색(Red), 녹색(Green), 파란색(Blue)을 혼합하여 색을 표현합니다. 따라서 HTML에서도 이 세 가지 색을 가지고 색을 표현하는 RGB 색상을 사용합니다. RGB 색상의 기본색(Red, G.. 2022. 8. 24.

CSS 단위 표현 단위의 고찰 CSS는 길이를 표현하는 몇가지 다른 단위가 있습니다. 오늘은 이 단위의 종류들을 알아보고자 합니다. 1.숫자와 단위 사이에는 공백을 쓸 수 없습니다. 2. 0은 단위 생략이 가능합니다. 3. 일부 CSS 속성의 경우 음수 길이가 허용됩니다. 절대 길이 단위 다음은 모두 절대 길이 단위입니다. 고정된 값을 출력하며 절대 크기가 변하지 않습니다. 이 방법은 크기가 가변적인 웹사이트가 아닌 경우에는 유용하나, 반응형 사이트에 적용하는데는 복잡하다는 단점이 있습니다. 주로 픽셀 값을 사용합니다. 단위 이름 다음과 동일함 cm 센티미터 1cm = 96px/2.54 mm 밀리미터 1mm = 1/10th of 1cm Q 4분의 1 밀리미터 1Q = 1/40th of 1cm in 인치 1in = 2.54.. 2022. 8. 23.

서치 이펙트 3 서치 이펙트 만들기3 javascript를 이용하여 서치 이펙트를 만들었습니다. 열심히 공부하세요! 서치 이펙트3 원본 소스 보기 자바스크립트 추후 추가 예정 // 선택자 const searchKeyword = document.querySelectorAll(".search__info .keyword span"); // 알파벳 const searchList = document.querySelectorAll(".search__list ul li"); // 목록 리스트 const searchInfo = document.querySelector(".search__info .num"); // 전체 개수 // 전체 개수 구하기 searchInfo.textContent = searchList.length; // CS.. 2022. 8. 23.

함수 이해하기 2 함수의 유형 : 함수와 매개변수를 이용한 형태 function func(num, str1, str2) { document.write(num + str1 + str2 + "되었습니다."); } func("1", "함수", "실행"); func("2", "자바스크립트", "실행"); func("3", "제이쿼리", "실행"); 결과 보기 함수 유형 : 함수와 변수를 이용한 형태 function func(num, str1, str2) { document.write(num + ". " + str1 + "가 " + str2 + "되었습니다. "); } const youNum1 = 1; const youNum2 = 2; const youNum3 = 3; const youStr1 = "함수"; const youStr.. 2022. 8. 22.

charAt() charAt() : 지정한 인덱스의 문자를 추출 : 반환(문자열) charAt () 메서드는 지정된 인덱스에있는 문자를 반환합니다. "문자열".charAt(숫자); const str1 = "javascript reference"; const currentStr1 = str1.charAt(); //j const currentStr2 = str1.charAt("0"); //j const currentStr3 = str1.charAt("1"); //a const currentStr4 = str1.charAt("2"); //v 2022. 8. 22.

match() match() : 문자열을 검색(정규식) : 반환(배열) match() 메서드는 문자열(정규식)을 검색하고 일치하는 결과값을 배열로 반환합니다. "문자열".match(찾을 문자열, 변경할 문자열) "문자열".match(정규식) "문자열".match(정규식, 변경할 문자열) const str1 = "javascript reference"; const currentStr1 = str1.match('javascript'); //['javascript', index: 0, input: 'javascript reference', groups: undefined] const currentStr2 = str1.match('reference'); //['reference', index: 11, input: 'javas.. 2022. 8. 22.

search() search() : 문자열을 검색(정규식) : 반환(숫자) search() 메서드는 문자열(정규식)을 검색하고 위치값(숫자)를 반환합니다. "문자열".search("검색값"); "문자열".search(정규식 표현); const str1 = "javascript reference"; const currentStr1 = str1.search('javascript'); //0 const currentStr2 = str1.search('reference'); //11 const currentStr3 = str1.search('j'); //0 const currentStr4 = str1.search('a'); //1 const currentStr5 = str1.search('v'); //2 const curren.. 2022. 8. 22.

토끼 만들기 일러스트레이터로 일러스트 그리기 Adobe 일러스트레이터를 사용하여 토끼 일러스트를 그려보았습니다. 일러스트레이터는 벡터 형식의 일러스트 작업을 할 수 있는 툴입니다. 1. 펜툴로 토끼를 그립니다. 2. 펜툴로 그린 토끼를 Expand합니다. 3. Live paint를 사용하여 색을 채웁니다. 2022. 8. 22.

이미지 표현 이미지 표현 이번에는 사이트에서 이미지를 표현하는 방법 / 이미지 스프라이트 기법/ ir 효과에 대해 알아보겠습니다. 이미지 표현 방법 -html의 경우 1.img 태그로 표현합니다.(의미가 있을 때, 없으면 이 사이트인지 모를 때) 2.alt 태그는 대체 문자를 표현합니다. -css의 경우 1.background 속성으로 표현(의미가 없을 때_장식용) 2.대체 문자는 필요하지 않습니다. 이미지 백그라운드 css로 속성을 주고 이미지를 넣는 방식입니다. background : url('이미지주소'); background-image : url('이미지주소'); 이미지 스프라이트 여러 개의 배경 이미지를 하나의 파일로 제작한 후 background-position 속성을 이용하여 이미지를 배치하는 방법입니다.. 2022. 8. 22.

이전 1 2 3 4 5 다음

728x90

HTML

자세히보기

CSS

자세히보기

JAVASCRIPT

자세히보기

티스토리툴바