coding/개발 팁 65
개발자 도구 이용해 CSS를 효과적으로 보는 방법
개발자 도구에서 CSS를 정리해서 볼 수 있는 방법이 있다는 것 알고 계시나요? 1. 개발자 도구 켜기 개발자 도구 일단 개발자 도구가 무엇이냐면 위의 이미지처럼 코드를 확인해볼 수 있는 창입니다. 내가 짠 코드를 확인해보거나, 다른 사이트의 벤치마킹을 할 때도 주로 사용합니다. - 검사 어떻게 켜느냐. 개발자 도구를 사용할 화면에서 [오른쪽 클릭 > 검사] 메뉴를 선택하면 개발자 도구 창이 뜹니다. 단축키로는 [Ctrl + Shift + I], [F12]를 눌러도 개발자 도구를 열 수 있습니다. 다만 개발자도구의 사용이 막혀있는 페이지에서는 열리지 않을 수 있으니 참고해주세요. 2. CSS Overview 설정 CSS Overview는 CSS의 전체적인 스타일을 확인할 수 있는 기능입니다. 개별적으로 ..
코딩으로 아이콘 넣기 - font awesome
사이트 제작 시에 디자이너가 아이콘을 모두 만들어준다면 편하겠지만 개인 작업일때도 아이콘을 하나하나 만들면 오래 걸리잖아요? 그래서 이미 있는 아이콘을 무료로 사용할 수 있는 사이트를 알려드립니다. 1. Font Awesome https://fontawesome.com/ Font Awesome The world’s most popular and easiest to use icon set just got an upgrade. More icons. More styles. More Options. fontawesome.com 전에는 아이콘을 부트스트랩 4로 불러왔었는데 최근엔 4버전을 지원하지 않는 건지 찾을 수가 없더라고요. 그래서 아이콘을 불러오는 새로운 방법을 찾아봤습니다. 혹시 정확한 정보를 알고 계시..
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 사이트입니다. 영어로 되어있지만 저희에게는 자동번역기도 있고 태그를 사용하는 방법은 영어를 몰라도..
반응형 포트폴리오 사이트 제작 (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..
