웹아틀리에 - 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 모두 길이가 유연한 가변 단위로서, 디자인에 설정된 폰트 크기에 따라 브라우저에 의해 픽셀값으로..

[웹폰트] 올바른 방법으로 로딩하자. - 사이트 로딩 속도 개선 평소 웹을 보면 심심치않게 웹폰트가 적용되어 있는 것을 볼 수 있습니다. 이미 널리 쓰이고 있는 중인데요. 그런데 알고 계신가요? 웹폰트의 용량은 생각보다 큽니다. 영문 폰트의 경우는 그래도 괜찮습니다. 종류도 다양하고 용량도 작습니다. 문제는 한글 웹폰트죠. 실제로 c드라이브의 폰트 폴더에 가서 확인해 보면 한글 폰트의 용량은 매우 큰 편입니다. 그 용량을 웹에서 로딩한다면...? 사이트 이용자는 속도도 그렇지만 매번 폰트 다운로드로 인한 용량 때문에 데이터에 신경을 쓸 수 밖에 없습니다. 이미지는 경량화 하는데... 폰트는..? 사실 폰트를 서버에 올려서 사용하는 방법은 그리 추천드리지 않습니다. 데스크탑의 폰트는 용량이 매우 크기 때문..

웹 개발에는 많은 단계들이 존재한다. 웹 디자이너, 퍼블리셔, 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 속성을 지정하면 그 속성값은 자식 요소로 상속된다.내용 세로 정렬인라인 요소를 부모 요소의 네 폰트라인 중 하나에 맞추려면 ..

오늘의 CSS! 를 쓰면서 버튼이 싫으신 분들은 그동안 고통스러우셨을꺼라고 생각합니다..(아닐수도 있습니다 ㅎㅎ) 저 버튼을 없애버리는 css를 들고 왔습니다. input[type="number"]::-webkit-outer-spin-button, input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } css에 이렇게 적어주시면 이렇게! ㅎㅎ 깔끔하게 됩니다.

와 굉장하네요.. 이런 방법이 있었을 줄은... 이제 더이상 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..

구글링 중 아주 좋은 글을 발견해서 공유하고자 퍼왔습니다. 출처는 바로 아래 링크 걸었습니다. 네이버D2 페이지입니다. 전문출처 - 박재성 | 네이버AU개발랩 ( http://d2.naver.com/helloworld/3618177 ) 웹 프락시 도구인 Fiddler의 개발사 Telerik은 JavaScript 기술의 현재 경향과 전망을 살펴보는 보고서인 "THE FUTURE OF JAVASCRIPT-2016 AND BEYOND"(JavaScript의 미래 - 2016년과 그 이후)를 발표했습니다. 보고서는 JavaScript 커뮤니티를 대상으로 진행한 설문 조사의 결과와 저자들의 의견을 바탕으로 최신 JavaScript 기술과 JavaScript 프레임워크, 웹 이외 영역의 JavaScript 기술이 ..

많은 개발자 분들이 고민을 하시는 부분 입니다. 웹 표준을 지켜야 하는것과 접근성. 그리고 호환성. 어디까지 해야 하는가? 라는 의문인데요. 이렇게 고민하다 보면 간과하거나 의미를 잘못 이해하는 경우도 생기지요. 그래서 자주 가는 블로그의 좋은 글을 하나 퍼왔습니다. 웹표준을 준수하기 위해서는 XHTML을 써야 한다?HTML 4.01을 잘 준수해도 웹표준을 준수한 것이다. 웹표준에서 중요한 것은 어떤 종류의 마크업 언어를 사용했는냐 보다 요소와 속성의 의미를 얼마나 잘 이해하고 적절히 문법에 맞게 사용했는지이다.Strict DTD에서는 CSS 핵을 사용할 수 없고 Transitional DTD에서는 사용할 수 있다?DTD와 CSS 핵 사용 가능 여부는 전혀 관련이 없다. CSS 핵을 쓰는 것은 표준에 위..

웹상에는 다양한 참고 사이트가 굉장히 많이 있는데요. 실제로 본인이 많이 참고하는 사이트들을 정리해보았습니다. 1.Cordrops 웹 디자인 튜토리얼과 CSS, jQeury 등 매우 많은 자료가 모여있습니다. 데모 뷰 기능이 있어서 매우 편리하기도 하구요. 다운로드 링크도 참조해줍니다. 가장 많이 사용하고 있네요. 라이센스는 대부분 MITLicence지만 항상 라이센스 부분은 꼭꼭 확인해 주도록 합시다. 내가 만든게 중요한만큼 다른 제작자가 만든것도 당연히 중요하겠죠. 2.WDC 웹 디자인, 개발, 마크업 등 다양한 방면으로 자료들을 모은 예제 참고 사이트 인데요. 굉장히 참고할 것들도 많고 구현해볼 것들도 많아 아주 재미있는곳 입니다. 3.Tympanus 페이지 전환 등 웹에서 사용할 수 있는 트랜지션..

Atelier 아틀리에(atelier)는 제작 혹은 작업자의 공방 이라는 뜻입니다. 작업자들의 주 무대이기도 하고 편안하게 자신의 맘대로 재료를 주무를 수 있는 곳입니다. 안녕하세요. 웹 프론트엔드 개발자의 길을 걸어가고있는 1인 입니다. 경력도 보잘것 없고 기술도 썩 뛰어난 것은 없지만 공부를 하면서 느끼는 것, 고민하는 것. 그러한 것들을 함께 나누며 더불어 성장 해 나가려 이 블로그를 시작합니다. -Web Atelier-