웹솔루션개발 25년 노하우! 해피CGI의 모든것

The Pattern Library에서는 다양한 패턴 일러스트를 볼 수 있습니다. 현재 약 50여개의 패턴 일러스트를 보유하고 있습니다. 다운 받고 싶은 패턴을 선택하면 브라우저 전체에 패턴이 띄워집니다. 우측 상단에 버튼으로 다른 패턴으로 이동하거나 패턴 리스트 페이지로 이동할 수 있습니다. 좌측상단 패턴명칭 아래 다운로드 아이콘에 마우스를 올리면 위 캡쳐와 같이 다운로드 표시가 보이며 패턴일러스트 파일을 다운받아 사용할 수 있습니다. 메인페이지에 패턴을 자유롭게 사용이 가능하다고 명시되어 있지만, 상업용 라이센스는 확인이 필요한 부분인 점 참고부탁드립니다.

css 만으로 제작된 편집이 가능한 패턴 소스 css 를 수정하여 색상 및 크기 투명도 등 다영하게 변경이 가능합니다 응용을 하면 라인 패턴도 쉽게 css 만으로 구현이 가능합니다

모자이크 패턴, 배경이미지 그리고 사이트 제작시 배색조합을 임의로 해볼수 있는 사이트입니다. 랜덤 버튼을 눌러 임의로 생성을 할 수 있으며 셀의 기울어짐변화와 셀의 크기조정을 할 수 있으며 색상을 커스텀을 통해 임의로 생성하여 저장할 수 있습니다. 생성된 이미지 하단의 버튼을눌러 링크,PNG,SVG로 다운 받을 수 있습니다.

최종결과 1단계 : 포토샵으로 원하는 사진을 열어 시작합니다. 이미지를 알맞은 사이즈로 먼저 조정합니다. 2단계 : 레이어를 두번 복제합니다. 3단계 : 변환 도구 (Ctrl 키 / Cmd를 + T 또는 편집> 자유 변형)을 수평으로 기울 값이 45º로 설정을 활성화합니다. 수평으로 기울여 형태를 바꿔줍니다. 4단계 : 필터 > 픽셀 화> 모자이크 필터로 이동합니다. 입력창에 알맞은 값을 입력합니다 5단계 : 다음으로, 반대 방향으로 변환합니다. 6단계 : 상단의 레이어를 선택하여 불투명도를 50%로 설정합니다. 7단계 : 중간 레이어를 선택하여 다시 수평기울기를 -45로 설정하여 변환합니다. 8단계 : 다시 같은 모자이크 필터를 적용합니다. 9단계 : 45º 할 수있는 수평으로 기울이기 값을 설정하여 ..

SVG를 이용하여 패턴을 생성/표시할 수 있는 스크립트로 3가지 패턴으로 구분되어있습니다. 데모페이지에서 구현방법이 자세하게 설명되어있어 다양한 패턴을 확인해보시기 바랍니다. 라인형 패턴 써클형 패턴 Paths 형 패턴 위와같은 형태로 다수의 패턴을 만들어 낼수 있고, 특정 영역을 아래와 같은 위치값을 이용하여 패턴영역을 생성해 낼 수 있습니다.

15가지의 기하학적인 무늬의 배경 jpg자료 입니다. 고퀄리티의 배경이미지를 무료로 이용할 수 있습니다. 해당사이트에서 배경이미지들의 미리보기를 할 수 있습니다.

반응형 디자인에 관한 패턴과 자료를 모아둔 사이트입니다. 메인페이지 접속을 해 Patterns이나 resources를 클릭하여 원하는 페이지로 이동할수 있습니다. ＊Patterns 메인페이지 LAYOUT, NAVIGATION, IMAGES, MEDIA/DATA,FORMS, TEXT, MODULES 등 다양한 자료를 확인하실 수 있으며 원하는 항목을 클릭하면 적용방법 또는 코드와함께 자세한 설명을 호 Grid block with section titles를 클릭한 화면이며 위 Change View를 클릭하여 다양한 형태로 데모를 확인하실 수 있습니다. ＊Resources 메인페이지 각각의 카테고리에 있는 타이틀을 클릭하여 포럼에 등록되어 있는 글들을 확인하실 수 있습니다.