개발/UI개발

[SEO] target="_blank" 좀 더 알고 사용하자 (noopener, noreferrer, nofollow 차이점에 대해서)

웹사이트를 개발할 때 종종 외부링크로 보내기 위한 마크업을 할 때가 있습니다. 그때 사용하는 속성이 target="_blank"인데, 이 속성을 사용할 때 같이 사용해야되는 속성이 있습니다. noopener, noreferrer 그리고 nofollow 입니다. noopener는 무엇인가? target = "_blank"값을 사용하면 재밌는 증상이 나타납니다. 아래 이미지를 한번 볼까요? 네이버 웹사이트로 이동 target = "_blank" 속성값을 noopener 속성을 사용하지 않고 사용한다면 연결중인 페이지는 연결 페이지에 부분적으로 액세스 할 수 있습니다. window.opener 객체가 존재하는 모습을 확인할 수 있습니다. 해당 부분은 연결 페이지에서 이전 페이지를 제어할 수 있는 권한이 있다는..

개발/UI개발

[UI 개발] responsive image gallery(반응형 이미지갤러리)

오늘 예제는 반응형 이미지갤러리입니다.자바스크립트나 jQuery를 활용하지 않고, 순수 HTML, CSS 코딩을 통해 반응형 이미지갤러리를 구현하는 것이 포스팅의 목표입니다. 바로 예제를 보면서 시작해보겠습니다. HTML 시맨틱마크업 CSS3 이미지는 각자 파일의 경로에 맞춰서 작성해주시기 바랍니다. 위의 코드는 브라우저나 디바이스의 크기에 따라 유동적으로 변하게 만들어 줍니다. 맨 위의 @media all and (min-width: 960px)는 960px 이상 사이즈부터는 #gallery_layout을 가로, 세로 가운데 정렬을 시켜주기 위해 사용했습니다. 테스트는 하단의 URL에서 확인하실 수 있습니다. http://mismaven.kr/test/responsive_gallery/index.htm..

개발/UI개발

[UI 개발] css3 - tab menu 제작(간단한 탭메뉴 제작)

🖐 들어가기 전에 이번에는 간단한 탭메뉴를 자바스크립트를 통해 구현한 코드를 공유하도록 하겠습니다. 아래에 예시처럼 동작하는 UI를 개발하는 것이 이번 포스팅의 목표입니다. 💻 HTML 시멘틱마크업 How to develop a tab menu with jQuery 제작자 : 박경두 고려대학교 경영정보학과 멋쟁이 사자처럼 4기 About Portfolio Contact Travel About Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer ..

개발/UI개발

[UI 개발] css3 - overlay side navigation 제작(오버레이 사이드 네비게이션)

Side Navigation(overlay) 이번에 준비한 사이드 네비게이션은 컨텐츠를 밀어내고, 컨텐츠 부분의 배경을 오버레이하는 사이드 네비게이션입니다. 예시 HTML 시멘틱마크업 우선 사이드 네비게이션을 제작하기 위한 기본적인 HTML 마크업을 위 코드와 같이 진행했습니다. CSS3 사이드 네비게이션 부분에 관련된 CSS 코드입니다. Javascript jQuery를 활용해서 개발했다면, 훨씬 깔끔하고, 유지보수하기 쉬운 코드가 되었겠지만, 자바스크립트를 공부하기 위해서 자바스크립트를 통해서 UI 개발을 진행했습니다. 전체 코드 완성된 코드입니다. 복사해서 사용하셔도 되지만, 최대한 동작 원리를 이해하시고 사용하시면 실력 키우는데에도 많은 도움이 있을 것 같습니다.

개발/UI개발

[UI 개발] css3 - push-content side navigation 제작(사이드 네비게이션)

Side Navigation(push content) 이번에 준비한 사이드 네비게이션은 컨텐츠를 밀어내는 사이드 네비게이션입니다. 예시 HTML 시멘틱마크업 우선 사이드 네비게이션을 제작하기 위한 기본적인 HTML 마크업을 위 코드와 같이 진행했습니다. CSS3 사이드 네비게이션 부분에 관련된 CSS 코드입니다. Javascript jQuery를 활용해서 개발했다면, 훨씬 깔끔하고, 유지보수하기 쉬운 코드가 되었겠지만, 자바스크립트를 공부하기 위해서 자바스크립트를 통해서 UI 개발을 진행했습니다. 전체 코드 완성된 코드입니다. 복사해서 사용하셔도 되지만, 최대한 동작 원리를 이해하시고 사용하시면 실력 키우는데에도 많은 도움이 있을 것 같습니다.

개발/UI개발

[UI 개발] css3 - full-width side navigation 제작(풀 사이드 네비게이션)

Side Navigation(full-width) 이번에 준비한 사이드 네비게이션은 페이지 전체를 덮는 사이드 네비게이션입니다. 예시 HTML 시멘틱마크업 우선 사이드 네비게이션을 제작하기 위한 기본적인 HTML 마크업을 위 코드와 같이 진행했습니다. CSS3 사이드 네비게이션 부분에 관련된 CSS 코드입니다. Javascript jQuery를 활용해서 개발했다면, 훨씬 깔끔하고, 유지보수하기 쉬운 코드가 되었겠지만, 자바스크립트를 공부하기 위해서 자바스크립트를 통해서 UI 개발을 진행했습니다. 전체 코드 완성된 코드입니다. 복사해서 사용하셔도 되지만, 최대한 동작 원리를 이해하시고 사용하시면 실력 키우는데에도 많은 도움이 있을 것 같습니다.

개발/UI개발

[UI 개발] css3 - side navigation 제작(사이드 네비게이션)

Side Navigation 안녕하세요. 오늘부터 UI 개발한 코드를 블로그에 공개하려고 이렇게 글을 쓰게 되었습니다. 꾸준히 개발하면서 나온 결과물을 포스팅하겠습니다. ㅎ 혹시 필요한 기능이 있으시다면, 자유롭게 사용하시고, 개선사항이 있으면 알려주시면 고맙겠습니다. 예시 HTML 시멘틱마크업 우선 사이드 네비게이션을 제작하기 위한 기본적인 HTML 마크업을 위 코드와 같이 진행했습니다. CSS3 사이드 네비게이션 부분에 관련된 CSS 코드입니다. Javascript jQuery를 활용해서 개발했다면, 훨씬 깔끔하고, 유지보수하기 쉬운 코드가 되었겠지만, 자바스크립트를 공부하기 위해서 자바스크립트를 통해서 UI 개발을 진행했습니다. 전체 코드 완성된 코드입니다. 복사해서 사용하셔도 되지만, 최대한 동작..