숨만쉬어도 귀여운타입:D

https://www.hellomonday.com/ Hello Monday Hello Monday is a creative studio in New York, Copenhagen, and Aarhus that handcrafts digital (and magical) products, brands, and experiences. www.hellomonday.com 마우스 커스가 돋보이는 사이트 ! https://wantedfornothing.com/ Wanted For Nothing | Top Rated Web Design Agency Los Angeles Wanted for Nothing is a Los Angeles based tactical design agency that focuses on UX..

웹디 실기 연습사이트를 만들어 봤어요 ! 캡쳐 이미지와 같은 느낌으로 만들었구요 iframe으로 가져오니 화면이 짤리네요 ㅜㅜㅜ 전체소스 보기는 요기루 오느른 스크립트만 보구 갈게용 $(function(){ let currentIndex = 0; $(".sliderWrap").append($(".slider").first().clone(true)); setInterval(function(){ currentIndex++; $(".sliderWrap").animate({marginLeft:-100*currentIndex + "%"},600); if(currentIndex == 3){ setTimeout(function(){ $(".sliderWrap").animate({marginLeft:0},0); cur..

2023웹디 기능사 실기문제를 만들어볼거에요 사이즈를 정해놓구 만들어서 깨졌지만 이해 부탁드려요 '~' 요렇게 만들어졌구요 요 레이아웃을 보구 만들었어요 html부분 강원천문대 강원천문대 천문대 소개 인사말 오시는길 이용안내 프로그램 관람시간표 이달의 별자리 천문대예약 예약하기 예약확인 예약취소 커뮤니티 공지사항 방문후기 자유게시판 천문과학교육관 시설 소개 영상강의실로 놀러오세요! 천문과학교육관 이용 안내 어린이를 위한 천문 과학관! 별을 보는 고요한 정상 강원천문대로 놀러오세요! 공지사항 | 갤러리 강원천문대 2023년 휴관일 안내2023.05.11 강원천문대 2023년 온라인 예매2023.05.10 강원천문대 휴관일 및 이벤트 안내2023.05.09 강원천문대 휴관일 안내2023.05.08 강원천문대..

2023웹디 기능사 실기문제를 만들어볼거에요 사이즈를 정해놓구 만들어서 깨졌지만 이해 부탁드려요 '~' 요렇게 만들어졌구요 요 레이아웃을 보구 만들었어요 html부분 산업대학교 대학소개 총장인사말 학교소개 홍보관 캠퍼스안내 입학안내 수시모집 정시모집 편입학 재외국인 정보서비스 정보알림 정보공개 정보서비스안내 커뮤니티 공지사항 참여게시판 자료실 미래를 이끄는 열정 산업대학교 미래를 이끄는 열정 산업대학교 미래를 이끄는 열정 산업대학교 공지사항 2023년 신입생 모집중2023.05.01 융합전공멘토링 학생 모집2023.05.02 학과 및 학년 별 참여2023.05.03 졸업생 취업박람회2023.05.04 우리학교풍경 산업대학교 2023 체육대전 바로가기 개인정보처리방침 정보 공개 홈페이지 운영지침 15073..

프론트 앤드 개발자 ? 정확히 무슨 작업을 하는지 알아봐용 프론트엔드 개발자의 업무는 대체로 다음과 같습니다. 프론트엔드 개발자(Frontend Developer)는 웹사이트나 앱의 사용자 인터페이스(UI)를 개발하는 역할을 합니다. 프론트엔드 개발자는 사용자가 웹 페이지나 앱을 사용할 때 보게 되는 모든 것을 디자인하고 개발합니다. 이는 HTML, CSS, JavaScript를 사용하여 구현합니다. 웹 사이트 또는 앱의 UI 디자인 구현 디자인을 시안으로 받아 UI 디자인을 HTML/CSS/JavaScript 등의 프로그래밍 언어로 구현합니다. 웹 사이트 또는 앱의 사용자 경험(UX) 개선 사용자 경험을 개선하기 위해 UI를 개선하거나 기능을 추가합니다. 반응형 웹 디자인 구현 모바일, 태블릿, 데스크..

웹디기능사 실기 연습을 해볼게요 ! https://getgrovy.github.io/web2023/webd/index.html 웹디자인기능사 실기 레이아웃 getgrovy.github.io 요기에 들어가시면 유형별로 작업해둔걸 볼수 있어요 ! https://github.com/getGrovy/web2023 에는 소스있으니 참조 부탁드려요 !

사이트유형 번호 사이트 국내 사이트 01 https://www.feelway.com/ 02 https://mustit.co.kr/?utm_source=linkprice&utm_medium=cps&utm_campaign=feed_pc&utm_content=linkprice&inflow=linkprice 03 https://www.balaan.co.kr/shop/main/index.php 04 https://kream.co.kr/?utm_source=google&utm_medium=cpc&utm_campaign=NEW_%EC%9E%90%EC%82%AC%EB%AA%85_PC&utm_term=%ED%81%AC%EB%A6%BC&utm_content=A.%20%EC%9E%90%EC%82%AC%EB%AA%85 05 ..

웹 디자인 기능사 시험 실기 연습을 해봤어요 ! 위와 같은 사이트를 만드는거에요 ! body에서는 구조만 잡아줬어요 1즐길거리 요금/무대혜택 참여프로그램 이용가이드 소통서비스 롯데월드 소식 그럴싸진관 미라클20220.09.3 이용요금조정피마클20220.09.3 드림스테이지 힘내미라클20220.09.3 드림 스테이지 햄내 소주한잔 미라클20220.09.3 더보기 특별한경험 연간회원안내 프리미엄투어 공연참여프로그램 단체프로그램 서울특별시 서초구 올릭픽로 240 호텔롯데 롯데월드 | 대표자 : 희석 사업자등록번호 : 219-85-00014 | 통신판매신고번호 | 송파 | 전화 : 1661-2000 COPYRIGHT 2022 LOTTEWORD.ALL.RIGHT RESERVED 요기는 css 에요 * { marg..

지금까지 html로 만들어본 사이트를 종합해서 만들거에요 + 반응형 소스보기 위 이미지처럼 그동안 만들었던 css와 html을 이용해서 만들거에요 👇👇👇이전 포스팅 보러가기 👇👇👇 이미지텍스트유형 카드 유형 슬라이드 유형 이미지유형 푸터유형 meta데이터 이용하기 & 파비콘설정 & css 그룹화 & skip 이전 포스팅에서는 하지않은 설정을 했어요 웹표준을 최대한 지키려고 했습니다. meta 데이터를 적어 검색엔진에서 노출될때 화면에 노출될 설명을 설정하였고 파비콘도 같은 의미로 설정해줬어요 그리고 css를 그룹화 하여 html에서 css는 link만 모여요 소스가독성은 덤 ! skip태그를 설정하여 접근성이 떨어질경우 접근성을 향상시켰어요 ! 해더 영역 바로가기 슬라이드 영역 바로가기 이미지 영역 바로..

퀴즈퀴즈 사이트 만들기 ! ( 객관식유형 * 6문제 한번에 만들기 ver.2 ) 이번엔 객관식 퀴즈 6문제가 있는 사이트를 만들어볼까해요 저번엔 각각 나오게 하였지만 이번엔 정답확인후 1문제씩 나오도록 할거에요 ! 전체 소스는 요기 객관식 유형을 만들기위해 해야할일을 아래 소스로 살펴볼게요 정답입니다! 오답입니다! 점수 확인하기 다음 문제 getgrovy@gmail.com html은 에서 입력하기 때문에 위에처럼 간단한 해졌어요! 시험 정보 & 문제 & 보기 등등은 계속 반복되기때문에 에서 반복해 줄거에요 ! 그래서 아래처럼 값을 가진 quizInfo 배열 형태로 6문제를 만들었어요 ! const quizInfo = [ { infoType:"웹디자인기능사", infoTime:"2012년 2회", info..

document.querySelector 사용 방법에 대해 알아볼게요 그동안 document 객체를 가져올때 class만 가져왔는데 더 다양하게 사용이 가능해요 ! 1) Universal selector 범용 선택자는 *로 표시하며 이는 모든 타입의 모든 element를 매치합니다. 다음의 예제는 querySelector()를 사용해 document의 첫 번째 element를 가져오는 코드입니다. let element = document.querySelector('*'); 그리고 다음은 document의 모든 element를 가져오는 코드입니다. let elements = document.querySelectorAll('*'); 2) Type selector 노드이름으로 element를 찾기 위해서는 타..

퀴즈퀴즈 사이트 만들기 ! ( 객관식유형 * 6문제 한번에 만들기 ) 이번엔 객관식 퀴즈 6문제가 있는 사이트를 만들어볼까해요 전체 소스는 요기 객관식 유형을 만들기위해 해야할일을 아래 소스로 살펴볼게요 위처럼 코딩을 해야했는데 6번 반복하기엔 너무 코드가 복잡해지죠 ? 그래서 아래처럼 값을 가진 quizInfo 배열에 obj형태로 6문제를 만들었어요 ! const quizInfo = [ { infoType:"웹디자인기능사", infoTime:"2012년 2회", infoNumber:"20120201", infoQuestion: "입체에 대한 설명으로 옳지 않은 것은?", infoChoice: { 1: "소극적 입체는 현실적 형, 확실히 지각되는 형을 말한다." , 2: "입체는 면이 이동한 자취이다."..

figma처럼 site를 만들어봤어요 ! css와 body소스를 보면 어려운점은 없어보여요 아래는 body소스에요 ! 푸터 별헤는밤 별헤는밤 시인 윤동주 발매 못한 마지막 시 별 알퐁스 도데가 1885년에 발표한 단편소설이다. 별을 세면 잠을 잘수있어 누워서 별을 세자 Countingstar Counting Star 별을 보며 별만큼돈벌자 별 차가울지 따뜻할지 다정할지 무서울지 이별 생각해봐도 어렵네요 세상이 무너졌어요 2023 getgrovy 별과 사람 사랑 portfolio & Power All Right Reserved 아래는 소스설명보다 오늘은 footer유형에 대해 알아볼게요 footer 사용법 ! footer는 시멘틱 테그 와 를 사용해요 에는 사이트를 제작자 & 제작자email & 만든시기등..

Parallax Scroll(패럴랙스 스크롤링)효과를 응용해서 구현해봤어요 ! 패럴랙스 스크롤링 효과는? background-attachment: fixed; 로 백그라운드를 고정 그 위에 텍스트나 이미지 등을 올림 하단의 백그라운드가 올림 시각적으로 패럴랙스 스크롤링 효과를 준다 ! 팰럴랙스 효과를 응용해서 마우스 커서주변만 밝혀주는 효과를 구현 ! 위 효과의 CSS소스를 볼게요 ! .mouse__wrap { cursor: none; } header, footer { z-index: 2; } .mouse__text { width: 100%; height: 100vh; overflow: hidden; display: flex; align-items: center; justify-content: cente..

마우스 이펙트 효과를 GSAP를 적용해봤어요 ! body를 먼저 볼게요 ! Javascript Mouse Effect02 마우스 이펙트 - 2 1 2 3 4 5 6 Fix you course on a star and you'll navigate any storm 당신의 별을 보고 방향을 정해라. 그러면 폭풍 속에서도 항해를 계속 해 나갈 수 있을것이다 getgrovy@gmail.com mouse_cursor 가 2개있네요? ? 왜 ? why ? 2개의 마우스 커서가 마우스포인터를 따라다니게 할거니까요 각각의 커서가 2가지 이펙트를 보여줄거고 영역 영역, 태그 부분에 효과를 부여할거에요 안을 살펴 볼게요 ! //선택자 const cursor = document.querySelector(".mouse__cu..

마우스 이펙트 효과를 오늘은 배웠어요 ! body를 먼저 볼게요 ! Javascript Mouse Effect01 마우스 이펙트 - 마우스 따라다니기 You until have the courage You can nevercross the ocean , to lose sight of the shore. 용기가 없어 한번도 바다를 건너지 않았다면, 바다에서 보는 육지의 경치를 놓치는 것이다. clientX : 0px clientY : 0px offsetX : 0px offsetY : 0px pageX : 0px pageY : 0px screenX : 0px screenY : 0px getgrovy@gmail.com ul 테그 안에 있는 것들 처음보네요 정리해 볼게요 ! 기능 공통사항 ClientX 브라우저..

figma처럼 텍스트유형의 site를 만들어봤어요 ! 소스 전문 보기 6개의 섹션으로 구성되어 있으며 아이콘은svg를 이용해서 만들었어요! SVG(Scalable Vector Graphics)가 뭔지 알아보고 갈게요 ! 웹 친화적인 벡터 파일 포맷입니다. JPEG와 같은 픽셀 기반의 래스터 파일과 달리, 벡터 파일은 그리드 위의 점과 선을 기반으로 하는 수학 공식을 통해 이미지를 저장합니다. 따라서 SVG와 같은 벡터 파일은 품질을 그대로 유지하면서 크기를 마음대로 조정할 수 있으므로 로고와 복잡한 온라인 그래픽에 아주 적합합니다. SVG가 웹 디자이너에게 큰 인기인 이유는 크기 조정 기능 때문만은 아닙니다. SVG는 XML 코드로 작성되므로 모든 정보를 모양이 아닌, 텍스트로 저장합니다. 따라서 Goo..

퀴즈퀴즈 사이트 만들기 ! ( 객관식유형) 이번엔 객관식으로된 퀴즈 풀이 사이트를 만들어볼까해요 전체 소스는 요기 객관식 유형을 만들기위해 해야할일을 아래 소스로 살펴볼게요 요렇게 라벨과 radio 버튼을 넣었어요 ! const quizWrap = document.querySelector(".quiz__wrap"); const quizTitle = quizWrap.querySelector(".quiz__title"); //시험종목 const quizQuestion = quizWrap.querySelector(".quiz__question"); const quizChoice = quizWrap.querySelectorAll(".quiz__choice span"); //보기 const quizSelect =..

figma처럼 슬라이드유형의 site를 만들어봤어요 ! 아래처럼 슬라이드 첫 번째 사진을 만들었어요 ! 소스 전문 보기 포인트를 볼게요 ! event 변환해서 넣는거에요 ! .slider__arrow a { position: absolute; top: 50%; background-image: url(../asset/img/icon_main.svg); background-size: 500px; width: 30px; height: 56px; display: block; margin-top: -28px; } .slider__arrow a:first-child { left: 20px; } .slider__arrow a:last-child { right: 20px; background-position: -52p..

figma처럼 site를 만들어봤어요 ! 아래는 body소스에요 ! notice 알퐁스 도데가 발표한 단편소설 만약 당신이 아름다운 별빛 아래에서 밤을 지새운 적이 있다면, 낮은 신분의 목동이 주인집의 아가씨를 연모하다가, 자신의 일터에서 밤을 보내게 된 그녀를 욕정과는 거리가 먼 순수한 사랑으로 지켜주는 장면과 심리를 간결한 문체로 묘사했다. 당시 프랑스의 문란한 연애 문화를 비판하며, "이런 사랑도 얼마든지 있을 수 있다!!" 라고 보여주려고 쓴 소설. 구조를 ... 상단 120px 중앙정렬 text image1 image2 하단 120px 이렇게 구조 잡았어요 ! 위처럼 style을 적용했어요 횡간격을 20px;을 맞추기 위해 ... 사이즈를 조금 변경하였어요! justify-content: spa..

퀴즈퀴즈 사이트 만들기 안녕하세요 오늘은 퀴즈문제를 풀어보는 사이트를 만들어 봤어요 정답일경우엔 강아지가 웃고 오답일경우엔 강아지가 슬퍼해요 정답은 '주파수, unix, 교착상태'입니다 ! 소스는 요기 😝😝😝 위 레이아웃 만들면서 어려운 javascript 정리 innerHTML textContent, innerText 과 같은동작을 하지만 style tag를 쓸수 있어요 (quizQuestion.innerHTML= ""+quizInfo[0].infoNumber+") array.forEach (element, number =>{ }); forEach문 반환하는 값이 있는 함수에요 array순서대로 반환하며 element(array[0]번째부터 끝까지 반복) number(array[0]번째 부터 끝까지 반..

css 코드입니다. Counting star lv01 계절이 지나가는 하늘에는 가을로 가득 차 있습니다. 잠이 안올땐 1 하나 둘 셋 별을 세다 보면 어느세 잠이들어요 자세히보기 잠이 안올땐 2 하나 둘 셋 별을 세다 보면 나도 모르게 눈이 아파요 자세히보기 body 테그 입니다. 중요 point 1 .image__inner .image{ position: relative; } .image__body{ position: absolute; /*기준*/ } 를 이용해서 image 안에 내용이 들어가게 설정을 해줍니다. 이 내용이 없다면 image안에 글이 들어가지 않습니다. 중요 point 2 .image__body .btn{ display: inline-block; } 해당 코드를 이용해 btn의 인라인블..

퀴즈퀴즈 사이트 만들기 안녕하세요 오늘은 퀴즈문제를 풀어보는 사이트를 만들어 봤어요 정답일경우엔 강아지가 웃고 오답일경우엔 강아지가 슬퍼해요 정답은 '슬라이드'입니다 ! 소스는 요기 위 레이아웃 만들면서 궁금했던 css 정리 😝😝😝! font-family: 'NeoDunggeunmo' pc에서는 잘 나왔지만 선생님의 맥에서는 화면이 깨져보였다 . . 폰트는 화면별로 다르기 때문에 확인을 한번씩 해야겠음 ! ~ 😝😝😝 위 레이아웃 만들면서 어려운 javascript 정리 textContent innerText 두 태그는 동일한 동작을 합니다. 값을 넣어주는 자바스크립트 내장객체 innerText로 어제 코드작업을 했구 오늘은 textContent를 해봤어요 const useAnswer = quizAnswe..

퀴즈퀴즈 사이트 만들기 안녕하세요 오늘은 퀴즈문제를 풀어보는 사이트를 만들어 봤어요 만들면서 궁금했던거 를 정리해봤어요 소스는 요기 위 레이아웃 만들면서 궁금했던 css 정리 😝😝😝! z-index position 속성을 이용하면 요소를 겹치게 놓을 수 있습니다. 요소들의 수직 위치를 z-index 속성으로 정합니다. 값은 정수(-1, 0 , 1) 이며, 숫자가 클 수록 위로 올라오고, 숫자가 작을 수록 아래로 내려갑니다. position: relative; position 속성을 통해 문서 상에 요소를 배치하는 방법을 지정한다. top, right, bottom, left 속성을 통해 요소의 최종 위치를 결정한다. 기준을 잡는다. (예- position: relative;) 이동시킨다. (예- top:..

이번엔 카드유형 사이트를 만들어 봐요 ! 코드! 스타일 입니다 Counting star lv02 계절이 지나가는 하늘에는 가을로 가득 차 있습니다 가슴 속에 하나 둘 새겨지는 별을 이제 다 못 헤는 것은쉬이 아침이 오는 까닭이요 내일 밤이 남은 까닭이요, 아직 나의 청춘이 다하지 않은 까닭입니다. 자세히 보기 별 하나에 추억과 별 하나에 쓸쓸함과 별 하나에 동경과 별 자세히 보기 나는 별 하나에 , 아름다운 말 한마디씩 불러 봅니다. 초등학교 때 책상을 같이 했던 아이들의 이름과 아름다운 말 한마디씩 불러 봅니다. 초등학교 때 책상을 같이 했던 아이들의 이름과 자세히 보기 body 입니다. 위 레이아웃 만들면서 아리송했던 css 정리 😝😝😝! font-weight normal : 보통 굵기이다. 숫자 4..

Semantic 태그..? 태그? 섹션과 관련된 태그(Section Related Tag)를 찾다보니 시멘틱태그인 경우가 많더라구요 일전에 포스팅한 시멘틱마크업에서는 시멘틱의 이라는 사전적인 정의를 내렸고 이번 포스팅에서는 그래서 시멘틱 태그를 정리 해보았습니다. 더보기 시멘틱태그을 해야 하는 이유? 1. SEO(Search Engine Optimize) - 검색엔진 최적화에 유리 2. 웹접근성 - 시각장애인들도 웹을 편리하게 접할 수있도록 도와줌 3. 유지보수 - 정리된 마크업은 코드 식별이 용이함 ~ 제목을 나타내며 숫자가 작을수록 크기가 커 주로 태그 안에 사용을해 ! 소개 및 탐색에 도움을 주는 콘텐츠를 나타넹 제목, 로고, 검색 폼, 작성자 이름 등의 요소도 포함할 수 있고 주로 상단에 위치해 ..

텍스트관련요소 텍스트관련요소를 알아보기

시멘틱마크업(Semantic markup) 시멘틱(semantic)의 사전적인 뜻 '의미론적인'으로 해석이 가능하며 의미에 맞는는 태그를 사용하라는뜻! ex) 헤드/푸터에 와 사용 메인 컨텐츠에 과 사용 독립적인 컨텐츠에 사용 최상위 제목으로 사용 순서가 없는 목록으로 과 사용 내비게이션에 사용 etc.. 이런식으로 태그가 가진 의미에 맞는 태그를 사용하여야해 시멘틱 마크업을 해야 하는 이유? 1. SEO(Search Engine Optimize) - 검색엔진 최적화에 유리 2. 웹접근성 - 시각장애인들도 웹을 편리하게 접할 수있도록 도와줌 3. 유지보수 - 정리된 마크업은 코드 식별이 용이함 ex 1) 1 왼쪽 처럼 작업한다면 작업할곳을 찾기 힘들지만 우측 처럼 작업한다면 자신이 작업해야할곳을 쉽게 찾..

블록 레벨요소 (Block-level Elements) 블록 요소는 하나의 박스라고 생각해 박스안에 데이터를 넣는거지 ! 그러니깐 내용물을 넣어야해 더보기 - 연락처 정보 HTML5 - (의미있는) 단락 컨텐츠 HTML5 - 부가 컨텐츠. HTML5 - 오디오 플레이어 - 긴 ("블럭") 인용구. HTML5 - 캔버스 - 정의를 설명. - 문서의 분할 - 정의된 목록 - 필드 정의 레이블 HTML5 - 그림 캡션 HTML5 - 캡션이 포함된 그룹 미디어 컨텐츠 (참고 ). HTML5 - 페이지나 섹션의 푸터 - 입력 폼 , , , , , - 제목 크기 (1~6) HTML5 - 페이지나 섹션의 헤더 HTML5 - 그룹 헤더 정보 - 수평선 (구분선). - 스크립트를 지원하지 않는 컨텐츠의 사용 - 정렬된 ..