Reload0213 devNote

https://postcode.map.daum.net/guide 주소찾기 API가이드 링크이며 아래는, 내용을 가져와 본 것이다. Key를 발급 받을 필요가 없습니다. 사용량에 대한 제한이 없습니다. 기업용이든 상업적 용도이든 상관없이 무료로 사용 가능합니다. 기초구역번호가 발급된 도로명 주소, 영문 주소를 확인 가능합니다. 행정안전부에서 제공하는 "도로명 주소" DB를 직접 업데이트 받고 있으므로 가장 최신의 데이터를 이용하실 수 있습니다. 하단 로고를 임의로 가릴 경우, 사용에 제약이 발생할 수 있습니다. JS API 스크립트를 임의 수정하여 사용할 경우, 사용에 제약이 발생할 수 있습니다. 본 서비스는 인터넷이 가능한 환경에서 동작합니다. 인트라넷(내부망) 환경은 공식적으로 지원하지 않으며, 별도 ..

포트폴리오를 만드는 중 유튜브 동영상을 삽입하려하니 자꾸 반정도만 보이게 잘려나온다던지 조절이 안되게 삽입되는 경우가 자꾸 발생하여 검색 및 복습을 통해 깔끔하게 삽입하는 방법을 정리해 놓는다. 이는 position의 absoulute속성이 가지고 있는 바로 위의 reletive속성을 가진 부모를 찾아가는 점을 이용한 것으로 먼저 비디오(iframe)에게 position: absolute; top: 0; left: 0; width: 100%; height: 100%;를 준다. 그리고 비디오의 바로 위 부모에게 position: relative; width: 100%; heigth: auto; padding-top: 50%를 주고, 적당히 액자형식의 디자인을 조금 해주면 간단히 완성된다. HTML 샘플코드..

웹에서 슬라이드, 스와이프 UI는 준 필수라고 할정도로 쉽게 찾아볼 수 있고 많이 사용된다. 공부를하며 여태까진 직접구현 예제로서 구현했지만 실제로는 이미 구현된 플러그인, 라이브러리를 주로 사용한다하여 활용하는 법을 익히고, 사용해보려 한다. 슬라이드, 스와이프 라이브러리도 하나만 있는 것이 아닌 다양한 라이브러리가 존재하지만, 그중 스와이퍼와 슬릭을 고민하다가 스와이퍼가 완전한 무료 오픈 소스라 하여 스와이퍼로 결정. 샘플 코드 및 확인 swiper.js란? swipe.js는 편리하고 강력한 슬라이더를 구현하는 라이브러리이다. 모바일도 지원하며, jquey와 같은 별도의 프레임워크가 필요 없다. 그리고 오픈 소스라서 무료로 사용할 수 있다. 더 자세한 정보는 swiper.js 공식 홈페이지를 참고해주..

제일 처음 HTML과 CSS를 배우기 시작하고, 클론코딩을 시도하려 했을때 가장 애를 먹었던 부분이 컨텐츠들을 정렬하고 위치를 내가 원하는 대로 두는것이 어렵게 다가왔습니다. 지금도 다른 영역을 배우다가 다시 앞에 보여지는 부분들 즉 이러한 컨텐츠들을 구성하려니 또 다시 처음하는 것처럼 가물가물하여 블로그에 정리해봅니다. 여러방법이 있으나 absolute를 이용한 방식은 개인적으로 별로인 것 같아 다른 2가지 정도씩으로 정리해보겠습니다. div 가운데 정렬 하는 방법 div 영역을 중앙에 배치하는 방향에 따라 다양한 방법이 존재합니다. 다음과 같이 정렬 방향에 따라 케이스를 나눠서 방법을 소개해드리도록 하겠습니다. 정렬 방향 div의 가로만 정렬 div의 세로만 정렬 div의 가로와 세로 모두 정렬 di..

position-fixed의 특징 CSS의 position 속성은 엘리먼트가 브라우저 화면에 어떻게 배치되는가를 결정합니다. 어떤 엘리먼트의 position 속성을 fixed로 지정해줄 경우, 해당 엘리먼트는 부모 엘리먼트로 부터 완전히 독립되어 브라우저 화면(viewport) 상에서 어디든지 원하는 위치에 자유롭게 배치시킬 수 있게 됩니다. 뿐만 아니라, 브라우저 화면을 스크롤했을 때도 영향을 받지 않기 때문에, 다른 엘리먼트들이 상하좌우로 움직일 때, position 속성이 fixed로 설정되어 있는 엘리먼트는 그 자리에서 움직이지 않습니다. 상단에 고정되어 있는 메뉴바/네비게이션을 만드는 방법에 대해서 알아보겠습니다. - 우선 상단 메뉴영역과 메인영역을 Html을 통해 간단히 작성해준 후 메뉴바를 ..