본문 바로가기

전체보기

CSS 리셋 - Normalize.css & Reset.css Normalize 또는 Reset이라고 불리우는, 다양한 브라우저의 기본 설정을 일반적으로 사용되는 스타일로 '초기화'하는 역할을 하는 라이브러리에 대한 소개를 하고자 한다. Normalize를 기반으로 다양한 파생 버전이 등장하고 있다. 대표적인 것이 부트스트랩의 Reboot이 있다. Normalize는 최소한의 리세팅만 제공하므로, 조금 더 편의성이 높은 라이브러리를 찾는다면 좋은 선택이 아닐 수 있다. 다만 미니멀한 코딩이 우선시된다면 Normalize.css를 세팅하고 이를 지속적으로 업그레이드받는 것이(브라우저가 지속적으로 변하듯 이에 대한 Normalize.css도 지속적으로 업데이트되고 있다) 좋은 방법일 수 있다. 좀 더 어드밴스드한 리세팅 옵션을 설정하고 싶다면, 유명 프레..
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
[AI] Scissors, Knife, Join Tool - path를 cut하고 trim하기 Cut pahts Closed path에 대해서는 Pathfinder나 Shape Builder를 통한 manipulating이 가능하지만, open path에 대해서는 이보다 조금 더 수동으로 관리를 해 주어야 한다. Scissors 가위 툴을 주로 사용하는 것으로 확인되었으며 가위 툴의 단축키는 c이다. 여러 path를 선택하고 가위 툴을 사용하면 가장 상위에 있는 path를 대상으로 교차지점에 cutting이 이루어진다. 여러 path가 아닌 단일 path를 선택하고 커팅을 진행할 때는 앵커포인트를 생성하고 이를 기준으로 단절된 open paths를 생성하는 역할을 한다. Knife 나이프는 기본적으로 closed path에 대응하는 툴이지만, 가위 툴과 혼동을 유발하기 쉬우므로 개념 상 구분을 하..
[스케치] 개체 뒤에 있는(겹쳐진) 개체 선택하기 일부 다른 그래픽 소프트웨어에 있는 것처럼 겹쳐져 있는 레이어들을 순차적으로 선택할 수 있는 기능은 하지 않는 것으로 보인다. 개체 뒤에 있는 개체를 선택하는 방법에 대한 기능 상으로 제공되는 부분은 크게 두 가지로 파악할 수 있을 것으로 보인다. 1. CMD로 선택 cmd로 레이어 단위로 선택을 할 수 있다. 그러나 그룹 단위의 겹쳐짐이 아니라, 개체 단위의 겹쳐짐이 있을 경우 cmd만으로 개체를 선택을 하기는 쉽지 않다. 이런 경우 특정 개체를 lock하거나 안 보이게 하거나, 또는 다른 위치로 놓은 후에 선택 작업을 이어나가는 것이 필요한데, 이 모두 조금 번거로운 작업이 될 것이다. 2. 우클릭으로 항목들을 열거하여 선택 개체에 커서를 두고 우클릭(또는 ctrl + 클릭)을 하면 해당 커서에 대응..
네이버 지도 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?' 클릭 표시되는 좌표값 정보를 확인
외주/과외 문의

티스토리툴바