게시글

페이지 출력할때 페이지를 구분해서 프린트하기

페이지에서 print()함수를 사용해서 페이지를 출력할때가 있다 일반적으로 출력할때 내용이 페이지 구분없이 연달아 출력되게 된다 이때 페이지를 구분하고 싶은경우가 있다 1,2,3페이지로 구분해서 출력하고 싶을때가 있는데 이때 페이지를 구분하는 방법이다 페이지를 구분할때 사용 IE7버젼 이상일경우 좀다른데 아래처럼 하면된다

#프로그램 #CSS #소스 #style #페이지인쇄 #페이지나누기 #프린트 #print함수 #인쇄스타일

게시글

iframe 투명하게 처리하기

페이지내에 iframe있는경우 투명하게 처리하고자 하는경우가 있다 allowtransparency='true' 를 통해 투명하게 처리 할수 있다 이때 주의 해야될것이 이렇게 만 하면되는것이아니다 아이프레임.html 페이지에서도 선언해줘야 하는 부분있데 아래의 css를 넣어줘야 정상적으로 적용된다 body{background-color:transparent;}

#프로그램 #CSS #소스 #style #iframe #아이프레임투명 #allowtransparency #배경투명 #transparent

게시글

html,body 부분의 스크롤바 제거하는 방법

html,body부분의 스크롤바를 제거하고자 하는경우가 있다 이때 사용하는 방법이다 html, body { height:100%;overflow-x:hidden; overflow-y:auto} overflow-x,overflow-y브라우저별,버전별에 따라 지원유무를 파악한후 사용해야한다

#프로그램 #CSS #소스 #style #웹퍼블리싱 #스타일시트 #스크롤바제거 #overflow-x #가로스크롤

게시글

css파일에서 css파일 include(import)하기

html 페이지에서 css파일을 불러오는 방법은 이렇게 하면 style.css,style_add.css 파일 2개를 모두 불러올수 있다 그런데 style.css 안에서 style_add.css를 불러오고 싶을때가 있다 이때 import(include)하는 방법인다 style.css 파일에 추가해주면된다 @import "style_add.css"; import를 지원하지 않는 브라우저가 있어서 확인이 필요하다

#프로그램 #CSS #소스 #style #웹퍼블리싱 #스타일시트 #@import #CSS파일불러오기 #CSSinclude

게시글

input type=text 태그만 별도로 스타일 지정하는 방법

input{display:none;} 이렇게 css선언하게 되면 모든 input 태그는 비노출이된다 text,password,checkbox,radio등등 모두 비노출되는 식이다 그러나 input=text만 별도로 적용하고자 하는경우가 있는데 이때 사용하는 방법이다 input { expression(this.type == "text" ? "none" : font-size:13px) } expression를 통해서 this.type == "text"구분하여 별도록 스타일을 지정할수 있다

#프로그램 #CSS #소스 #style #스타일시트 #input스타일 #inputtext #expression #폼스타일

게시글

한글입력 불가능하게 하기

아이디입력처럼 한글을 입력하면 안되는경우에 사용하면 편리하다

#프로그램 #CSS #소스 #style

게시글

아이프레임 처럼 스크롤바를 넣고 싶은경우

특정위치의 내용의 가로 세로 사이즈가 고정되어 야 하는경우가있다 이때 범위가 벗어나면 안되는경우가 있는데 벗어나게되면 전체적인 디자인이 깨지거나 하는경우이다 이때 사용하는 방법이 스크롤이 생기게 하는방법인데 아이프레임으로 스크롤을 처리해도 되지만 스타일로 간단하게 처리하는 방법이있다 아이프레임 효과 줄바꿈 줄바꿈 줄바꿈 줄바꿈 줄바꿈 줄바꿈 줄바꿈 줄바꿈 줄바꿈 줄바꿈 줄바꿈 줄바꿈 줄바꿈 줄바꿈 줄바꿈 줄바꿈 줄바꿈 줄바꿈 줄바꿈 줄바꿈 줄바꿈 줄바꿈 줄바꿈 줄바꿈 줄바꿈 줄바꿈 줄바꿈 줄바꿈 줄바꿈 줄바꿈 가로세로 300px가 넘어가는 경우 자동으로 스크롤 처리하는 부분이다 overflow:auto; 부분으로 스크롤이 없다가 사이즈가 오버되면 그때 스크롤이 생긴다

#프로그램 #CSS #소스 #style #스타일시트 #overflow #스크롤바 #고정영역스크롤 #아이프레임대체

게시글

테이블에서 valign=middle 처럼 div에서 middle 정렬하는 방법

middle를 원하는 div에 display:table-cell;vertical-align:middle; 이렇게 입력하면 테이블의 valign=middle 처럼 정렬될것 같지 만 정렬되지 않는다 감싸고 있는 상위 div에 display:table 을 선언해주었을때 비로소 middle가 적용된다 valign정렬이라는것 자체가 table에 있는 속성이여서 그런지 css내에서도 table-cell 처럼 table단어가 들어가 있다

#프로그램 #CSS #소스 #style #세로가운데정렬 #vertical-align #table-cell #div정렬 #valign

게시글

css 라운드 넣는 방법

태그에 라운드 넣는 방법 solid border-radius:20px 해당라운드 수치임 라운드모양을 실선,점선등으로 표기가능하다 자주사용하는 종류 solid:실선 dotted:짧은 점선 dashed:긴 점선

#프로그램 #CSS #소스 #style

게시글

shadow 그림자를 넣는 방법입니다

그림자를 넣을때는 box-shadow: 10px 20px 5px #aaaaaa; 를 사용하면된다 box-shadow: (A)px (B)px (C)px (D); A는 left값 B는 top값 C는 그림자의 뿌연정도 D는 색상 위내용을 입력하여 변경하면된다

#프로그램 #CSS #소스 #style #웹퍼블리싱 #box-shadow #그림자효과 #CSS그림자 #스타일시트

반드시 기억해야 하는 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 소스

wsss.tistory.com

CSS를 통한 디자인 소스가 제공되는 사이트 입니다. 단순 디자인을 넘어 애니매이션 소스도 같이 제공됩니다 예전에는 플래시로 애니매이션을 만들었다면 지금은 CSS, HTML5, 자바스크립트 등을 통해 애니매이션을 제작 하는 추세입니다 그런 면에서 볼때 아주 도움을 주는 사이트 입니다 아래는 실행 화면입니다 https://wsss.tistory.com/55

#자바스크립트 #CSS #애니매이션 #웹디자인 #Animation #CSS소스 #CSS애니메이션 #HTML5 #웹퍼블리싱

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 #브라우저호환성 #웹표준 #크로스브라우징 #프론트엔드