세연아빠의 개발과 일상의 모습

구글 본고딕 다운로드 및 TTF 제공구글 본고딕 다운로드 및 TTF 제공 구굴(Google) 과 어도비(Adobe)의 합작품 무료폰트 본고딕 Noto San CJK KR 본고딕은 상업적으로도 사용이 가능한 무제한 무료폰트 입니다 한국어와 일본어 중국어가 포함된 하나의 폼트로 사용가능해서 약자를 CJK 표현됨. 구글 본고딕 다운로드 페이지 바로가기 1 다운로드 페이지 이동 다운로드 페이지에서 검색창에 KOREAN 을 입력한다. 검색된 Noto Sans CJK KR 을 다운로드 한다. 다운로드된 파일의 압축을 풀고 사용하면 된다. 아마도 디자인 작업을 하다보면 TTF 파일이 필요할 것이다. 필요한 경우엔 링크를 걸어놓았다 다운로드하여 사용하면 된다. 본고딕TTF 다운로드 이글이 도움이 되셨다면 아래에 로그인..

php url 파싱 스누피php url 파싱 스누피 웹사이트 개발을 하다보면 부득이하게 웹사이트 url 을 통한 파싱이 필요할 경우가 있다. 이번 포스팅에선 url 파싱 방법에 대하여 알아보기위해 간단한 예제을 만들어 보았다. 파싱의 방법중 스누피 클래스를 이용한 방법이다. 1 우선 스누피 파싱클래스를 다운받자 적당한 위치에 압축을 풀고 해당 클래스를 include 시켜 소스에 첨가하도록 하자 2 필요한 정보의 타켓 url 을 해당 소스에 $url 변수에 입력하고 출력된 변수에서 정규화 식을 통해 필요한 정보를 배열에 넣고 가져오는 방식 이다 123456789101112131415161718192021222324252627282930313233343536373839404142434445 Colored b..

PHP getimagesize() 이미지 사이즈 구하기PHP getimagesize() 이미지 사이즈 구하기 이미지 사이즈 구하는 모듈을 사용하기 위해서는 GD 라이브러리가 필요합니다 리눅스 : gd library가 리눅스 설치 윈도우 : PHP 환경설정파일 수정 및 재시작 1 리눅스 GD설치법 및 확인 인터넷 검색을 통하여 쉽게 찾을수 있으며 설치 순서에 유의하여 설치한다. 설치후에 PHP 에서 작동이 가능해야 함으로 PHP 설치 옵션에도 신경을 써야합니다. 아래는 GD 가 설치가 되어 PHP 에서 사용이 가능한 상태를 알수 있는 이미지 캡쳐이고 PHPINFO() 함수를 통해 출력할 수 있습니다. 2 윈도우 GD 사용법 윈도우 : PHP 환경설정파일 수정 및 재시작 1) php5>ext>php_gd2...

