eunyo의 it이야기

스크롤바 CSS로 스타일 변경하는 방법 브라우저의 높이보다 콘텐츠가 길어질때, 브라우저 내에서 스크롤바가 생성됩니다. 이때 생기는 스크롤바의 스타일을 변경하는 방법에 대해 알려드리겠습니다. 하지만, 크롬이 아닌 타 브라우저에서는 최소한의 수준에서 스타일 변경이 가능한 점 참고부탁드립니다. 사이트 전체 스크롤 css 수정하기 ::-webkit-scrollbar { width: 5px; /*스크롤바의 너비*/ } ::-webkit-scrollbar-thumb { background-color: black; /*스크롤바의 색상*/ } ::-webkit-scrollbar-track { background-color: yellow; /*스크롤바 트랙 색상*/ } 실행화면 원하는 영역에 스크롤 css 수정하기 di..

반응형 폰트 단위 em/rem css에서 사용되는 단위는 여러 가지가 있습니다. 그중에 오늘은 폰트, 즉 글자의 크기를 결정하는 단위인 em, rem에 대해 알아보겠습니다. 일반적으로 폰트의 크기를 결정하는 단위로 픽셀(px)을 주로 사용합니다. 하지만 픽셀은 절대적인 단위이기때문에 '반응형' 작업하기에는 부적합합니다. 왜냐하면 반응형 분기점 별로 사이즈를 달리해줘야 하기 때문에 수정해야 할 사항이 많기 때문입니다. 그래서 오늘은 반응형에서 유용하게 사용할 수 있는 em과 rem에 차이점과 사용방법에 대해 알아보겠습니다. em과 rem은 '상대 단위'입니다. '절대 단위'인 픽셀과 달리, em과 rem은 기준에 따라 유동적으로 변하는 특징을 가지고 있습니다. 1. rem rem은 웹에서 가장 최상위 요소..

반응형 웹(Responsive web)이란? 반응형 웹, 반응형 홈페이지란 하나의 홈페이지로 PC, 태블릿, 노트북, 스마트폰(mobile) 등 여러가지 디바이스에서 접속하는 디스플레이 종류에 따라 화면의 크기가 자동으로 변하는 웹페이지 접근 기법입니다. 기존에는 PC용 사이트, Mobile용 사이트를 별개로 제작하였지만 최근의 웹사이트는 반응형으로 많이 제작하고 있습니다. 반응형웹의 장점은 PC용 url과 Mobile용 url이 동일하여 사용자 접속을 효율적으로 관리할 수있고 유지보수가 보다 편리합니다. PC와 모바일용 사이트를 별개로 제작한다면, 사이트를 수정할 때 두개의 사이트 모두 수정을 해야했다면, 반응형을 적용한 사이트는 하나의 사이트를 수정하면 PC와 모바일 모두 동일하게 수정되어집니다. 반..

CSS 변수 사용하기 CSS 변수란 ? 사용자 지정 변수로 CSS의 속성을 미리 정의해놓고, 여러 곳에서 사용할 수 있는 변수를 의미합니다. 웹사이트에서는 보통 많은 양의 CSS를 가지고 있습니다. color나 size 등의 많은 값이 반복적으로 사용이 됩니다. 이때, CSS변수를 사용해주면 반복되는 코드를 줄일 수 있습니다. 또한, 같은 색상을 여러 곳에서 사용을 했을때 색상의 값을 바꿔야 하는 상황이 온다면 일일이 값을 변경해줘야 합니다. 하지만 CSS 변수를 사용하면 선언해 준 변수의 값만 바꿔주면 되기 때문에 수고로움을 덜을 수 있습니다. 또한, 변수의 명을 따로 지정해주기 때문에 더 직관적이고 가독성있게 코드를 확인할 수 있습니다. " target="_blank" rel="noopener">pa..

익스플로러(IE)의 CSS변수 해결방법 root의 가상 선택자를 통해 css 변수를 사용하는 경우가 있습니다. 반복되는 css 코드 값의 반복을 줄여주기 때문에 코드 관리도 쉽고 유지보수 측면에도 좋습니다. 하지만 우리의 익스플로러는 역시 적용이 안됩니다. ^^ css 변수의 사용법을 모르신다면, 아래의 포스팅을 참고해주세요. eunyoe.tistory.com/entry/CSS-CSS-%EB%B3%80%EC%88%98-%EC%82%AC%EC%9A%A9%ED%95%98%EA%B8%B0 브라우저 호환성 익스플로러 빼고 다 호환이 되네요 :) 기껏 변수를 통해 적용했는데 ie 때문에 변수가 아닌 새로운 기존의 스타일을 추가하는 건 너무 비효율적이기 때문에 오늘은 간단하게 변수 css를 ie에 적용시키는 법을 ..

한 줄 글자 자르기 p{ display: inline-block; width: 200px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } display : block 요소나 inline-block 요소 둘 다 사용 가능합니다. white-space : nowrap은 줄바꿈 처리가 되지 않도록 합니다. overflow:hidden은 넘치는 텍스트를 숨깁니다. text-overflow : ellipsis 는 넘치는 텍스트를 숨긴 후 '...' 처리를 해줍니다. 한 줄 글자 자르기는 크롬, 익스 모두 잘린 후... 처리되어 보입니다. 두줄 / 여러줄 글자 자르기 p{ overflow: hidden; text-overflow: ellipsi..

오늘은 반응형 웹 디자인을 제작하기 위한 미디어 쿼리 해상도 분기점 리스트를 공유하려고 합니다. 반응형 웹의 자세한 제작 방법이 궁금하시다면 아래의 포스트를 참고하세요. 반응형 웹(Responsive web) 만들기 - 뷰포트와 미디어쿼리 기본 설정 반응형웹을 적용하기 위해서는 먼저 meta viewport를 설정해주어야 합니다. html 태그에 뷰포트 태그를 선언해줍니다. width=device-width : 화면의 넓이를 디바이스의 넓이로 지정 initial-scale=1: 기본 사이즈를 1로 지정함. 디바이스별 분기점 1. 4개의 반응형 분기점 1. 낮은 해상도의 PC, 태블릿 가로 : ~1024px 2. 테블릿 가로 : 768px ~ 1023px 3. 모바일 가로, 태블릿 : 480px ~ 767..

리셋 css / reset css란? 모든 웹 브라우저에서 동일하게 보이기 위해서 사용하는 것으로, 브라우저 자체의 css style을 리셋시켜주는 css이다. 크로스 브라우징을 위해서는 *필수적인* css라고 생각하면 된다. /* http://meyerweb.com/eric/tools/css/reset/ v2.0 | 20110126 License: none (public domain) */ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, s..

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..

퍼블리싱을 하다보면 이쁘지않은 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..