Front-end개발을 한다고 하면서 CSS3를 사용하는데.. 주로 사용하는 선택자들은 쉽게 사용하는데.. 많이 사용하지 않는 선택자에 대해서는 가끔씩 잊어버리거나 사용법을 잊어버리는 경우가 있습니다. 그래서 항상 참조할 수 있게 간단히 정리를 해 보려고 합니다. 선택자는 크게 기본 선택자, 속성 선택자, 상태 선택자로 나눌수 있습니다. 기본 선택자 CSS3를 다루기 위해서는 반드시 알아야 하는 선택자 입니다. 서식 설명 CSS레벨 * […]
아이콘 폰트인 구글 머티리얼 아이콘 (Google Material icons)을 사용하는 방법입니다. 아이콘폰트가 무엇인지 궁금하면 이전에 포스팅한 아이콘 폰트(Icon font) 자유자제로 사용하기를 먼저 읽어 보시는 것을 추천합니다. 구글 머티리얼 아이콘 (Google Material icons) 구글 머티리얼 아이콘 홈페이지바로가기 구글에서도 머티리얼 아이콘을 무료로 사용할 수 있게 공개를 했습니다. 구글 머티리얼 아이콘은 웹폰트형식 뿐만이 아니라 안드로이드나 아이폰에서도 사용할 수 있게 […]
웹사이트를 제작 시 생동감 있는 사이트를 만들기 위해서는 아이콘은 필수로 들어가는 요소입니다. 간단하게는 블릿에서 부터 중요하게는 웹사이트의 매인 이미지 까지도 아이콘으로 사용하는 경우가 있는데 예전에는 이러한 아이콘들을 디자이너에게 만들어 달라고 요청을 하던지 아니면 웹에서 무료로 제공하는 아이콘 이미지들을 찾아서 잘라서 적용하고는 했었는데요. 근래에는 오픈소스가 발달하면서 이러한 아이콘들을 쉽고 편하게 사용할 수 있게 제공해 주는 다양한 […]
정해져 있는 아이콘 폰트를 사용하는 경우도 있지만 때에 따라서는 내가 원하는 아이콘을 폰트화 시켜서 사용해야 할 경우도 있습니다. 이번에는 나만의 아이콘 폰트를 만드는 방법에 대해서 정리해 보려고 합니다. 아이콘 폰트가 무엇인지 궁금하면 이전에 포스팅한 아이콘 폰트(Icon font) 자유자제로 사용하기를 먼저 읽어 보시는 것을 추천합니다. 나만의 아이콘 폰트 만들기 오픈소스로 제공되어 정해져 있는 아이콘 폰트를 사용하는 […]
HTML로 레이아웃을 설정하다보면 DIV태그 안 이나 P태그 안에 이미지가 있는 경우 이미지 하단에 약 1~3px정도의 공백이 생기는 경우를 볼 수 있습니다. 그 공백을 없애려고 이리 찾아보고 저리 찾아봐도 해결이 잘 되지 않는데요. 이것을 없애는 방법을 정리해 보려고 합니다. ▲ 하단에 파란색의 공백이 있음(표시를 위해 백그라운드색을 파란색으로 했음) <div><img src=”https://placeimg.com/400/300/any” /></div> 원인 위와 같이 Image를 DIV나 […]
HTML의 태그는 크게 블록 요소(block element)와 인라인 요소(inline element)로 나누어 집니다. 이 부분을 명확히 이해하고 있어야 CSS를 사용하는데 어려움이 없습니다. 이 각각의 요소에 적용되는 CSS가 별도로 존재하기 때문에 CSS를 적용해 놓고도 “왜 적용이 되지 않지?” 라는 상황이 발생할 수 있습니다. 예를들면…. 인라인 요소는 height가 적용되지 않는다. 인라인 요소는 width가 적용되지 않는다. 블록 요소는 vertical-align 이 […]
아이콘 폰트인 폰트어썸 (Font Awesome)을 사용하는 방법입니다. 아이콘폰트가 무엇인지 궁금하면 이전에 포스팅한 아이콘 폰트(Icon font) 자유자제로 사용하기를 먼저 읽어 보시는 것을 추천합니다. 폰트어썸 (Font Awesome) 폰트어썸 (Font Awesome) 홈페이지 바로가기 폰트어썸은 가장 유명한 대표적인 아이콘폰트 제공 사이트 입니다. 다양한 형태의 아이콘이 빠르게 업데이트되고 있으며 깃헙에서 51000여개의 star를 받고 있을 정도로 사랑을 받고있습니다. 현재 유료서비스를 시도하고 […]
자동차 오너로써 HUD (전방표시장치 [Head Up Display])만 봐도 대단해 보이는데 해드램프를 이용한 네비게이션까지 나온다고 하니 UX 발전의 끝은 어디인가 하는 생각이 듭니다. 메르세데스-벤츠에서 해드램프를 이용한 네비게이션인 디지털 라이트(Digital Light)를 공개했다고 합니다. 디지털 라이트를 쉽게 설명한다면 해드라이트에 고성능 프로젝터를 달아놓은 것이라고 보면 될것 같은데요. 메르세데스-벤츠는 눈부심 방지가 적용된 2백만 픽셀의 해상도에 해당하는 헤드 라이트를 장착헸디고 합니다. […]
아이콘 폰트인 XEICON을 사용하는 방법입니다. 아이콘폰트가 무엇인지 궁금하면 이전에 포스팅한 아이콘 폰트(Icon font) 자유자제로 사용하기를 먼저 읽어 보시는 것을 추천합니다. XEICON XEICON 홈페이지 바로가기 한 시대를 풍미했던 PHP 무료게시판 서비스인 제로보드가 네이버의 서포트를 받으면서 Xpressengine 바뀌었습니다. XEICON은 그 Xpressengine에서 서비스를 제공하고 있는 아이콘 폰트 서비스 입니다. 제공하는 방법과 사용 방법이 폰트어썸 (Font Awesome)과 거의 흡사하여 […]
웹디자인을 하면서 레이아웃을 잡는 방법에 대해서 시대별로 많은 변화가 있었습니다. Web이 나오기 시작한 초창기에는 Table을 이용하여 화면의 레이아웃을 잡았고 웹표준, 웹접근성이 이슈화 되면서 시멘틱한 마크업이 대세가 되면서 CSS의 DIV를 이용한 방법으로 레이아웃을 잡았습니다. CSS3로 버전업이 되면서 레이아웃 구현애 대한 방법으로 Flexbox가 탄생하게 되었고 2017년 현재 레이아웃을 편리하게 구현하기 위해서는 Flexbox를 사용하여 구현하는 것이 최선이라 할 […]