A story only I don't know

Posts

Showing posts with the label CSS3-HTML5

CSS3의 선택자 정리

- 8/23/2017

Front-end개발을 한다고 하면서 CSS3를 사용하는데.. 주로 사용하는 선택자들은 쉽게 사용하는데.. 많이 사용하지 않는 선택자에 대해서는 가끔씩 잊어버리거나 사용법을 잊어버리는 경우가 있습니다. 그래서 항상 참조할 수 있게 간단히 정리를 해 보려고 합니다. 선택자는 크게 기본 선택자 , 속성 선택자 , 상태 선택자 로 나눌수 있습니다. 기본 선택자 CSS3를 다루기 위해서는 반드시 알아야 하는 선택자 입니다. 서식 설명 CSS레벨 * 모든 요소 선택 2 E 태그명이 E인 요소 선택 1 #myIDname id 속성값이 "myIDname"인 모든 요소 선택 1 .myClassname class 속성값이 "myClassname"인 모든 요소 선택 1 E, F 모든 E 요소와 모든 F 요소 선택 1 E F E 요소의 자손 요소 중 모든 F 요소 선택 1 E > F E 요소의 자식 요소 중 F 요소 선택 2 E + F 형제 요소 중 E 요소 바로 뒤에 있는 F 요소 한개 선택 2 E ~ F 형제 요소 중 E 요소 뒤에 있는 F 요소 모두 선택 3 속성 선택자 태그의 속성에 따른 선택자 입니다. 대괄호([]) 사이에 속성을 넣어서 선택합니다. 서식 설명 CSS레벨 E[attr] E 요소 중 'attr' 속성이 포함된 요소 선택 2 E[attr="val"] E 요소 중 'attr' 속성의 값이 정확하게 'val'과 일치하는 요소 선택 2 E[attr~="val"] E 요소 중 'attr' 속성의 값에 'val'이(공백으로 구분) 포함되는 요소 선택 2 E[attr^="val"] E 요소 중 'attr' 속성의 값이 'val...

나만의 아이콘 폰트(Icon font) 만들기

- 8/02/2017

정해져 있는 아이콘 폰트를 사용하는 경우도 있지만 때에 따라서는 내가 원하는 아이콘을 폰트화 시켜서 사용해야 할 경우도 있습니다. 이번에는 나만의 아이콘 폰트를 만드는 방법 에 대해서 정리해 보려고 합니다. 아이콘 폰트가 무엇인지 궁금하면 이전에 포스팅한 아이콘 폰트(Icon font) 자유자제로 사용하기 를 먼저 읽어 보시는 것을 추천합니다. 나만의 아이콘 폰트 만들기 오픈소스로 제공되어 정해져 있는 아이콘 폰트를 사용하는 경우도 있지만 내가 원하는 아이콘을 아이콘 폰트 형태로 만들어서 사용할 수도 있습니다. 이럴경우 필요한 아이콘만 사용할 수 있어서 용량을 줄일 수 있는 잊점이 있습니다. 다만 아이콘 폰트로 만들어야하는 아이콘은 벡터그래픽 파일 형식인 SVG 파일 포멧이어야 합니다. 아이콘 폰트를 만들어 주는 대표적인 웹사이트가 fontello.com 와 icomoon.io 가 있습니다. 아이콘 폰트 생성하기 fontello.com 로 아이콘 폰트 생성 방법 먼저 fontello.com 에 접속을 합니다. fontello.com 는 웹사이트 페이지 전환 없이 한 페이지에서 아이콘 업로드부터 다운로드까지 완료 되도록 되어 있습니다. 사이트에 접속을 하면 기본적으로 무료로 제공되는 아이콘들이 이미 있습니다. fontello 에서 제작한 것도 있고 Font Awesome 에서 불러온 것 등 다양한 무료 아이콘 폰트도 있습니다. 라이선스가 표시되어 있으니 확인 후 사용하시면 됩니다. 제작자와 버전, 홈페이지, 라이선스 등 아이콘 폰트에 대한 정보를 확인할 수 있습니다. 보이는 아이콘 중에 원하는 아이콘을 마우스로 선택을 하시면 아이콘에 붉은색 원형이 표시 되면서 선택이 됩니다. 만들고자 하는 아이콘(SVG포멧)이 있다면 해당 영역에 드레그앤드롭을 하여 업로드를 합니다. (등록된 아이콘도 마우스로 클릭하여 선택을 해야 최종적으로 만들어집니다.) Download Webfont 버튼을 클릭하면 지금까지 선택된 아이콘들이 압축되어 다운...

