신기한 웹 세상

Category

CSS

CSS 코드 냄새

[요약]추가적인 CSS코드 냄새에 좋은 내용이 있어서 사람들이 많이 알았으면 해서 퍼왔다. @extend mixin보다 성능이 떨어진다. CSS 성능이란 건 대체로 용량을 말하는데, 용량이 작아야 빨리 다운로드할 수 있기 때문이다. gzip 압축시 mixin은 완전한 반복이므로 용량이 확 줄어드는 반면, extend는 완전한 반복이… Continue Reading →

모바일에서 레이어팝업 스크롤(Scroll) 적용 시키기!

모바일에서 레이어팝업 띄웠을 때 레이어안에서 스크롤이 안되는 경우가 많았다. 스크롤 하게 되면 body쪽 전체 스크롤이 움직이고 안쪽만 안되는 어려움이 많았다. HTML: <div id=”wrap”> <a class=”btn_layerpopup” href=”#layerPopup”>팝업 띄우기</a> <div class=”layer-popup” id=”layerPopup”> <div class=”header”> <span>제목</span> <a class=”btn_close_layer” href=”#none”>닫기</a> </div> <div class=”layer-containers”> <div… Continue Reading →

웹 사이트에 CSS 속성 사용빈도수 보기

사이트마다 CSS 속성들을 얼마나 사용했는지를 알 수 있는 프로그램이 있다. 크롬에 확장프로그램을 받아서 볼 수 있다. 사용 예 테스트 사이트로 우리나라에서 많이 사용하는 포털중에 하나 네이버를 예를 들겠다. 네이버에서 이 프로그램을 실행했을 경우 나오는 화면이다. css를 불러오는것을 체크를 하고 START… Continue Reading →

반응형 사이트(블로그)에 유투브 동영상 넣기.

반응형 사이트를 만들때 (유투브)동영상이나 구글 맵을 넣어야할 때가 있다. 근데 이녀석들은 대부분 고정으로 값을 넣기 때문에 반응형할때 난감해질때가 있다. 위 아래 여백이 생긴다던지 동영상 크기가 비율이 안맞게 나오기도한다. 간편하게 바꿔줄 수 있는 사이트를 소개하겠다.

footer 하단영역에 고정시키기

컨텐츠 영역 상관없이 footer가 하단에 붙게하려면 position:fixed를 하는 방법이 있지만 이건 하단고정이긴 한데.. 위에 뜬 형태이기도 하면서 컨텐츠가 없든 많던간에 원하는 모습이 보여지지 않는다. 그래서 방법이 아래와 같다. HTML 마크업: <div id=”wrap”> <div id=”header”>Header</div> <div id=”body”> <div id=”container”>Contents</div> </div> <div… Continue Reading →

CSS 속성 순서가 있다!

CSS 속성에도 순서를 지켜주면 참 좋다. 되고 말고 CSS를 입력하는 사람들이 있는데… 협업을 할 때는 절대적으로 필요한 순서이며 대체적으로 이렇게 해주면 좋다는 것을 가지고 있다. 필자가 몇군데서 본 속성 순서를 공유하겠다. 여기서 보면 HTML, CSS속성 순서에 대해 설명이 잘되어있고, CSS… Continue Reading →

CSS3 transform, transition, animaiton

transform transform은 요소 박스를 변형하는 속성이다. 2차원, 3차원 변형이 가능하고, 변형 형태별로 함수 타입의 속성값을 지정한다. CSS3 2D Transforms 2d transform 속성은 6가지가 있다. translate() translate() HTML 요소 박스를 평면상에서 수평 이동하는 기능이다. 가로 및 세로 방향을 이동하는 길이 값을… Continue Reading →

CSS 스프라이트 기법 사용하면서 좌표 및 넓이 높이 쉽게 가져오기!

웹 퍼블리싱을 하면서 사이트를 위해 그리고 작업을 하게 된다. 스프라이트 기법에 자세한 설명은 CSS Sprite(스프라이트) 기법이란?에 보면 나와있다. 여기서 이미지를 클릭하면 아래와 같이 값이 나온다. 이것은 샘플화면이고 OPEN를 눌러서 이미지를 넣으면 된다. http://www.spritecow.com/

목록의 글 머리 기호 삼각형 만들기