css 투명도 조절하기 (opacity, rgba)css 투명도 조절하기 (opacity, rgba) css3 이전에 투명도 조절하는 방법은 opacity 로 조절하는 방법이 있었으나 css3 에서는 투명도 조절하는 기존에 opacity 이외에 추가로 속성이 추가되었습니다. 이 차이점이 무었인지 알아보도록 하겠습니다. 1 opacity 로 조절하기 css3 이전부터 투명도 조절을 위해 사용되었던 opacity 입니다. 사용법 opacity: 0.5; 투명도 50%로 설정되어집니다. 1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253html5 css3 투명도.gra { width: 6..

css gradient 속성 및 사용법css gradient 속성 및 사용법 css3 에서는 배경색에 그라데이션 기능으로 색상을 표현할 수 있게 되었습니다. 그전까지는 배경색에 그라데이션을 표현하려면 이미지 편집 프로그램을 사용하여야 가능하였으나 css3 에서는 스타일을 이용하여 그라데이션 색상을 직접 지정하여 표현 할 수 있다. 1 gradient 속성 1 background: linear-gradient(to right, #000, #ccc); 유형 linear , 또는 radial 중에서 선택할 수 있다. linear 은 선형 radial 은 원형으로 그라데이션이 표현된다. to right 는 오른쪽으로 to left 는 왼쪽으로 그라데이션이 적용된다. 2 background: radial-grad..

css text-shadow 속성 및 사용css text-shadow 속성 및 사용 css3 box-shadow 기능과 같은기능이며 text 의 그림자 효과를 넣을 수 있는 속성이다. text-shadow 속성은 css3에서 처음 적용된 속성은 아니다 css2에서 추가된 속이이지만 지원하는 브라우저가 거의 없어 많이 사용되지 않던 기능이다. 3 css text-shadow 속성 p { text-shadow: 5px 5px 4px #000; } text-shadow 의 첫번째 속성값 : 그림자가 가로로 얼마나 떨어져 있는지를 지정함. 양수는 오른쪽 음수는 왼쪽 text-shadow 의 첫번째 속성값 : 그림자가 세로로 얼마나 떨어져 있는지를 지정함 양수값은 글자아래 음수값은 글짜 위 text-shadow ..

css box-shadow 속성css box-shadow 속성 이미지나 글자에 그림자 효과를 넣기 위해서는 이미지 편집 프로그램을 사용하여 이미지에 그림자를 넣어야 하였지만 css3에서는 간단한 속성만으로 그림자 효과를 낼 수 있어 손쉽게 작업을 진행 할 수 있다. css3 에서는 그림자 속성인 box-shadow 속성에 대하여 알아보도록 하자. 1 box-shadow 속성 css3 의 box-shadow 속성을 사용하면 포토샵이라 기타 이미지 편집 프로그램을 사용하지 않고도 간단하게 속성 추가만으로 그림자 효과를 낼 수 있다. 그리고 속성 값에 따라 그림자의 위치나 생상 기울기 정도를 조절할 수 있다. box-shadow 속성은 모두 4개의 값을 가질 수 있으며 최소 3개의 속성값을 지정하여야 한다. ..

CSS border-radius 모서리 부드럽게 처리및 원그리기CSS border-radius 모서리 부드럽게 처리및 원그리기 보통 웹상의 상자 모서리 처리를 위해서는 그래픽을 이용하거나 자바스크립트를 이용하여 처리하곤 하였으나 css3 에선 상자의 모서리 처리를 손쉽게 할 수 있도록 하는 border-radius 속성이 추가 되었다. 1 border-radius 처리하기 border-radius 속성으로 둥굴게 처리하기 상자의 굴곡처리는 값에 따라 자유롭게 조절이 가능합니다. 굴곡을 10px; 로 처리해본 테스트 페이지 입니다. 굴곡의 조종은 px 단위 뿐만아니라 상대적인 수치인 % 로 지정하는것도 가능합니다. ex) border-radius: 50%; 123456789101112131415161718..

html5 input tag autofocushtml5 input tag autofocus html5 에서 input 태그중 새롭게 추가된 기능중에 지금까지는 자바스크립트로 처리하여야 했던 기능을 간단한 속성추가로 그 기능을 대신하게 할 수 있도록 추가되었다. 그중에 autofocus 속성을 알아보자. 1 input 태그의 autofocus 속성 페이지가 오픈되자마자 입력필드중 원하는 필드에 마우스 커서가 바로위치하여 사용하기 편리하도록 처리 할 수 있다. 기존엔 이렇게 처리하려면 자바스크립트 처리 하여야 하였으나 지금은 간단한 autofocus 속성하나만 추가하여 쉽게 해결 할 수 있다. 1234567891011121314151617181920212223242526272829303132333435363..

html5 input 태그html5 input 태그 지금까지 폼 태그를 사용하기 위하여 input 태그를 사용하였을 것이다. 기존의 html4에서 input 태그는 텍스트 필드나 단추 같은 폼을 만들고 자바스크립트를 이용하여 입력내용을 확인하는 프로그램을 실행하여야 하였으나 이제 html5 에서는 입력하려는 값에 따라 해당 태그를 사용하면 쉽게 처리할 수 있도록 추가되었다. 1 input 태그 사용 기존 html4 에서 사용하던 폼 태그들이다 유형 설명 코드 텍스트 텍스트입력 패스워드 비밀번호 입력 입력되는값은 *로 표시 체크박스 클릭시 활성 / 비활성 라이도버튼 구룹중 선택 파일 파일업로드 파일선택버튼 전송 폼값을 전송 html5 에서 추가된 input 태그 유형 설명 코드 이메일주소 이메일 주소 입력..