게시글

text 내에 안내문구 넣는 placeholder 태그

::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */ color: red; opacity: 1; /* Firefox */ } :-ms-input-placeholder { /* Internet Explorer 10-11 */ color: red; } ::-ms-input-placeholder { /* Microsoft Edge */ color: red; }

#프로그램 #CSS #HTML #소스 #placeholder #입력안내문구 #브라우저호환 #HTML폼

게시글

팝업창 옆에 팝업창 띄우기

팝업창을 띄울때 top,left는 고정되는데 상대적인 위치에 팝업창을 띄우고자 할때 사용하는 방법 var nWidth = "260"; var nHeight = "430"; // 듀얼 모니터인경우 var curX = window.screenLeft; var curY = window.screenTop; var curWidth = document.body.clientWidth; var curHeight = document.body.clientHeight; var nLeft = curX + (curWidth / 2) - (nWidth / 2); var nTop = curY + (curHeight / 2) - (nHeight / 2); var strOption = ""; strOption += "left=" + nLeft + "px,"; strOption += "top=" + nTop + "px,"; strOption += "width=" + nWidth + "px,"; strOption += "height=" + nHeight + "px,"; strOption += "toolbar=no,menubar=no,location=no,"; strOption += "resizable=yes,status=yes"; window.open(src, '', strOption);

#프로그램 #자바스크립트 #HTML #소스 #팝업창 #window.open #팝업위치 #듀얼모니터

게시글

띄어쓰기   외에 다른 방법

1)" "한칸을 비우는 방법 -> 여러번" " 넣으면 " " 띄어쓰기 한칸만된다 2)  사용하는 방법 여러번의 띄어쓰기를 넣을때 사용한다 3)\u00A0 사용하는 방법도 있다 자바스크립트에서 사용된다

#프로그램 #HTML #소스

게시글

<hr> 태그 가로선 태그에 색상을 넣는 방법이다

태그에 색상을 넣고 싶으면 이렇게 CSS를 통해 넣으면 적용될것 같지만 그렇지않다 그이유는 hr는 top,bottom라인이 존제한다 해서 기본적으로 하면 라인이 2px로 된다 top,bottom 각각 1px씩 2px이된다 해서 1px로 하고자 할때 border-bottom:1px solid #000000;border-top:none; 이런식으로 라인 하나를 제거하면된다

#프로그램 #CSS #HTML #소스 #hr태그 #가로선 #border-bottom #선색상

게시글

radio,checkbox 텍스트 명을 클릭해도 선택되게 처리 하는 방법

라디오버튼과 체크박스 버튼에서 조그마한 라디오,체크버튼을 클릭하기가 불편해 텍스트를 클릭했을대 체크될수 있게 처리하는 방법으로 아래와 같이 적용한다 radio,checkbox에서 id와 lable 내에 for 속성을 동일하게 맞춰주면된다 라디오버튼1 라디오버튼2 체크박스

#프로그램 #HTML #소스 #체크박스 #label태그 #for속성 #라디오버튼 #폼사용성

게시글

간의 영수증 html소스

간이 영수증을 html 코팅으로 만든내용 No. 영 수 증 &nbsp;&nbsp; (공급받는자용) 귀하 공급자 사 업 자등록번호 상호 성명 인 사 업 장소 재 지 업 태 종목 작성일자 금액합계 비고 공 금 내 역 월/일 품명 수량 단가 금액 합 계 위금액을 영수(청구)함.

#프로그램 #HTML #소스 #간이영수증 #영수증양식 #HTML표 #영수증소스 #table태그 #공급받는자용

게시글

스마트폰에서 문자발송하기

스마티 폰에서 문자를발송할때 sms:~~ 통해 자동의로 전화번호를 입력할수 있다 이때 내용을 같이 입력하고자 할때는 body=~~ 를 활용하면된다 문자발송

#프로그램 #HTML #소스

게시글

호환성 보기생략하는 메타태그

IE버전에서 주소창 우쯕 끝에 호환성 보기 버튼이 생기는 경우가 있는데 이때 해당 버튼을 제거하기위해서 아래의 메타태그를 입력하면된다

#프로그램 #HTML #소스

게시글

모바일 홈페이지 상단에 선언하는 meta

모바일에서 홈페이지를 접근하게 되면 100% 적용안될경우가 있는데 그것은 meta를 선언하지 않았기 때문이다 아래는 필자가 모바일에서 사용하는 메타태그이다

#프로그램 #HTML #소스

게시글

파비콘 추가 방법

