Web
-
웹디자인기능사 실기 시험 유용 사이트 추천Web/웹디자인 기능사 2022. 9. 13. 03:33
웹디자인 기능사 시험 준비하시는 분들께 도움이 되고자 시험 때 유용했던 사이트를 소개해 드립니다. 1. 실기시험 예제 사이트 @Emily WEB Designer 부여 가을연꽃축제 webdesignmilk.com http://webdesignmilk.com/ 실기시험 준비하시는 사람은 꼭 이 사이트로 예제 다운받으세요! 저도 시험 연습은 이걸로 계속했습니다. 드라이브에서 제공 파일을 다운받을 수 있으며, 예제별 html, css, js 코드는 아래처럼 드래그가 가능하도록 보여줍니다. 제공파일 속 이미지들도 무료 제공 파일로 규격에 맞게 사이징 되어있어 무척 편리합니다. (실제 시험에서는 툴을 이용해 직접 색을 바꾸거나 리사이징 해야 합니다.) 2. 실기시험 예제 사이트 @webStudyBasic webSt..
-
ep.2 SF소설 속 인물테스트 배포 리뷰Web/토이프로젝트 2022. 2. 10. 16:36
1. 사이트 배포 후 이미지 리뷰 인스타그램 링크 스티커를 통해 친구들에게 공유 후 페이지 리뷰를 받았다. 폰트에 대한 고민이 많았는데 보다보니까 이제는 부분적으로 적용한게 예뻐보이는 것 같기도..너무 많이 봐서 한달뒤에 디벨롭 할 예정. 아무래도 인스타그램을 통해 링크를 열다보니까 귀여운 파비콘을 다들 못 본게 아쉽네요. 2. 추가 리뷰와 아이디어 또한 리뷰는 간단했는데 오류 발견이 한번도 없었다는 것(당연함. 별 기능 없음)과 서점 이벤트 홍보용 페이지인줄 알았다는 것 ! 의도한 바를 잘 알아줘서 기분이 좋았어요. 타겟팅 자체가 해당 책에 관심있는 사람으로 한정되어 있지만 나중에는 타입에 따른 이달의 책 추천도 만들고 싶다는 생각! 이번 달은 책을 읽을 시간이 얼마나 있는지, 주로 어느 장소에서 읽을..
-
ep.1 <김초엽 SF소설'지구 끝의 온실' 인물 테스트>Web/토이프로젝트 2022. 2. 7. 02:40
김초엽의 SF소설 속 등장인물 중 어떤 인물과 내 성격이 비슷한지 알아보는 테스트 입니다. 테스트를 진행하시려면 아래 링크를 클릭하세요! https://sf-charactertest.netlify.app/ sf소설 속 나와 닮은 인물은? 김초엽 소설 '지구끝의 온실' 인물테스트 sf-charactertest.netlify.app 출처: 메인 이미지-자이언트북스'지구끝의온실', 결과창 아이콘- IconMarketPK:Flaticon www.inflearn.com/course/심리테스트-사이트-제작/dashboard [무료] [하루 10분|Web Project] HTML/JS/CSS로 나만의 심리테스트 사이트 만들기 - 인프런 | 강의 HTML / JS / CSS 만을 가지고 직접 심리 테스트 사이트를 만들..
-
아코디언 갤러리 html, css 코드 소스Web/인프런 2022. 1. 20. 21:02
See the Pen 아코디언 갤러리 by seohyeon baek (@100seo) on CodePen. 미리보기에는 이미지 적용이 안되어서 하얀 배경으로 보입니다. 아래 파일을 저장한 뒤 여시면 정상적으로 이미지가 보입니다. *적용예시 1. 개인 혹은 회사 포트폴리오 카테고리 프리뷰 페이지 회사소개-사업분야-갤러리-오시는길-상담문의 2. 제품판매 사이트 카테고리 프리뷰 페이지 ring-necklace-bracelet-earring-contact 3. 카드뉴스 타이틀 페이지 최근글1-최근글2-최근글3-최근글4-최근글5 *코드 관련 1. 이 코드는 코딩웍스(https://www.youtube.com/codingworks)님의 인프런 HTML+CSS+JS 퍼블리싱 강의 예제를 이용해 제작하였습니다. 원 코..
-
웹 포트폴리오 서비스 개발 스터디 (1)Web/토이프로젝트 2022. 1. 18. 22:59
스터디 시작 계기 인프런 학습 중 input을 활용하여 포트폴리오를 손쉽게 만드는 서비스를 제공하는 사이트 구축 아이디어를 고안해 혼자 스터디를 시작하였다. 문제해결 강의에서는 span태그를 사용해 소프트웨어 이름을 직접 설정했지만, input코드를 이용해 사용자가 직접 수정할 수 있도록 하였다. 리서치를 계속해봐도 number 태그에 따라오는 화살표를 없애거나 크기조절 관련 내용만 많고 화살표를 텍스트 앞에 배치하는 방법은 나와있지 않았다. 흔한 경우는 아니겠지만 나는 %퍼센트 스팬을 숫자와 딱맞게 하고싶기 때문에 옮기는것이 불가피했다. 하지만 셀렉트태그처럼 텍스트 옆쪽이 고정인 것 같았고(아닐 수도 있다.) 그래서 그냥 오른쪽 마진을 내주고 너비랑 앱솔루트로 해결했다. 기능상 문제는 없으니 몇시간 애..
-
웹디자인기능사 필기 독학 방법 공유 (2)Web/웹디자인 기능사 2022. 1. 18. 16:34
웹디자인기능사 1회차 시험이 앞으로 일주일 정도 남았습니다. 모쪼록 최대한 많이 풀어보셔서, 필기는 무난히 합격하시길 바라겠습니다. 이전포스팅에서 언급드린 어플로 웹디자인기능사 모의고사를 몇번 풀어보셨나요? 막연한 느낌 그리고 처음보는 단어들이 있으셨을텐데, 그럴때엔 오답노트를 작성해 내가 틀린문제의 답은 뭐였는지 공책에 적어두세요. 저는 개인적으로 반복 풀기도 중요하지만 틀린문제를 다시는 틀리지 않는게 중요하다고 생각합니다. 웹디자인기능사는 과락이 없기때문에 3과목중 자신있는 과목은 만점받겠다는 각오로 하셔야합니다. 위 파일은 저도 독학 할 때 얻은 파일인데 생소한 단어가 나왔을때 여기서 1차로 찾아보시고 그래도 없다면 인터넷서치를 적극 이용하시길 바랍니다. 1. 디자인 일반 주요 키워드 : 점.선.면..
-
@key frame 보더 회전 애니메이션Web/인프런 2022. 1. 13. 17:47
See the Pen radius rotate by seohyeon baek (@100seo) on CodePen. 기본 html 구문 불러오기 Heading Text Lorem ipsum dolor, sit amet consectetur adipisicing elit. Vel accusantium voluptate molestiae, dolor ullam est laboriosam mollitia voluptatem. Quibusdam beatae dolore, explicabo sunt perferendis in est obcaecati? Earum, porro maiores! Read More Heading Text Lorem ipsum dolor, sit amet consectetur adipis..
-
@keyframe 도형 로딩 애니메이션Web/인프런 2022. 1. 7. 21:34
See the Pen Untitled by seohyeon baek (@100seo) on CodePen. 기본 html 구문 불러오기 css 작업 /*로딩화면이므로 정중앙 배치*/ body{ display: flex; justify-content: center; align-items: center; height: 100vh; } .loading{ /*border: 1px solid red; */ width: 30px; height: 30px; position: relative; } .loading span{ position: absolute; width: 10px; height: 10px; background-color: red; /*loading이라는 이름을 가진 애니메이션을 n초만큼 무한반복 재생시..