웹아틀리에 - Web atelier

[크로스브라우징]구버전 ie 테이블 가로스크롤 이슈 해결법 퍼블리셔라면 한번쯤 고민해 봤을 크로스브라우징 이슈 입니다. 이번 포스팅은 ie7에서 ie8~9와 다르게 가로스크롤이 나타나는 현상의 해결법 입니다. 출처 (HEIVLAB) 테이블을 이용하여 상하스크롤이 있는 컨텐츠를 만들기 위해서 어떻게 해야 할까요?? 테이블을 감싸고 있는 div에 height값을 주고 스크롤을 위해 overflow:auto 속성을 줍니다. 테이블요소의 속성으로 ​위와 같이 적용했습니다. 왼쪽은 IE8 ~ IE11브라우저에서 확인한 화면 오른쪽은 IE7에서 확인한 화면 입니다. 그 결과 IE7브라우저에서 상하스크롤 뿐만 아니라 좌우스크롤도 함께 생긴 것을 볼 수 있습니다. 좌우 스크롤을 없애기 위해 oveflow-x:hidde..

[반응형웹]em 과 rem을 적절하게 사용하자. 반응형 웹을 개발하면서 다들 고민을 해보셨을 이야기 입니다. em과 rem의 차이. 그리고 적절한 활용 방법을 정확하게 알려주는 글이 있어서 가져옵니다. 출처 (https://webdesign.tutsplus.com/ko/tutorials/comprehensive-guide-when-to-use-em-vs-rem--cms-23984) 여러분은 아마 좀 더 유연한 측정 단위의 사용을 고려해 보신 적이 있으셨을 겁니다. 그런데 언제 rem 단위를 쓰고, 또 언제 em을 쓸 것인지 아직 완전하게 이해하지 못하셨다면, 이번에 확실하게 안내해 드리겠습니다! em과 rem 모두 길이가 유연한 가변 단위로서, 디자인에 설정된 폰트 크기에 따라 브라우저에 의해 픽셀값으로..

[iOS10] 모바일 웹 줌 막기 최근 iOS10이 나오면서 생긴 이슈가 하나 있네요. 보통 모바일 웹에는 뷰포트 메타태그를 설정하죠? 뷰포트는 웹 사이트를 모바일에서도 보기 편하도록 만들어줘서 필수로 적용들 하죠. 이 태그로 웹을 확대하거나 축소하는 것을 막아두는곳이 꽤 많은데요, 이번 iOS10에서는 이게 제대로 적용되지 않는다고 하네요. 그럴때, 바로 자바스크립트를 이용하는 방법이 있습니다. 터치 이벤트를 받아 터치되는 손가락의 갯수를 구한 뒤 1개보다 많다면 터치이벤트를 작동하지 않게 하는 스크립트 입니다. 모쪼록 이번에 당황하고 계실 퍼블리셔 분들이 많으실것 같아 올려봅니다.

오페라 개발자 사이트에서 퍼왔습니다. Sara Soueidan 이 2014년 6월 10일에 작성한 글이군요. 최근 하드웨어 가속을 3D속성을 이용해 사용하는 것을 자주 목격하는데요. 강제로 3D속성으로 변환시켜 가속하지 않아도 지원하는 속성이 있었습니다. 많은 분들이 알아두면 좋을것 같아 가져옵니다. 출처-https://dev.opera.com/articles/ko/css-will-change-property/시작하면서웹킷 계열 브라우저에서 CSS transform이나 animation 같은 프로퍼티를 사용할 때 발생하는 깜빡이는 현상에 관해 알고 있는 사람은 “하드웨어 가속”이라는 용어를 한번쯤 들어본 적이 있을 것이다.CPU, GPU, 하드웨어 가속하드웨어 가속은 그래픽 처리 장치(GPU)를 이용하여..

[JQuery] input="text" 에서 엔터키로 함수 호출 하는 방법 Form 내부에서 사용하는 input은 자동으로 엔터키로 서브밋 합니다. 하지만 종종 디자인상, 혹은 구조상 form 없이 버튼 없는 검색창 같은 경우를 만들게 되는데요. 이때 엔터키로 함수를 호출하는 방법 입니다. // enter event $('input').keyup(function(e) { if (e.keyCode == 13) 함수호출(); }); 여기서 사용하는 keyCode 13은 엔터키를 가리킵니다. 이벤트를 사용할 때 keydown보다 keyup을 권장 하더군요. 아무래도 keyup이벤트는 한번씩만 실행되기 때문이 아닐까 생각합니다.

HTML DTD HTML DTD(독타입 선언)는 사용하고자 하는 HTML 문서의 종류와 버전을 표시합니다. 독타입에는 몇 가지 종류가 있지만 주로 사용하는것은 다섯 개 정도로 꼽아 볼 수 있겠습니다. DTD는 W3C에서 정의한 웹표준을 의미하는데요, 선언을 해 주지 않으면 다양한 웹 브라우저들이 제각각의 형태로 렌더링을 하고 맙니다. 그래서 최소한의 격차로 줄이고 표준을 만들기 위해 정의 한 것이죠. DTD선언이란 것은 크로스 브라우징의 출발점이자 웹표준의 기초 입니다. 독 타입의 종류와 선언 HTML5 가장 최신의 시맨틱한 트렌디의 독타입 문서 입니다. 대부분의 스마트폰들은 지원을 하고있지만 PC사양에서의 구버전 브라우저들은 완전히 지원을 하지는 못합니다. W3C에서 html5를 공식 표준 권고안으로 ..

출처 - http://www.kimdirector.co.kr/bbs/view.php?id=favorites&no=133 컬러는 GUI 분야 뿐만 아니라 다양한 분야의 모든 디자이너들에게 중요한 디자인의 필수요소입니다. 컬러의 범위는 매우 넓고, 광범위하며 무궁무진한데요. 하늘 아래 같은 색은 없다는 얘기가 있을 만큼 세상엔 다양한 컬러가 존재합니다. 특히 시각적인 매개체를 다루는 디자이너들에게 컬러는 가장 중요한 요소인 동시에 어렵기도 한 문제이기도 합니다. 컨셉에 따라 밝은 컬러와 어두운 컬러, 난색과 한색, 유사과 대비색 등 컬러 선택에 따라 디자인의 분위기와 전체 톤이 달라지기 때문에 디자인 작업 시 많은 고민이 되기 마련이지요. 이번 포스팅에서는 GUI 디자이너들에게 꼭 필요한 컬러 레퍼런스 사이..

크롬 input 태그등에 자동생성 백그라운드 색 제거하는 방법 크롬 브라우저를 사용하여 input 태그등을 사용하면 나중에 페이지를 로딩할 경우 배경색이 다른 경우가 발생한다. 이런 경우는 로그인 페이지를 만들거나 기타 입력폼을 작성할 때 나타나는데 문제는 input 폼이 다수인 경우 모두 바뀌는 것이 아니라 일부만 바뀌어 이상해 보이기 때문이다. 자동완성기능 속성을 off해도 백그라운드가 노란색으로 나타나는 이 스타일을 제거하기 위한 방법은 어떻게 해야하는가? background 속성을 변경해도 적용이 안되는데 그 이유는 해당 백그라운드 칼라는 box-shadow 속성과 관련이 있기 때문이다. 이를 제거하기 위해 아래의 방법을 사용해야 한다. # input 입력폼의 자동완성 백그라운드 제거 방법 inp..

웹 개발에는 많은 단계들이 존재한다. 웹 디자이너, 퍼블리셔, UI/UX개발자, 서버언어 개발자, DB 개발자 등등.. 심지어 부르는 곳 마다 명칭이 조금이 다르기도 하다. 이 구분을 크게 분류하자면 프론트-엔드 개발자, 그리고 백-엔드 개발자. 이렇게 나뉘기도 한다. 명확한 구분도 기준도 없으니 부르는 곳 마다 명칭도 다르고 당연히 혼란이 올 수 밖에 없다. 퍼블리셔라는 이름은 한국에서만 통하는 명칭이다. 사실 굉장히 의견이 분분하고 혼란스러운 것은 최근 떠오르는 프론트 엔드 개발자의 경계다. 이 프론트-엔드라는 것은 어디서 어디까지라고 선을 그어야 할까? 많은 사람들이 의견을 내고 있지만 명확하게 정해진 것은 없다. Front-End 너희집은 어디니? 사실 프론트 엔드와 백엔드를 나누는 것은 쉽다. ..

매번 방문할때마다 느끼는 거지만 네이버 D2 Hello world는 정말 좋은 곳 인것 같습니다. 평소에 별 의미를 느끼지 못하고 사용하던 것들이 알고보면 매우 복잡하고 다양한 로직을 수행하고 있더랍니다. 오늘도 후진 개발자를 위해서 지식을 나누어 주신 분들께 감사를 표하며 글을 읽습니다. 전문출처 - 손찬욱 | 네이버AU개발랩 ( http://d2.naver.com/helloworld/0265052 ) 웹 개발에서 가장 많이 사용하는 JavaScript 프레임워크는 단연 jQuery일 것입니다. 2006년 6월 30일 존 레식(John Resig)이 jQuery 1.0a를 공개한 이후 jQuery는 꾸준히 발전해 지금은 업계의 현실적인 표준이라고 말해도 손색이 없을 만큼 성장했습니다. jQuery는 D..

모던 벡터 UI 아이콘 팩 앱용 아이콘이지만 svg를 호환하므로 웹에서도 사용에 무리가 없을 듯 합니다. 영리목적으로도 이용 가능 합니다. 하지만 정확하게는 아래를 읽어보는것이 좋겠죠? ㅎㅎ CC BY-ND 3.0 Modern UI Icons 약 1290개로 상당히 많은 종류의 아이콘들이 있습니다. 게다가 벡터를 지원하네요. 상업적으로 이용하는데도 무리가 없습니다. 웹폰트로도 제공을 해주는군요. 아이콘들이 상당히 깔끔하고 예쁩니다. 개인적으론 만족하네요. Font Awesome도 자주 사용하지만 이것도 앞으로 사용빈도가 높아질것 같네요. ㅎㅎ 제작자 분들께 언제나 감사합니다.

네이버 D2 페이지의 글을 퍼옵니다. 기본적인 하드웨어 스펙이 나날이 발전하는 요즘, 하드웨어 가속은 굉장히 좋은 스킬입니다. 전문출처 - 박재성 | 네이버AU개발랩 ( http://d2.naver.com/helloworld/3618177 ) 하드웨어 가속에 대한 이해와 적용2015.08.20|11514전통적으로 브라우저는 웹 페이지 콘텐츠의 렌더링을 대부분 CPU에 의존했습니다. 하지만 최근에는 휴대용 기기에도 GPU(graphics processing unit)가 기본으로 포함되고 비디오나 3D 그래픽과 같은 콘텐츠의 사용이 늘면서 GPU를 활용해 웹 페이지의 콘텐츠를 렌더링하는 방법을 고민하게 됐습니다. GPU를 렌더링에 활용하는 하드웨어 가속을 사용하면 성능 향상이라는 이점을 얻을 수 있지만 무분..

기본적인 내용 정렬가운데 정렬을 알아보기 앞서, 가장 간단한 정렬방법을 알아봅니다.내용 가로 정렬내용을 같은 종결 블록 요소의 왼쪽, 중앙, 오른쪽, 양쪽에 정렬한다.CSS.align-left { text-align: left; } .align-center { text-align: center; } .align-right { text-align: right; } .align-justify { text-align: justify; } 내용이 든 종결 블록 요소에만 적용된다.인라인 요소에 적용되지 않으며, 구조 블록 요소에는 제대로 적용되지 않는다.구조 블록 요소에 text-align 속성을 지정하면 그 속성값은 자식 요소로 상속된다.내용 세로 정렬인라인 요소를 부모 요소의 네 폰트라인 중 하나에 맞추려면 ..

와 굉장하네요.. 이런 방법이 있었을 줄은... 이제 더이상 inline-block의 공백때문에 속이 터지지 맙시당.. ㅎㅎ 출처 링크 I've seen this come up a couple of times lately on Twitter and then an interesting Dabblet so I figured it would be an important thing to document. Here's the deal: a series of inline-blockelements formatted like you normally format HTML will have spaces in between them. In other words: One Two Three nav a { display: inl..

지난 포스팅엔 a태그 까지 작성을 했었네요. 오늘은 이어서 관련 태그들을 포스팅 하도록 하겠습니다. 이미지 태그 이미지 태그 사용법 입니다. 1. 경로 절대경로 절대 경로는 이름 그대로 변하지 않는 절대적인 경로 입니다. 이것은 a 태그 경로와도 똑같은데요. 이렇게 사용하는 것이죠. 이 경로는 불변이기 때문에 작성되고 있는 페이지가 어디로 이동이 되든지 링크가 변할 일은 없습니다. 상대경로 상대경로는 조금 이해가 필요한데요. 실제 링크가 사용되어지고 있는 위치에 따라 변하게됩니다. 이렇습니다. 좀 더 간단하죠? 이 경로에 대해 설명을 드리자면.. 현재 이 링크가 작성되고 있는 페이지에서 "../"를 이용해 상위 폴더로 나온다음 "/images"를 이용해 images폴더로 들어갑니다. 그리고 그 안쪽에 있..