<ul> <li>리스트 1</li> <li>리스트 2</li> <li>리스트 3</li> </ul> ul { margin: 0.75em 0; padding: 0 1em; list-style: none; } li:before { content: “”; border-color: transparent #111; border-style: solid; border-width: 0.35em 0 0.35em 0.45em; display: block; height: 0; width: 0; left:… Continue Reading →

[CSS] 레이어 중앙정렬

레이어 중앙 정렬 레이어 중앙 정렬 하는 방법 3가지 정도 추천을 할까 합니다. 1.Margin을 이용하는 방법   1-1.Magin 반값을 사용하는 방법 장점: 자주 쓰이는 방법이고 모든 브라우저에서 사용이 가능하다. 단점: 레이어의 사이즈가 유동인 경우 활용하기가 어렵다.   1-2.Margin auto값으로 하는 방법 장점:… Continue Reading →

css 말 줄임 적용하기

한줄 말줄임 { text-overflow:ellipsis; white-space:nowrap; word-wrap:normal; } 여러줄 말줄임 { max-height:54px; display:block; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; text-overflow:ellipsis; }   p { white-space: nowrap; width: 100%; overflow: hidden; /* “overflow” value must be different from “visible” */ text-overflow: ellipsis; }  … Continue Reading →

CSS에 대해 잘 알려져있지 않은 12가지 사실

sitepoint.com에 올라온12 Little-Known CSS Facts라는 글을 간단히 요약한 내용입니다. 원본 글에 들어가면 적용된 화면을 실시간으로 볼 수도 있으므로 원본 글을 읽어볼 것을 추천합니다. 여기서는 간단하게 요약만 해보겠습니다. 1. color는 글자에만 적용되는 게 아니다. – 이미지가 없을 때의 대체 텍스트 색상… Continue Reading →

Textarea with 100% 줬을때 영역 안 벗어나게 하기

고정값이 없을때 고정값을 넣을때.. textarea에 width:100%를 줬을때 영역 벗어날 경우를 볼수 있다. textarea의 width 값은 100% + padding + borders 일 것이다. 그래서 padding과 border값을 빼줘야 한다. class로 해서 주게되면 다음과 같다.. <!doctype html> <html lang=”en”> <head> <style> label {… Continue Reading →

아이폰 사파리 회전시 폰트사이즈 변경버그

아이폰 사파리에서 화면 회전시 폰트 사이즈 변경 되는 것이 있었다. 테스트 결과 <div>, <p>, <li>태그 등 다양하게 반응이 일어나는 것을 확인했다.사이즈 변경이 안되는 것도 있었다. 그래서 차이점이 뭘까 테스트 결과 높이값이 있는 곳에서는 사이즈 변경이 안되지만 높이값이 없는 곳에서는 사이즈… Continue Reading →

IE10 이상 input 텍스박스에 포커스시 X표시 삭제 하는 방법

input[type=text]::-ms-clear{display: none; } IE(익스플로러)10 이상 버전에서 인풋박스에 포커스하면 X표시가 나온다. 이걸 삭제 해주기 위해서는 위의 소스같이 하면 나오지 않는다. 더 자세한 내용은 http://msdn.microsoft.com/en-us/library/windows/apps/hh465740.aspx 에서 볼 수 있다.

CSS3 Gradient Border

CSS .gradient-top-to-bottom{ width: 300px; padding: 20px; border-top: 5px solid #000; border-bottom: 5px solid #ccc; background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#000), to(#ccc)); background-image: -webkit-linear-gradient(#000, #ccc); background-image: -moz-linear-gradient(#000, #ccc), -moz-linear-gradient(#000, #ccc); background-image: -o-linear-gradient(#000, #ccc), -o-linear-gradient(#000, #ccc); background-image: linear-gradient(#000, #ccc), linear-gradient(#000, #ccc);… Continue Reading →

CSS 스타일 초기화 해주는 CSS파일 – normalize.css

모든 웹 브라우저에 동일한 스타일을 적용시키려면 모든 CSS속성을 초기화를 시켜야한다. 총을 쏘기 위해서 0점 사격을 하듯이 말이다. normalize.css 공식사이트 reset.css 보통 넣기도 하고 basic.css로 넣기도 한다. normalize 3.0.0 normalize 4.0.0 3.0.0버전은 옛날버전이고, 4.0.0이 요즘 나온 버전이다. /*! normalize.css v4.0.0 |… Continue Reading →

웹 폰트 사용하기

@font-face { font-family: ‘MyWebFont’; src: url(‘webfont.eot’); /* IE9 Compat Modes */ src: url(‘webfont.eot?#iefix’) format(’embedded-opentype’), /* IE6-IE8 */ url(‘webfont.woff’) format(‘woff’), /* Modern Browsers */ url(‘webfont.ttf’) format(‘truetype’), /* Safari, Android, iOS */ url(‘webfont.svg#svgFontName’) format(‘svg’); /* Legacy iOS */ } … Fonts Formats… Continue Reading →


© 2017 신기한 웹 세상

Up ↑