eunyo의 it이야기

print 화면의 css를 따로 지정할 수 있습니다. 1. 기본 @media print @media print { } 프린트용 css는 미디어 쿼리를 사용합니다. 2. 사용방법 @media print { h1 {font-size:25px;} .hide {display:none;} body {background:#fff;} } 사용방법은 간단합니다. 기존의 css를 사용하는 것처럼 스타일을 적용시켜주면 됩니다. 프린트에서 숨겨질 부분은 display:none 처리를 해주면 됩니다. 3. 인쇄 페이지 영역 분할 html 1페이지 2페이지 3페이지 css .section{page-break-before:always;} 원하는 영역을 선택하여 인쇄할 페이지를 나누고 싶을 때, class를 주어 영역을 잡고 pa..

isotope.js는 항목별로 볼 수 있는 필터와 이미지 정렬을 해주는 플러그인입니다. 포트폴리오 형태나 제품 소개 항목에 넣으면 보기 좋게 정렬을 시켜줘요! 다운로드와 샘플은 아래의 해당 사이트에서 해주시면 됩니다 :) https://isotope.metafizzy.co/ Isotope · Filter & sort magical layouts Install Download CDN Link directly to unpkg. Package managers Install with npm: npm install isotope-layout Install with Bower: bower install isotope-layout --save License Commercial license If you want to..

퍼블리싱을 하다보면 이쁘지않은 select 박스 때문에 고민을 한번씩은 할거에요. (특히 익스 ..) 저도 그러다 보니 찾아보게 된 select box css만으로 style 지정하기 ! 일단 브라우저상에서 제공하는 드롭다운 화살표를 제거를 해줍니다. 크로스브라우징을 위해 아래의 코드를 모두 써주어야 합니다. select { -webkit-appearance:none; -moz-appearance:none; -o-appearance:none; appearance:none; } 익스10/익스11 select::-ms-expand{ display:none; } 그 다음엔 select박스에 background 이미지를 넣어 드롭다운 화살표를 생성해주면 됩니다! 참 쉽죵 select {border:1px sol..

퍼블리싱을 하다 보면 이미지 슬라이드 플러그인을 가장 많이 사용한다고 생각합니다. 그중에 무료이고, 사용법이 간편하여 자주 사용하는 것이 bxslider입니다. https://bxslider.com/ jQuery Content Slider | Responsive jQuery Slider | bxSlider Coded with ♥ by bxslider.com 다운로드 방법 install을 클릭하여 이동한 페이지에서 내리다 보면 manual이 있습니다. 노란색 표시한 부분을 클릭하면 파일을 다운로드할 수 있습니다 :) 사용 방법 1.js, css 파일 인클루드 제이쿼리 파일과 (필수입니다.) 다운로드한 경로에 맞게 css와 js파일을 인클루드 해줍니다. 2.HTML 생성 html을 생성해줍니다. ul, di..

웹퍼블리싱 작업을 하다 보면, 특히 반응형이나 모바일 환경에서 table, 표의 양의 방대하다보면 모바일 환경에서 많이 깨져서 보입니다 ,, 반응형 웹에서 테이블이 구조가 바뀌는 소스도 있겠지만, 가장 기본적인 디바이스 크기가 넘어가면 스크롤로 데이터를 볼 수 있게 해주는 css를 소개해드리겠습니다. See the Pen rNBZzxz by aldo814 (@aldo814) on CodePen. table을 div로 감싸 준 뒤 , div에 해당 width값을 주어 해당 영역을 넘어가면 스크롤이 생기도록 처리해줍니다. 그다음에 overflow 속성을 사용하여 스크롤 여부 속성을 주면 해당 영역이 넘어가게 되면 스크롤 처리가 됩니다. overflow 속성에는 , overflow:auto : 해당 범위를 벗..

안녕하세요. 오늘은 간단하게 css로 삼각형 도형을 그리는 방법을 알려드리겠습니다. 기본적으로 css3에서는 사각형, 원형만 가능하지만 border값을 이용하여 삼각형 도형도 그릴 수 있습니다! 잘 사용하진 않지만 알고 있으면 유용한 css입니다. See the Pen LYPJLQO by aldo814 (@aldo814) on CodePen. 삼각형의 가장 높은 부분 좌우측을 투명 처리하여 만드는 삼각형 css입니다! 삼각형의 모양을 바꾸고 싶다면 border의 height를 조절해주면 됩니다 ^^

[웹 개발 종사자라면 너무나 유용한 크롬의 개발자 모드! 개발자 모드로 css와 html 자바스크립트는 손쉽게 적용되는데, 자바스크립트보단 제이쿼리가 더 익숙해서 개발자 모드에서 제이쿼리를 사용하는 방법을 찾아보다가 찾아낸 소스! (출처 : kmyh.kr) 사용법은 아주 간단합니다. 아래의 소스를 개발자 콘솔에 입력해주기만 하면 끝이에용 var jq = document.createElement('script'); jq.src = "//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"; document.getElementsByTagName('head')[0].appendChild(jq); // ... give time for script to load, the..

HTML으로 마크업 할 때 필요한 특수문자 코드표입니다. 특수문자를 코드로 사용하지 않을 때 웹 표준에 부적합할 수 있기 때문에 특수문자 코드를 사용해주는 것이 좋습니다. Character Entity Reference Chart dev.w3.org 표현문자 숫자 표현 문자 표현 설명 - �- - 사용하지 않음 space - 수평 탭 space - 줄 삽입 - - - 사용하지 않음 space - 여백 ! ! - 느낌표 " " &quote; 따옴표 # # - 숫자기호 $ $ - 달러 % % - 백분율 기호 & & & Ampersand ' ' - 작은 따옴표 ( ( - 왼쪽 괄호 ) ) - 오른쪽 괄호 * * - 아스트릭 + + - 더하기 기호 , , - 쉼표 - -..

웹페이지를 만들다 보면 , 다양한 폰트를 사용하게 되는데요. 그중에 구글 웹폰트를 사용하여 간단하게 웹폰트를 사용하는 방법을 알려 드릴게요! 구글 웹폰트 사용법 구글 웹폰트에 접속합니다. 검색창을 이용하여 폰트를 검색해볼 수 있고, Language를 선택하여 해당 언어만 확인이 가능합니다. 언어가 선택 된 화면입니다. 해당 폰트를 직접 타이핑하여 확인도 가능하고, 커스텀, 폰트 굵기, 폰트 크기도 확인이 가능합니다. :) 마음에 드는 폰트를 발견하셨다면, + 버튼을 클릭하여 줍니다. 그럼 화면이 이렇게 변하게 되는데요! 해당 구역을 클릭하게 되면 이런 화면이 나오는데요, @import를 눌러준 뒤 나오는 회색박스 첫 번째 @import ~ 영역은 css 첫 번째에 영역에 선언해주시면 되고, font-fa..

html에서 table(테이블)이란 표를 만들 때 사용하는 태그입니다. 레이아웃을 잡으려고 사용하는 용도로는 사용을 지양하는 것이 좋습니다. table의 태그에 대하여 알아보겠습니다. : 표 : 행 : 열의 제목 : 내용 셀 : 표의 머리 부분 : 표의 본문 부분 표의 꼬리 부분 : 표 제목 : 행의 그룹화. 보통 셀의 width값을 줄 때 사용. colspan : 가로의 셀을 합칠 때 사용하는 태그 rowspan : 세로의 셀을 합칠때 사용하는 태그 scope : 웹 접근성을 위해 데이터를 인식하기 위해 사용. TABLE의 기본적인 예제 See the Pen WNejQgG by aldo814 (@aldo814) on CodePen. 위의 예제 처럼 하나의 tr태그에 있는 th, td 요소는 가로로 한 ..