구글 머티리얼 아이콘(Material icons) 폰트 사용하기

- 8/02/2017

아이콘 폰트인 구글 머티리얼 아이콘 (Google Material icons) 을 사용하는 방법입니다. 아이콘폰트가 무엇인지 궁금하면 이전에 포스팅한 아이콘 폰트(Icon font) 자유자제로 사용하기 를 먼저 읽어 보시는 것을 추천합니다. 구글 머티리얼 아이콘 (Google Material icons) 구글 머티리얼 아이콘 홈페이지바로가기 구글에서도 머티리얼 아이콘을 무료로 사용할 수 있게 공개를 했습니다. 구글 머티리얼 아이콘은 웹폰트 형식 뿐만이 아니라 안드로이드나 아이폰에서도 사용할 수 있게 SVG 와 PNG 형식으로도 아이콘을 제공을 하고 있습니다. 여기서는 다른사이트와 동일하게 웹폰트형식의 아이콘 폰트를 사용할 수 있는 방법에 대해서만 설명을 하도록 하겠습니다. 설치 방법 설치는 크게 2가지로 나누어지는데.. CDN 을 통해서 설치하는 방법과 아이콘 폰트를 다운로드 받아서 설치하는 방법이 있습니다. CDN 설치 가장 간단하게 사용할 수 있는 CDN설치 는 특별히 아이콘을 커스터마이징 할 일이 없을 떄 사용하면 됩니다. 구글 머티리얼 아이콘의 CDN 주소를 적용하고자 하는 웹사이트의 <hrad> 태그 영역에 styleseet 를 불러오는 것 처럼 링크를 걸어주면 됩니다. 웹사이트의 <head> 태그영역 안에 아래의 코드를 삽입합니다. <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> CDN이란? : CDN은 C ontent D elivery N etwork의 앞글자로 접속자가 인터넷상에서 가장 가까운 곳의 서버로 컨텐츠를 전송받아 트래픽이 특정 서버에 집중되지 않고 각 서버로 분산되도록 하는기술입니다 (구글검색) 소스제공자가 CDN을 전문으로 서비스하는 googleCDN 이나 BootstrapCDN , jsdelivrCDN 에 소스를 올려놓...

XEICON 아이콘 폰트 사용하기

- 8/02/2017

아이콘 폰트인 XEICON 을 사용하는 방법입니다. 아이콘폰트가 무엇인지 궁금하면 이전에 포스팅한 아이콘 폰트(Icon font) 자유자제로 사용하기 를 먼저 읽어 보시는 것을 추천합니다. XEICON XEICON 홈페이지 바로가기 한 시대를 풍미했던 PHP 무료게시판 서비스 인 제로보드 가 네이버 의 서포트를 받으면서 Xpressengine 바뀌었습니다. XEICON 은 그 Xpressengine 에서 서비스를 제공하고 있는 아이콘 폰트 서비스 입니다. 제공하는 방법과 사용 방법이 폰트어썸 (Font Awesome) 과 거의 흡사하여 폰트어썸 (Font Awesome)을 사용해 본 사람이라면 매우 쉽게 사용을 할 수 있습니다. 반대로 영어에 좀 취약한 사람이라면 XEICON 이 한글로 되어 있기 때문에 먼저 XEICON를 사용해 보고 폰트어썸 (Font Awesome) 을 사용하면 이해가 빠를 것입니다. 다만 주의 할 점은 LGPL라이선스 를 따른다는 것입니다. LGPL라이선스는...... 설치 방법 설치는 크게 2가지로 나누어지는데.. CDN 을 통해서 설치하는 방법과 아이콘 폰트를 다운로드 받아서 설치하는 방법이 있습니다. CDN 설치 가장 간단하게 사용할 수 있는 CDN설치 는 특별히 아이콘을 커스터마이징 할 일이 없을 떄 사용하면 됩니다. XEICON의 CDN 주소를 적용하고자 하는 웹사이트의 <hrad> 태그 영역에 styleseet 를 불러오는 것 처럼 링크를 걸어주면 됩니다. 웹사이트의 <head> 태그영역 안에 아래의 코드를 삽입합니다. <link rel="stylesheet" href="//cdn.jsdelivr.net/gh/xpressengine/xeicon@2.3.1/xeicon.min.css"> CDN이란? : CDN은 C ontent D elivery N etwork의 앞글자로 접속자가 인터넷상에서 가장 가까운 곳의 서버로 컨...

