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

구글에서 정말 간단히 웹사이트에 번역기를 달수 있도록 제공하고 있습니다. 영문과같은 부분은 오류가 있을 수 있지만. 어순이 같은 일본어와같은 곳은 괜찮을듯 합니다 ^^ 위 주소로 접속을 하시게되면 아래와같은 이미지를 확인하실 수 있습니다. 웹사이트에 지금 추가 버튼을 누르시면 웹사이트 정보 페이지로 이동을 하며 적용할 사이트의 url 그리고 웹사이트 언어를 설정할 수 있으며 설정 후 다음 버튼을 누릅니다. 번역할 언어를 모든언어, 특정언어를 골라서 선택할 수 있으며. 표시될 검색버튼을 다양한 형태로 변경도 가능합니다. 코드받기를 누르시면 코드를 받으실 수 있으며 위 코드를 사용하실 페이지에 원하는 위치에 넣어주시면 됩니다. 유용하게 사용하실 바랍니다 ^^

이런 말풍선 이쁘나요? 저는 갠찮은거 같아 소개 드립니다. 위치도 , 색깔도, 크기도, 액션도 갠찮은것 같습니다. 사용하시려면 우선 다운로드 받으시면.... hint.css 과 hint.min.css 파일이 있습니다. 추측 하셨겠지만 hint.min.css 는 저용량 구동전용파일입니다. 직접 소스를 수정하고 싶으시다면 hint.css를 사용하시면 되겠죠? 사용하시고자 하는 페이지 상단에 요렇게 넣으시고 사용하시면 됩니다. 해볼까요? 코드 테스트 사이트에서 해보았습니다. 이렇게 하니깐 바로 이렇게 나오네요~! 제서버에 서 다시 해볼까요? 코드 테스트 사이트랑 똑같이 나오네욤,,, 요러한 옵션들이 있으니깐 테스트 해 보세요~! Colors - hint--error, hint--info, hint--warni..

웹접근성 적용을 위한 네이버 웹 접근성 체험 사이트 회사에 웹접근성 확인을 위한 스크린 리더기 기타 관련 용품이 없을경우 웹접근성 작업을 위해 미리 체험해 볼 수 있는 네이버 체험 사이트 입니다. 웹접근성 규정에 맞춘 작업을 위해서 미리 체험 할 수 있어서 유용하네요. 체험에는 저시력 시각장애, 전맹 시각장애, 손운동장애, 증중 운동장애 관련 웹접근성 체험이 가능합니다. 체험해보니 웹접근성 작업에 많은 도움이 되고, 웹 사이트 제작외에 다양한 경험을 한거 같아서 좋습니다.

셀렉트박스 디자인을 쉽게 할수 있는 디자인셀렉트박스 생성기입니다. 관련 HTML, css, 자바스크립트 웹브라우저에서 바로 작성하고 확인 및 소스 복사도 가능합니다. 여러가지 디자인의 셀렉트박스를 손쉽게 만들고 이용가능해서 좋네요. 라운드형, 직각박스형, 화살표 아이콘도 변경이 가능하니. 다양하게 이용이 가능하겠네요.

처음 들어갔을때는 자료를 보고 너무 적은거 아니야? 라는 생각이 드는데요. html 작업시 기초가 되는 부분을 자세히 설명해준 홈페이지라서 초보자분들도 쉽게 공부할수 있는 유용한 사이트입니다^^ 예제 및 설명이 보시는 이미지처럼 잘되어 있어, 누구나 손쉽게 접근하고 사용이 가능하실것입니다. 모두 열공하시길 바랍니다*_*

HTML5로 들어오면서 새롭게 생겨난 속성입니다. 기존에 인풋박스에 placeholder와 같은 속성을 이용하려면 자바스립트나, jquery를 이용하여 이미지 또는 텍스를 이용하여 복잡하게 설정해야만 했지만. placeholder는 간단히 태그입력후 alt나 title속성입력하는것과 같이 원하는 문구를 적어주면 됩니다. 위와같이 사용할수도 있으며 인풋태그에 간단히 설명을 입력할 수 도 있습니다. 사용방법은 예시 html5로 업그레이드되면서 새롭게 생긴속성이라서 구버전 익스플로러에서는 사용이 되지 않습니다. ie의 같은경우는 10버전에서 일부의 html5를 지원하기때문에 9이하로는 무용지물이 됩니다. 아래의 링크를 통해서 개발자가 만들어둔 jquery소스를 이용해 placeholder를 ie9이하에도 사용..

하나의 화면에서 반투명한 레이아웃을 CSS로 구현할 수 있습니다. [제작화면] HTML과 CSS, JS를 하나의 화면에서 확인할수있습니다.

다양한 형태의 마우스 오버 효과입니다. 이미지. 타이틀, 서브타이틀 같은 정보가 나오는 곳에 효과적으로 사용이 가능합니다. 해당 사이트에서 소스를 다운로드 받으실수 있습니다. html과 css에 대한 자세한 설명이 있습니다.

모바일 홈페이지 코딩과 반응형웹 코딩시 최적화되어 있는 툴입니다. 모바일 디바이스별로 선택하여 기기와 데스크탑 화면을 동시에 볼수 있는부분이 장점입니다. 먼저 위 사이트 링크를 클릭하시거나 아래의 링크를 통해서 실행파일을 먼저 다운로드 받으셔야 됩니다. 실행파일을 다운로드 받으시고 실행시키시면 윈도우 실행창에 아래와같은 아이콘이 생성됩니다. 위 아이콘을 눌러 실행을하면 아래와같은 화면이 뜨고 주소창에 주소를 입력하시면 모바일기기기와 pc화면이 분리되어 있는 화면을 확인하실 수 있습니다. 좌측의 휴대폰기종을 선택하여 디바이스를 변경할 수 있으며 변경시에는 ctrl-r을 이용하거나 새로고침을하여 적용을 시켜줘야 하는점이 좀 번거로울수도 있습니다. 실제 휴대폰을 들고 확인해본바 글꼴랜더링 이외에는 모든부분이 ..

페이스북이나 각종 SNS 웹페이지에서 주로 보여지고 있는 둥근 프로필 이미지를 포토샵없이 CSS만으로 가능한데요, 바로 border-radius 를 이용하면 됩니다.. 만약 이미지 크기가 100px * 100px 라면 img { width: 100px; height:100px; border-radius: 50px; /* 이미지 반크기만큼 반경을 잡기*/ } 2. 레이어에 백그라운드 이미지 깔고 border-radius 사용 #radius-box { width: 100px; height: 100px; background-image:url("배경이미지경로"); border-radius: 150px; /* 레이어 반크기만큼 반경을 잡기*/ display: table-cell; vertical-align: mi..