개발새발 로그

웹 표준이란? 어떤 운영체제나 브라우저에서든 동일한 콘텐츠를 볼 수 있도록 웹페이지를 만들 때 지켜야 하는 규칙 왜 웹표준이 필요할까요? 1990년대부터 2000년대 초반까지 넷스케이프 인터넷 익스플로러 등 다양한 브라우저들이 나타나기 시작했다 그로 인해 과도한 경쟁이 발생하기 시작하였고 해당 브라우저에서만 사용 가능한 기능들이 나타났고, 그로 인한 피해는 개발자에게 돌아갔다. 여러 브라우저를 지원해야 하기 때문에 여러 버전이 페이지를 만들었어야 했다 우리가 웹 페이지를 개발한다고 하면 각 브라우저마다 다 따로 만들어 줘야 되는 셈 이를 해결하기위해 W3C라는 공식 웹 표준 기구가 설립되었고, 이를 통해 각 브라우저에서도 동일한 콘텐츠를 볼 수 있는 환경이 조성되었다. 웹 표준을 지킬 때의 장점 1. 운..

1. material icons cdn 이라고 검색하기 https://developers.google.com/fonts/docs/material_icons?hl=ko 머티리얼 아이콘 가이드 | Google Fonts | Google for Developers 이 페이지는 Cloud Translation API를 통해 번역되었습니다. Switch to English 머티리얼 아이콘 가이드 컬렉션을 사용해 정리하기 내 환경설정을 기준으로 콘텐츠를 저장하고 분류하세요. 머티리얼 아이 developers.google.com 2. link태그 있는 부분 복사하기 3. index.html에 붙여넣기 4. material icons 검색하기 https://fonts.google.com/icons Material Sy..

IE11에서 ES6문법을 부분적으로 지원해서 가끔 문제가 생길 수 있다. (예를 들어 Arrowfunction) 크로스브라우징을 위해서 이 부분도 기억하는 것이 좋을 것 같다. ... ... 위 코드처럼 babel을 cdn에서 가져오고 우리가 사용하는 js파일에 type을 "text/babel" 로 설정해주면된다.

페이스북이나 트위터에 URL을 복사해서 올리면 아래와 같이 썸네일이 나오게된다. 우리가 만들 웹사이트에도 공유하게되면 위와 같이 나오도록 속성을 설정해보자. 먼저 페이스북, LinkedIn 에서의 썸네일을 위한 Open Graph를 설정한다. 페이스북과 Linkedin의 Open Graph 1. property ="og:type" : og는 Open Graph의 약자 -> 여기 content에는 website라는 속성말고도 많은 속성이있다. https://ogp.me/#types Open Graph protocol The Open Graph protocol enables any web page to become a rich object in a social graph. ogp.me 2. 다시 이미지를 보..

반응형 웹사이트를 만드는 과정을 작성해보았다. 먼저 visual studio code를 열어서 아래와 같이 폴더와 파일을 구성해주는게 시작이다. 기본 시작을 이렇게 시작하면 된다. 이제 index.html에서 visual studio code의 자동완성 기능을 이용해 HTML 기본틀을 생성한다. 그리고 검색엔진과 viewport를 위해 meta태그들을 작성해보자 1. description : 웹페이지 설명 2. keywoeds : 웹페이지의 태그(사용자가 어떤 키워드를 가지고 검색했을 때 이 웹페이지가 나오면 좋을지) -하지만 구글 같은경우에는 이 키워드를 무작위로 작성해서 이 키워드 자체만으로 웹페이지를 사용자에게 보여주진 않는다. (없는 것보단 나으니까) 3. author : 저자 4. viewpor..

https://heroicons.com/ Heroicons Beautiful hand-crafted SVG icons, by the makers of Tailwind CSS. heroicons.com https://heroicons.dev/ Heroicons Heroicons is a collection of MIT open source interface icons for web and app development. Icons are free, no attribution required. Icons by @steveschoger. Website by @username_ZAYDEK. heroicons.dev 위 사이트에서 미리 정의된 SVG아이콘들을 사용하면된다.

font-size 속성에 적용했을 때 % -현재 요소의 부모요소를 기준으로 한다. em -현재요소의 부모요소를 기준으로한다. rem -최상위 부모요소를 기준으로한다. font-size외의 속성에 적용했을 때(padding, width...) % -현재요소의 부모요소의 너비를 기준으로한다. em - 현재 요소의 font-size의 크기를 기준으로한다. rem -최상위 요소의 font-size크기를 기준으로한다.

Git이 무엇인가요? Git은 로컬 도구입니다. 무료로 제공되고, 다운로드해서 Windows 또는 Mac 컴퓨터에 둘 다 똑같이설치하면 됩니다. 이 도구를 설치하고 나면, 웹 개발 프로젝트의 다양한 코드 버전들을 제어할 수 있게 됩니다. Git 도구는 레포지토리를 이용해 작동하는 것 입니다. Git으로 관리하는 프로젝트는 자동으로 레포지토리가 생성됩니다. 일반적으로 Git에 대해 요약하자면, 여러분의 웹 개발 프로젝트의 서로 상이한 버전들을 리포지토리에서 관리하는 로컬 도구입니다. GitHub는 Git와 이름에 있어서는 유사하지만 별개의 도구이며 GitHub는 Git 리포지토리에서 클라우드 호스팅 제공자 역할을 수행합니다. Git는 로컬도구이지만 GitHub는 Git으로 관리한 프로젝트를 클라우드로 보내..