폰트어썸 (Font Awesome) 아이콘 폰트 사용하기

- 8/02/2017

아이콘 폰트인 폰트어썸 (Font Awesome) 을 사용하는 방법입니다. 아이콘폰트가 무엇인지 궁금하면 이전에 포스팅한 아이콘 폰트(Icon font) 자유자제로 사용하기 를 먼저 읽어 보시는 것을 추천합니다. 폰트어썸 (Font Awesome) 폰트어썸 (Font Awesome) 홈페이지 바로가기 폰트어썸 은 가장 유명한 대표적인 아이콘폰트 제공 사이트 입니다. 다양한 형태의 아이콘이 빠르게 업데이트되고 있으며 깃헙에서 51000 여개의 star 를 받고 있을 정도로 사랑을 받고있습니다. 현재 유료서비스를 시도하고 있긴하지만 무료로 사용할 수 있는 아이콘도 현재까지 675개 나 되어서 상당히 인기가 높습니다. 다만 주의 할 점은 GPL라이선스 를 따른다는 것입니다. GPL라이선스는...... 설치 방법 설치는 크게 2가지로 나누어지는데.. CDN 을 통해서 설치하는 방법과 아이콘 폰트를 다운로드 받아서 설치하는 방법이 있습니다. CDN 설치 가장 간단하게 사용할 수 있는 CDN설치 는 특별히 아이콘을 커스터마이징 할 일이 없을 떄 사용하면 됩니다. 폰트어썸의 CDN 주소를 적용하고자 하는 웹사이트의 <hrad> 태그 영역에 styleseet 를 불러오는 것 처럼 링크를 걸어주면 됩니다. 웹사이트의 <head> 태그영역 안에 아래의 코드를 삽입합니다. <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"> CDN이란? : CDN은 C ontent D elivery N etwork의 앞글자로 접속자가 인터넷상에서 가장 가까운 곳의 서버로 컨텐츠를 전송받아 트래픽이 특정 서버에 집중되지 않고 각 서버로 분산되도록 하는기술입니다 (구글검색) 소스제공자가 CDN을 전문으로 서비스...

아이콘 폰트(Icon font) 자유자제로 사용하기

- 8/02/2017

