coding 259
HTML 코드 검사 해보기
HTML 코드를 작성하다가 오류가 발생했다거나 혹은 유효한 태그가 맞는지 확인해 보고 싶을 때 사용할 수 있는 사이트가 있습니다. 1. W3C Marcup https://validator.w3.org/ The W3C Markup Validation Service Validate by File Upload Note: file upload may not work with Internet Explorer on some versions of Windows XP Service Pack 2, see our information page on the W3C QA Website. validator.w3.org 바로 W3C Markup 사이트입니다. 코드를 검사할 수 있는 방법은 세 가지가 있습니다. URI 주소를 넣는..
웹 개발 참고 사이트 MDN Web Docs
웹 개발을 위해 HTML의 모든 태그를 알고 있을 수 있을까요? 그렇지는 않을 거예요. 그 대신 MDN이라는 사이트를 이용해서 태그와 그 기능까지 모두 담겨있는 메모장을 얻어봅시다. 1. MDN Web Docs https://developer.mozilla.org/ko/ MDN Web Docs The MDN Web Docs site provides information about Open Web technologies including HTML, CSS, and APIs for both Web sites and progressive web apps. developer.mozilla.org 위 사이트가 MDN 사이트입니다. 영어로 되어있지만 저희에게는 자동번역기도 있고 태그를 사용하는 방법은 영어를 몰라도..
css로 마우스 오버 시 테두리에 애니메이션 효과를 줘보자
자 html 구조도 다 짜뒀겠다 본격적으로 css를 시작해서 애니메이션 효과를 넣어봅시다! 1. 가상 클래스 애니메이션 이외의 필요한 다른 css 코드들은 설명하지 않고 넘어가겠습니다. 포스팅 아래에 코드팬을 남겨둘 테니 궁금하신 분들은 참고해주세요. .line::before { content: ""; position: absolute; background: rgba(230, 230, 230, 0.7); display: inline-block; transition: all 0.5s; left: 10%; top: 10%; width: 0%; height: 2px; } ① before - before이라는 가상 태그를 클래스 이름이 line인 태그에 넣어줍니다. - 말 그대로 가상으로 있는 태그로 html ..
마우스를 올리면 그려지는 테두리 애니메이션 구조를 살펴보자(html)
기능보다 디자인 측면에 비중을 두는 작업인 오늘의 포스팅입니다. 어떤 홈페이지에 들어갔을 때, 마우스를 올리면 안쪽에 테두리가 천천히 그려지는 모습을 혹시 본 적 있으신가요? 저는 그게 멋있어 보였거든요. 그래서 css로 구현을 해보려고 합니다!! 오늘은 html 구조부터 살펴볼게요. 1. 미리 보기 ① 효과 이해하기 - 마우스를 올렸을 때 표시된 저부분이 한 번에 나타나는 것이 아니라 - 왼쪽에서부터 천천히 오른쪽으로 그려져서 테두리를 그리는 효과를 만들 거예요. http://ssimplay.com/ SSIMPLAY ssimplay.com 실제 적용 모습은 포트폴리오 사이트에서 확인해주세요. 2. html 구조 생각하기 설명하기에 앞서 이 모든 내용은 제가 했던 방법을 알려드리는 것으로 정답이 아니라 ..
반응형 포트폴리오 사이트 제작 (2021.09)
반응형 포트폴리오 사이트를 제작했습니다. http://ssimplay.com/ SSIMPLAY ssimplay.com contact :: www.instagram.com/draw_wool/ :: www.pinterest.co.kr/draw_wool/_created/ :: notefolio.net/draw_wool :: www.behance.net/draw_wool :: grafolio.naver.com/draw_wool [포트폴리오] - [PC] EEUU 쇼핑몰 [PC] EEUU 쇼핑몰 쇼핑몰 EEUU의 작업이 완료되어 사이트를 소개해드립니다. 1. PC 쇼핑몰 eeuu는 고급 코트를 판매하는 인터넷 쇼핑몰입니다. 좋은 기회를 얻어 퍼블리셔로 프로젝트에 참여했고, 사이트 제작이 완 ssimplay.tis..
