UX 개발 썸네일형 리스트형 CSS box-sizing과 초기 설정(border-box) border-box로 설정하는 것이 일반적으로 css로 스타일링을 하는데 있어서 관행으로 여겨진다. 다만 매우 널리 적용되는 방식인데도 불구하고 표준 resetter라고 볼 수 있는 Nomarlize.css에는 이 부분이 포함되지 않은 것을 확인되는데, 이는 말 그대로 최소한의 항목에 대해서는 속성을 resetting하려는 제작자의 의도인 것으로 보인다. box-sizing 속성을 이해하기 위해서는 기본 CSS Box Model에 대한 이해가 필요하다. border-box로 box-sizing을 설정하는 과정은 box model의 padding, margin, border를 개체 안에서 할당하는 과정이라고 볼 수 있다. 기존 개체의 크기가 변화하지 않는 것이 특징이다. The Beginner's Guid.. CSS clip 속성 clip 이미지나 도형 등을 클립핑할 때 사용. IE8도 지원. 클리핑 효과를 주기 위해서는 속성을 부여하는 개체의 position 속성이 absolute여야 한다. clip 속성은 사각형을 통한 클리핑한 지원하나, 새로운 속성인 clip-path는 다양한 도형을 통한 클리핑을 지원 예정이라고 한다. rect가 받는 인자는 마스킹되는 영역을 정의하는 것으로 (top, right, bottom, left)로 정의된다. CSS만을 활용해서 도넛 그래프 등을 만들 때 유용하게 쓰일 수 있다. img { position: absolute; clip: rect(0px,60px,200px,0px); } clip-path IE12부터 지원하며, 사각형 외 다양한 도형으로 통한 클리핑 가능 참고자료 CSS clip p.. var() - CSS 변수(Variables), 커스텀 프로퍼티 CSS variable이라고도 불리움. 말 그대로 값을 저장하는 변수를 지정할 수 있음. var(--header-color, blue); Sass의 변수와의 차이 Sass의 변수와 달리 CSS 자체 지원 속성이기 때문에 인라인 스타일 코드를 통해서 동적으로 값을 변환하는 것이 가능하다. :root { --main-bg-color: pink; } body { background-color: var(--main-bg-color); } 다만 IE에서 지원하지 않는다. 참고자료 var() Semi Circle Donut Charts 네이버 지도 API 활용 지역정보 오버레이 삽입 방법 네이버 지도에서 기본적으로 제공하는 정보창을 표시하는 것은 기본 기능으로 제공하지 않는 것으로 보이며, 이를 구현하기 위해서는 다음과 같이 네이버 API 문서에서 제공하는 것과 같이 커스텀 디자인으로 구현이 필요한 것으로 보인다. var HOME_PATH = window.HOME_PATH || '.'; var cityhall = new naver.maps.LatLng(37.5666805, 126.9784147), map = new naver.maps.Map('map', { center: cityhall, zoom: 10 }), marker = new naver.maps.Marker({ map: map, position: cityhall }); var contentString = [ '', ' 서울특별시청.. 지도 API 연동용 좌표값 확인하기 지도 API를 활용할 때 위치 정보를 나타내기 위해서는 해당 위치의 좌표 수치들을 입력해야 합니다. 과거 네이버 지도에서도 좌표를 확인하는 것이 가능했지만, 현재는 불가능한 것으로 보입니다. 구글맵스를 이용해서 이 작업을 진행해야 하는데, 구체적 방법은 다음과 같습니다. 원하시는 지역 검색 후, 해당 지역을 우클릭하여 'What's here?' 클릭 표시되는 좌표값 정보를 확인 [MacOS] 원격 제어하기 내부망 내부망에서만 접근되도록 설정하는 원격 컴퓨팅 설정은 위 그림처럼 Remote Management를 쉐어링해 주는 것만으로 쉽게 설정이 가능하다. 외부망 외부망에 권한을 허용하고자 하는 경우 5900 포트에 대해서 라우터에서 포트포워딩을 해 주어야 한다. 포트포워딩을 하는 방법의 경우, 한국에서는 IPTIME이나 인터넷제공자가 제공하는 라우터를 많이 쓸텐데 관련 기종에 맞는 포트포워딩 방식을 검색해 보도록 한다. 원격을 접근하기 위한 클라이언트는 RDP 형식 클라이언트가 아니라 VNC 형식을 사용해야 한다. 맥OS에서 접근하는 경우 내장된 Screen Sharing 앱을 통해서 접근이 가능하다. [HTML] 숫자의 자동 링크화 현상 제거 위 그림과 같이 특히 iOS에서 의도하지 않은 숫자들의 전화번호 링크화는 예측하지 못한 요소로서 디자이너들과 사용자를 당황스럽게 할 수가 있다. 이를 제거하는 방법은 다음과 같다. 메타 태그를 추가함으로써 이와 같은 전화번호 변화 현상을 수정할 수 있다. 메타 태그를 설정한 이후에도 자기가 원하는 항목에 대해서는 선별적으로 '전화번호화'를 할 수 있는데 그 방법은 다음과 같다. 123-456-7890 관련 자료 Disabling the conversion of numbers into links on mobile browsers 블로그 빌더로서의 티스토리 플랫폼 특단점 최근 초대장을 매개로 이루어지던 폐쇄형 블로깅 플랫폼이었던 티스토리가 최근 개방형으로 별도의 초대장 없이도 누구나 블로그를 빌드할 수 있도록 서비스 성격이 개편되었다. 이글루스의 함께 2000년대 초반의 블로그 시장을 주도했던 티스토리가 어떠한 성격의 서비스로 자리잡고 있는지 그리고 활용폭은 얼마나 되는지 파악하고자 한다. 특점 쉬운 가입과 사이트 개설 커스텀 도메인과 SSL 무료 지원 마크다운 에디터 지원 기본적 SEO 지원 모던한 디자인 HTML/CSS 편집 지원 단점 페이지 리스팅 외 사이트 구조를 벗어나기 힘듬 특정 카테고리 기반 페이지 리스팅 불가능 (가능하나 복잡성 높음) 전체적으로 아티클 기반의 블로깅 빌더로서의 제약적 성격이 강함 리소스 관리 힘듬 다변적 개발 환경 지원 안 됨 아티클 기반.. 이전 1 ··· 11 12 13 14 15 다음
단순함연구소 UX개발실