파비콘은 주소입력창 좌측에 표기되는 아이콘이다 파비콘은 ico확장자를 사용해야 적용된다 적용한이후에 이미지를 교체하거나 하면 바로 적용되지 않는다 새로고침을 하고나 하면 적용이 될것같지만 적용되지 않는다 어떻게 바로 적용시키는지 몰라 테스트할때는 다른 컴퓨터로 확인해본다 주의사항 1)추가할때 도메인 포함주소를 기재해야 한다 2)ico확장자를 사용해야한다 3)파비콘 변경시 새로고침한다고 해서 변경되지 않는다

#프로그램 #HTML #소스 #파비콘 #favicon #ico파일 #파비콘변경 #사이트아이콘

반드시 기억해야 하는 CSS 선택자 30개

code.tutsplus.com

반드시 기억해야 하는 CSS 선택자 30개는 온라인 튜토리얼 사이트 Envato Tuts+에 실린 글의 한국어 번역본으로, 웹 페이지 요소를 지정할 때 자주 쓰는 CSS 선택자를 정리해 소개합니다. 범용 선택자(*), ID·클래스 선택자, 자식 선택자(X > Y), 속성 선택자(X[attr="value"]), :hover·:nth-child(n) 같은 가상 클래스 등 30가지 선택자를 하나씩 코드 예시와 함께 설명하고, 브라우저 호환성 정보와 데모 링크도 곁들였습니다. HTML·CSS를 막 배우기 시작한 입문자나, 선택자를 정확히 구분해 스타일을 효율적으로 작성하고 싶은 웹 퍼블리셔에게 참고가 됩니다.

#스타일 #CSS #HTML #프론트엔드 #웹퍼블리싱 #CSS선택자 #가상클래스 #속성선택자 #Tuts+

css만 삼각형,네모,원,타원,마르모,별등 각종 도형을 만드는 방법

css-tricks.com

The Shapes of CSS는 웹 개발 매체 CSS-Tricks에 실린 글로, 이미지 파일 없이 CSS만으로 다양한 도형을 그리는 방법을 모아 소개합니다. 각 도형은 border, border-radius, ::before·::after 가상 요소, transform 같은 속성을 조합해 만들어집니다. 정사각형·원·타원 같은 기본 도형부터 방향별 삼각형, 오각형·육각형·팔각형, 여러 형태의 별, 하트, 무한대 기호, 다이아몬드, 말풍선, 음양, 팩맨, 자물쇠 등 40여 가지 예제가 정리되어 있고, 도형마다 참고한 출처가 표기되어 있습니다. 아이콘이나 장식 요소를 가벼운 CSS 코드로 구현하려는 웹 퍼블리셔와 프론트엔드 개발자, CSS 속성 활용법을 익히려는 학습자에게 참고가 됩니다.

#무료 #CSS #HTML #디자인 #도형 #프론트엔드 #웹퍼블리싱 #CSS도형 #CSS-Tricks #border-radius #가상요소 #CSS삼각형

w3schools

www.w3schools.com

w3schools을 소개합니다. w3schools 은 다양한 프로그램 소스를 공부할수 있는 사이트 입니다. w3schools의 장점은 소스와 실행되는 결과같은 바로 볼수 있다는 것이 장점입니다. 웹관련 소스가 궁금한 경우 검색하면 잘 나옵니다. 그러나 소스를 적용했을때 잘 되는지에 대해서는 장담하지 못합니다. 열심히 적용해 봤는데 소스가 잘못된경우 또는 버전이 맞지 않아 사용할수 없는 경우가 있기 때문입니다. 물론 올린사람이 의도적으로 틀린 소스를 올리는 것은 아니지만 시간이 흐름에 따라 틀린 소스가 되기도 합니다. 그러다 보니 적용하기전 정상적인 소스인지 먼저 확인 해봐야 하는데 w3schools 에서는 Try it Yourself 를 통해 미리 확인해 볼수 있습니다. 또 다른 장점으로 CSS관련 정보를 많이 얻을수 있다는 것입니다. 개인적으로 CSS관련 부분이 궁금한 경우 자주 활용하는 사이트입니다. 일반적으로 CSS의 특정 기능이 궁금하면 인터넷에 검색하여 정보를 얻습니다. 그러다 보니 체계적인 정보를 얻기보다는 산발적인 정보를 얻게 되는데 w3schools 에서는 체계적으로 관련정보가 잘 정리되어 있습니다. 적용 예시 뿐아니라 연관된 스타일들까지 다양하게 확인해볼수 있습니다. 그러기에 CSS를 공부하기에는 더할나위없이 좋은 사이트입니다. 메뉴구성은 HTML, CSS, AJVASCRIPT, SQL, PYTHON, PHP등으로 구성되어 있어 다양한 서비스를 이용할 수 있습니다 웹관련 프로그램 소스가 궁금하시다면 w3schools를 활용해 보시기 바랍니다. 자세한 정보를 원하신다면 https://www.w3schools.com 주소를 참고 하시면 더많은 정보를 확인 하실 수 있습니다.