웹사이트를 제작 시 생동감 있는 사이트를 만들기 위해서는 아이콘 은 필수로 들어가는 요소입니다. 간단하게는 블릿 에서 부터 중요하게는 웹사이트의 매인 이미지 까지도 아이콘으로 사용하는 경우가 있는데 예전에는 이러한 아이콘들을 디자이너에게 만들어 달라고 요청을 하던지 아니면 웹에서 무료로 제공하는 아이콘 이미지들을 찾아서 잘라서 적용하고는 했었는데요. 근래에는 오픈소스 가 발달하면서 이러한 아이콘들을 쉽고 편하게 사용할 수 있게 제공해 주는 다양한 사이트들이 생겨나고 있습니다. 그 중에서도 아이콘들을 폰트와 비슷한 속성으로 만들어서 마치 폰트처럼 아이콘을 사용할 수 있게 제공을 하고 있습니다. 예전에 이런 것을 딩벳 폰트 라고 했었는데.. 이제는 웹폰트 형식으로도 무료 제공하고 있어서 웹사이트에 쉽게 적용할 수가 있습니다. 이 아이콘 폰트는 이미지가 백터 그래픽 형태로 되어 있어서 크기를 늘리든 줄이든 상관없이 선명한 화질을 보장받을 수 있고 색상도 일반 웹폰트처럼 CSS 에서 color 속성으로 변경을 할 수가 있습니다. 다만 아이콘이 폰트형식이기 때문에 단색으로 밖에는 설정할 수 가 없습니다. 아이콘폰트 를 제공하는 곳은 많으나 대표적으로 상업적인 용도로도 사용 가능한 3곳의 웹사이트를 소개할까 합니다. 폰트어썸 (Font Awesome) 폰트어썸 은 현재 가장 유명한 대표적인 아이콘폰트 제공 사이트 입니다. 현재 깃헙에서 51,000 여개의 star 를 받고 있을 정도로 인기가 있습니다. 다양한 형태의 아이콘이 빠르게 업데이트되어 제공되고 있으며 현재 유료서비스도 시도하고 있긴 하지만 무료로 사용할 수 있는 아이콘도 현재까지 675개 나 되어서 일반적으로 사용하기에는 부족함이 없습니다. 전체 라이선스는 GPL 을 따르고 있고 폰트는 SIL , 소스코드는 MIT 를 따르고 있습니다. 자세한 사용방법은 폰트어썸 (Font Awesome) 아이콘 폰트 사용하기 에 포스팅하겠습니다. XEICON 한 시대를 풍미했던 PHP 무료게시판 서...

이미지 하단에 생기는 이상한 공백 없애기

- 7/25/2017

HTML로 레이아웃을 설정하다보면 DIV 태그 안 이나 P 태그 안에 이미지 가 있는 경우 이미지 하단에 약 1~3px정도의 공백 이 생기는 경우를 볼 수 있습니다. 그 공백을 없애려고 이리 찾아보고 저리 찾아봐도 해결이 잘 되지 않는데요. 이것을 없애는 방법을 정리해 보려고 합니다. ▲ 하단에 파란색의 공백이 있음(표시를 위해 백그라운드색을 파란색으로 했음) <div><img src="https://placeimg.com/400/300/any" /></div> 원인 위와 같이 Image 를 DIV 나 Table 에 넣을 경우 하단에 원치않는 공백이 생깁니다. 그 이유는 Image 가 인라인 요소 이기 때문에 그런 것입니다. 인라인 요소의 경우 블록 요소와 달리 보이지 않는 가상의 기준선이 존재를 하는데 기본값으로 vertical-align 의 baseline 에 위치를 하게 됩니다. baseline 은 영문 소문자 로 치자면 아래 삐침이 없는 글자(a, b, c 등등..)의 아랫쪽에 위치하게 됩니다. 그렇기 때문에 아래 삐침이 있는 글자(y, g 등등..)을 고려하면 하단에 1~3px정도의 공백을 유지하게 되는 것입니다. 해결방안 원인을 알았으면 해결책은 쉽게 찾을 수 있습니다. 첫번째 방안 첫번째는 이미지의 vertical-align 을 bottom 으로 하는 것입니다. vertical-align : bottom 은 아래삐침이 있는 글자까지 고려하여 하단으로 정렬하는 것입니다. 그렇게 되면 공백이 없어지게 되겠지요. ▲ vertical-align : bottom 으로 하단에 파란색의 공백이 없어졌음 <div><img src="https://placeimg.com/400/300/any" style="vertical-align: bottom" /></div> 두번쨰 방안 두번쨰는 이미지를 인라인 요소에서 블록 ...

HTML5 태그의 블록 요소와 인라인 요소