#프로그램 #php #자바스크립트 #CSS #HTML #SQL #PYTHON #W3Schools #웹개발학습 #코딩예제

블루비

www.blueb.co.kr

웹프로그램 관련 소스를 다운받아 사용할수 있는 블루비(http://www.blueb.co.kr) 사이트를 소개합니다. 블루비는 HTML, 자바스크립트, CSS, Ajax 등 다양한 웹프로그램 코딩을 제공해주는 사이트 입니다. 대부분의 소스는 무료로 이용가능하며 유료로 제공하는 소스도 있습니다. 유료인 경우 그만한 가치가 있는 소스이기 때문에 결제하시는 것이 더 나은 서비스를 위해 좋은 방법이 아닐까 생각합니다. 소스들은 웹상에서 자주 사용되는 기능을 제공하고 있습니다. 트리메뉴, 탭메뉴, 갤러리, 슬라이드쇼 등 웹 상에서 한번쯤 사용해 봤을 만한 소스가 많이 있습니다. 사실 직접 제작해서 사용하려면 많은 시간과 노력이 필요합니다. 그렇지만 블루비를 통해 얻은 소스를 커스트마이징해 자신의 홈페이지에 적용 한다면 쉽고 빠르게 작업 할 수 있습니다. 간혹 소스를 다운받아 단순 업로드 하면 적용될 것이라 생각하시는 분들이 있는데 이는 너무 모르는 소리입니다. 홈페이지에 소스를 적용하려면 그에 맞게 고치는 커스트마이징 작업이 꼭 필요하다는 것을 명심해야 합니다. 홈페이지를 멋지게 꾸미기 원하신다면 블루비를 활용해 보시는 것은 어떨까요?

#프로그램 #자바스크립트 #CSS #HTML #이미지슬라이드 #갤러리 #소스 #웹소스 #프로그램소스 #홈페이지제작 #블루비 #자바스크립트소스

태그,스타일지원테스트

caniuse.com

브라우저별 지원하는 기능을 확인할 수 있는 https://caniuse.com 소개합니다. HTML에는 수많은 태그와 속성이 있고, CSS역시 수많은 스타일이 있습니다. 물론 많다 하여도 개발자들은 거짐 다 외워서 사용하고 모르는 경우는 검색해서 사용합니다. 그런데 가장 큰 문제는 기능이 많아 내가 모르고 있는 기능이 있다는 것이 아닙니다. 내가 알고 있는 기능이 모든 브라우저 환경에서 정상작동 되는지 파악하는 문제입니다. 웹표준을 지켜서 모든 환경에서 정상작동 되게 할수 있지만 이또한 한계가 있습니다. 이유는 브라우저마다 지원하는 부분이 조금씩 다르고 사용방법도 다른 경우가 있기 때문입니다. 이해는 됩니다. 기술이 계속 발전하면서 과거에 없던 기능들이 추가되는 것, 개발회사마다 조금씩 다를 수 밖에 없다는 점 이해 합니다. 그러기 때문에 개발하는 사람 입장에서는 어디까지 지원하고 또 무엇이 다른지를 알고 있어야만 합니다. 최신기술이 나오면 모든 사람들이 동시에 최신 기술을 사용하면 좋겠지만 현실은 그렇지 않습니다. 최신기술이 나오고 정착되려면 짧게는 몇 개월에서 길게는 몇 년이 걸리기도 합니다. 그러기에 개발자들은 이모든 것을 환경을 고려해 개발할 수밖에 없습니다. 그래서 소개하는 사이트가 바로 https://caniuse.com 입니다. Can I yse _______ ? 라는 부분에 내가 사용하고자 하는 태그나 CSS등을 입력하면 브라우저 별 사용가능 여부가 나와집니다. 너무 좋은 것은 같은 브라우저라 해도 버전 별로 지원여부가 다를 수 있는데 이 또한 자세히 나와진다는 것입니다. 물론 개발에 익숙한 사람이라면 자신이 지금까지 사용하던 기능이 어느 버전까지 지원하는지 알고 있겠지만 새로운 기능을 사용하고자 할 때에는 파악하기가 어렵습니다. 이때 https://caniuse.com 를 활용하면 검색만으로 지원가능 브라우저 및 버전을 쉽게 파악할 수 있습니다. 내가 사용 하고자 하는 기능이 어느 버전까지 지원하는지 한눈에 파악하길 원하시는 분이라면 https://caniuse.com 를 추천해드립니다.

#테스트 #영문 #버젼 #태그 #스타일 #브라우저 #지원 #CSS #HTML #caniuse #브라우저호환성 #웹표준 #크로스브라우징 #프론트엔드