- 7/25/2017

HTML의 태그는 크게 블록 요소(block element) 와 인라인 요소(inline element) 로 나누어 집니다. 이 부분을 명확히 이해하고 있어야 CSS를 사용하는데 어려움이 없습니다. 이 각각의 요소에 적용되는 CSS가 별도로 존재하기 때문에 CSS를 적용해 놓고도 " 왜 적용이 되지 않지? " 라는 상황이 발생할 수 있습니다. 예를들면.... 인라인 요소는 height 가 적용되지 않는다. 인라인 요소는 width 가 적용되지 않는다. 블록 요소는 vertical-align 이 적용되지 않는다. 블록 요소는 text-align 이 적용되지 않는다. 블록요소 (block element) 블록 요소는 모든 인라인 요소를 포함 할 수 있고 다른 블록 요소도 일부 포함 할 수 있습니다. 그리고 기본적으로 가로폭 전체의 넓이를 가지는 직사각형 형태 가 되며 width , height , margin , padding 등을 사용하여 형태를 변형하여 레이아웃을 수정할 수 있습니다. 그리고 블룍 요소 다음에는 줄바꿈 이 이루어 집니다. display:inline CSS명령어로 블록 요소를 인라인 요소의 속성으로 변경 할 수 있습니다. div {display:inline} ▲ 모든 DIV태그를 inline요소로 변경함 HTML5의 블록요소 종류 address , article , aside , audio , blockquote , canvas , dd , div , dl , fieldset , figcaption , figure , footer , form , h1 , h2 , h3 , h4 , h5 , h6 , header , hgroup , hr , noscript , ol , output , p , pre , section , table , ul , video 인라인 요쇼 (inline element) 인라인 요소는 항상 블록 요소안에 포함되어 있으며 인라인 요소안에 다른 인라인 요소가 포함될 수...

웹디자이너라면 꼭 알아야 할 Flexbox Layout

- 6/28/2017

웹디자인을 하면서 레이아웃을 잡는 방법에 대해서 시대별로 많은 변화가 있었습니다. Web이 나오기 시작한 초창기에는 Table 을 이용하여 화면의 레이아웃을 잡았고 웹표준 , 웹접근성 이 이슈화 되면서 시멘틱한 마크업 이 대세가 되면서 CSS의 DIV 를 이용한 방법으로 레이아웃을 잡았습니다. CSS3 로 버전업이 되면서 레이아웃 구현애 대한 방법으로 Flexbox 가 탄생하게 되었고 2017년 현재 레이아웃을 편리하게 구현하기 위해서는 Flexbox 를 사용하여 구현하는 것이 최선이라 할 수 있습니다. 그래서 웹디자이너 나 Frontend 개발자 라면 꼭 이해를 하고 넘어가야 하는 요소입니다. Flexbox의 브라우저별 지원 현황 브라우저별 Flex 지원은 현재 대부분의 브라우저가 지원하고 있다고 보면 되고 Internet Explorer 나 사파리 브라우저 같은 경우는 prefix 를 사용해서 적용해야 합니다. Internet Explorer : IE10 파이어폭스 : FF28.0 사파리 : 6.1 크롬 : 29.0 오페라 : 12.10 Flexbox의 특징 W3C 에서의 정식 명칭은 CSS Flexible Box Layout Module 이라고 정의 하고 있으며 이름처럼 레이아웃을 유연하게 구현하는 모듈이라고 보면 됩니다. 예전에 레이아웃을 구현하기 위해서는 정식 사용법이 아닌 편볍처럼 복잡하게 구현을 했어야 했던것에 반해 Flexbox 는 쉽게 레이아웃을 구현할 수 있습니다. Flexbox Flexbox 는 Container 와 Item 으로 구성됩니다. Flex의 선언은 Container 의 CSS에 display: flex 로 선언을 해 줍니다. IE10 인 경우는 flex 대신 display: flexbox 로 지정 .container { display: flex } <div class="container"> <div class="i...