WEB개발이야기/웹퍼블리싱 2024. 2. 26.
Classnames vs. clsx: 당신에게 딱 맞는 CSS 클래스 조합 도구는?
React에서 동적으로 클래스 이름을 조작하는 것은 흔히 발생하는 작업입니다. 이 작업을 간편하게 해주는 두 라이브러리가 바로 classnames와 clsx입니다. 이 글에서는 두 라이브러리의 장점과 단점, 특이할 만한 사항 등을 비교 분석하여 개발자들이 각 라이브러리의 특성을 파악하고 적절하게 선택하는 데 도움을 드리고자 합니다. 또한 그 중에서 최근에 더 곽광을 받고 있는 clsx에 대해서 자세히 살펴보겠습니다. 1. Classnames classnames는 클래스 이름을 조합하고 조건부로 적용하는 데 사용되는 유틸리티 라이브러리입니다. 다음과 같은 특징을 지닙니다. 장점: 직관적인 API: classnames는 객체 형식으로 클래스 이름을 정의하여 간결하고 직관적인 코드를 작성할 수 있도록 합니다...
WEB개발이야기/웹퍼블리싱 2024. 2. 22.
Day.js vs Moment.js: 날짜 처리 라이브러리 비교 분석 (초보자를 위한 가이드)
JavaScript에서 날짜 처리를 위한 라이브러리는 필수적인 요소입니다. 다양한 날짜 형식을 다루고, 계산하고, 포맷팅하는 작업을 쉽게 해주죠. 그 중 가장 인기 있는 라이브러리로는 Moment.js와 day.js가 있습니다. 과연 어떤 라이브러리가 더 나은 선택일까요? 1. 비교 분석 기준 day.js Moment.js 크기 (gzip) 2.1KB 22.9KB 성능 약 1.4배 빠름 - API Moment.js와 유사, 변경 불가능 객체 사용 다양한 함수 제공, 객체 직접 수정 가능 기능 핵심 기능 집중, 플러그인을 통한 확장 가능 다양한 기능 제공 지원 활발하게 개발 중, 커뮤니티 성장 중 탄탄한 지원 체계, 활발한 커뮤니티 브라우저 지원 IE 11 지원하지 않음 IE 11까지 지원 장점 가볍고 빠..
WEB개발이야기/웹퍼블리싱 2021. 10. 20.
자식 컴포넌트의 CSS(SCSS)를 정의할 수 있는 딥셀렉터(v-deep) 설정하는 방법
Vue 프로젝트를 진행하다 보면 vuetify나 quasar 등 매우 다양한 프레임워크나 컴포넌트를 사용하게 됩니다. 그러면서 그 컴포넌트를 내 Vue 프로젝트의 자식 컴포넌트로 불러와서 사용하는 경우가 있는데 그 컴포넌트를 어떻게 CSS를 적용해서 내 입맛에 맞추어 스타일을 변경하고 싶으나 그게 생각처럼 되지 않는 경우가 있습니다. 그걸 되게 하는 방법을 설명해 보려고 합니다. 자식 컴포넌트의 CSS에 쉽게 접근이 되지 않는 이유이렇게 되는 이유는 웹 컴포넌트의 중요한 측면인 스타일 캡슐화때문이라고 합니다. 다시말해서 현재 컴포넌트에 적용된 css(scss)가 현재의 컴포넌트에만 적용되고 다른 컴포넌트에는 간섭이 되지 않도록 하기 위함이라고 보시면 됩니다. 그래서 Vue컴포넌트에서 그런데 scoped를..
WEB개발이야기/웹퍼블리싱 2020. 3. 27.
Font Awesome 5를 슬기롭게 사용하는 방법
웹사이트를 개발하다 보면 아이콘이 필요한 경우가 많습니다. 인터넷을 찾아보면 다양한 방법과 형식으로 무료로 제공해 주는 웹사이트가 많이 있는데요. 그중에서도 가장 많이 사용되는 폰트어썸(Font Awesome)이라는 웹사이트가 있습니다. 예전에는 사용하는 방법에 대해서 이해하기도 쉽고 사용하기도 쉬웠는데 Font Awesome 5로 업데이트되면서 사용법이 상당히 복잡해 졌습니다. 그러면.. 복잡해져서 나빠진 것이냐? 하면 그렇지 않습니다. 잘 알고 슬기롭게 사용하면 이전 버전보다 더 좋아지고 더 많은 플랫폼을 지원하고 있다는 것을 알게 됩니다. 사실 폰트어썸에서도 먹고 살아야 하니 유료화 정책을 적용하기 위해 복잡해진 것도 없잖아 있습니다. ^^; 웹사이트에 폰트어썸(Font Awesome 5) 적용하기..
WEB개발이야기/웹퍼블리싱 2020. 2. 29.
DOM의 변화를 감시하는 javascript MutationObserver
Tistory같은 경우 스킨을 만들때 내가 모든 Event를 통제 할 수 없기 때문에 DOM의 변화를 감지하는 javascript 장치가 필요합니다. 옛날에는 DOMSubtreeModified 를 많이 사용했었지만 DOMSubtreeModified을 잘못 사용하면 무한루프에 빠지기 떄문에 성능을 저해해서 DOM 이벤트 표준에서 지원이 중단되었습니다. 그래서 대체로 사용할 수 있는 것이 MutationObserver입니다. MutationObserver 는 DOM의 변화를 감시합니다. 기본 사용법 가장 기본적인 사용법은 아래와 같습니다. 상세한 설정은 config를 통해 할 수 있습니다. // 1. 대상 선정 var target = document.getElementById('some-id'); // 2...
WEB개발이야기/웹퍼블리싱 2020. 2. 10.
jquery로 높이(height)와 넓이(width)를 측정하는 모든 방법
jquery가 정점을 찍은 후 지금은 Angular, react, vue에 의해 퍼블리싱 업계에서 조금씩 힘을 잃어가고 있긴 하지만 아직까지 현장에서 가장 많이, 그리고 요긴하게 사용되고 있는 기술임에는 틀림없습니다. 그중에서 가장 많이 사용되는 Function중 하나가 element's(요소)의 높이와 넓이 값을 알아내거나 세팅할 때 매우 편리하게 사용할 수 있는 height(), width() 가 아닐까 합니다. 쉽지만 헷갈리기 쉬운 element's(요소)의 높이(height)와 넓이(width)를 측정하는 방법을 소개하려고 합니다. 사전 지식 이것을 설명하기 전에 element's(요소)의 크기 값에 영향을 미치는 구성방식을 간단히 설명하면 아래와 같습니다. div 요소가 있다고 하면 내부의 여백..
WEB개발이야기/웹퍼블리싱 2019. 10. 4.
하드코딩의 완소 아이템 인 자동 코드완성 emmet을 아시나요?
하드코딩을 선호하는 프론트앤드 개발자에게 아주 중요한 도구가 하나 있습니다. 예전에는 스니펫(snippets)이라고도 불렀었는데 그 사용법이 제공자마다 조금씩 달랐었습니다. 하지만 언제부턴가 Emmet이 나오면서 자동완성 코드의 사용법이 어느정도 통일이 된 것 같습니다. Emmet이 도대체 뭐야? Emmet을 한마디로 요약하면 제목에도 나와 있듯이 약속된 형태의 카워드를 작성하고 변환키를 눌러주면 자동으로 코드를 완성시켜주는 툴킷이라고 할 수 있습니다. Emmet은 웹 개발자를 위한 필수 툴킷 이며 현재 출시되어 있는 많은 인기있는 텍스트 편집기에서 플러그인 형태로 제공되고 있습니다. Emmet을 통해서 HTML 및 CSS 작업 과정을 효율적으로 작업할 수 있습니다. Emmet.io 적용가능한 텍스트 편..
WEB개발이야기/웹퍼블리싱 2019. 10. 2.
이미지를 DIV 가로, 세로에 대해 가운데 위치시키는 방법
예전에 이미지를 정해진 크기의 DIV의 가로, 세로 기준으로 중앙으로 정렬시키는 방법에 대해 포스팅한 적이 있습니다. 원하는 DIV박스 안에 최적의 이미지 사이즈로 표시하기 이 방법보다 더 쉽고 간단한 방법을 찾아내어 다시 포스팅을 합니다. background image의 cover을 활용하는 방법입니다. HTML 구성 먼저 HTML로 구성해야 하는 코드입니다. 이미지를 감싸고 있는 DIV를 통해서 나와야 할 이미지의 크기를 설정하시면 됩니다. 그러면 이미지가 그 크기에 맞게 중앙 정렬이 됩니다.
WEB개발이야기/웹퍼블리싱 2019. 9. 30.
웹사이트에 구글 웹폰트 적용하기
예전에 비해 근래는 무료 웹폰트를 적용하기에 좋은 시절입니다. 예전에는 웹폰트 하나 적용하려면 지식도 많이 필요했고 폰트라이선스도 구매했었어야 했습니다. 하지만 지금은 무료로 제공되는 웹폰트도 많고 구글에서도 무료 웹폰트를 온라인으로 서비스하고 있어서 쉽게 적용 할 수 있습니다. 구글폰트에서 웹폰트 확인 및 코드 획득하기 먼저 구글 폰트 웹사이트에 접속합니다. 구글 폰트 웹사이트 구글폰트 웹사이트에 접속합니다. 한글 폰트를 적용하기 위해서 Language 선택에서 Korean을 선택합니다. 폰트리스트 중 사용하기 원하는 폰트를 선택합니다. 선택된 폰트는 우하단에 저장됩니다. + 버튼을 클릭하면 장바구니에 저장됩니다. 폰트 용량 자체가 크기 떄문에 폰트 굵기 종류가 1개 추가 될 때마다 용량이 많이 증가하..
WEB개발이야기/웹퍼블리싱 2019. 9. 30.
javascript로 드레그가 가능한 HTML 요소 만들기
javascript로 HTML의 DIV를 드레그할 수 있게 하는 간단한 기능 구현입니다. 이와 비슷한 기능은 jquery UI에서 제공해 주고 있긴 하지만 드레그 기능 하나 구현하겠다고 jquery UI를 붙히기는 웬지 손해 보는 느낌입니다. 바닐라JS로 구현하는 코드와 설명입니다. HTML 먼저 간단하지만 HTML 구성요소 입니다. CSS CSS도 간단하게 구현합니다. 마우스가 해당 요소에 올라가때 화살표 마우스 표시가 이동이 가능한 표시로 바뀜니다. #dragdiv { cursor: move; } javascript 핵심기능인 javascript 코드 입니다. 바닐라JS로 구현 시 3가지의 단계로 구현이 되면 하나씩 설명을 하겠습니다. 마우스로 요소를 클릭 할 때 기능 구현 클릭한 요소를 움직일 떄 ..
WEB개발이야기/웹퍼블리싱 2019. 5. 24.
현재 가장 모던한 모바일 터치 슬라이더 swiper
현재 github에서 거의 20,000에 달하는 Star을 받고 있는 모던한 모바일 터치슬라이더 플러그인입니다. 모바일뿐 아니라 Web화면에서도 아주 잘 작동하는 검증된 플러그인이라고 보시면됩니다. MIT 라이선스를 가지고 있어서 부담없이 사용할 수 있고 데모 사이트에서 다양한 Swipe DEMO를 보고 쉽게 적용할 수 있습니다. 홈페이지http://www.idangero.us/swiper DEMOhttp://www.idangero.us/swiper/demos/Install아래와 같은 다양한 방법으로 소스를 적용할 수 있습니다. bower로 설치할 경우 $ bower install swiper또는 Atmosphere as Meteor 패키지로 설치할 경우 $ meteor add nolimits4web:s..
WEB개발이야기/웹퍼블리싱 2019. 2. 22.
javascript ECMAScript 2015(ES6)로 개발할 때 반드시 알아야할 9가지
ECMAScript2015로 개발하기 위해 알아야 할 9가지를 정리해 보려고 합니다. 먼저 간단하게 ECMAScript를 소개 하겠습니다. ECMAScript 옛날 옛적에 넷스케이프(NE)와 인터넷익스플로러(IE)가 주도권 경쟁을 하던 시절~~ 넷스케이프(NE)는 javascript를 지원했고 인터넷익스플로러(IE)는 Jscript를 지원 했었습니다. 윈도우즈에 끼워팔기 신공으로 점차 득세를 하기 시작한 인터넷익스플로러는 그만 자만심에 빠져 Jscript를 표준이 아닌 적당히 자기만의 기능을 추가하기 시작했습니다. 내가 점유율이 높으니 모든 브라우저들이 내가 만든 기준을 따라 올 거라 생각을 했던 것입니다. 하지만 망하기는 했지만 넷스케이프도 그렇게 호락호락하지 않았습니다. 자신이 밀고 있던 javasc..
WEB개발이야기/웹퍼블리싱 2018. 11. 7.
highlight.js를 활용하여 Code구문 강조하기
많은 개발자들이 웹사이트에 글을 작성할때 코드 부분을 실제 에디터에서 보이는 것 처럼 강조하기 위한 방법으로 highlight.js을 사용합니다. 이것을 사용하기 위해 npm 또는 yarn을 사용하여 프로젝트에 포함시키는 경우도 있지만 제가 소개하는 방법은 가장 간단하게 CDN을 활용하여 index.html에 적용하여 사용할 수 있는 쉬운 방법니다. CDN이란 : CDN은 콘텐츠 전송 네트워크(Content delivery network 또는 content distribution network (CDN))의 약자로 CDN 서버에 javascript나 images, sound등등..의 컨텐츠를 올려놓고 여러 위치에 동일한 파일을 분산시켜 저장해 놓습니다. 사용자가 해당 컨텐츠 파일을 요청할 경우 사용자와 ..
WEB개발이야기/웹퍼블리싱 2018. 8. 29.
jQuery로 A태그 실행 시키기
웹퍼블리싱을 하다 보면 사용자가 아니라 javascript에서 A태그에 적혀있는 링크를 실행시켜야 하는 경우가 종종 있습니다. 다시말해 사람이 클릭하는 것이 아니라 조건에 맞으면 javascript가 클릭하게 하는 방법입니다. 저도 한참 찾아 해맸었는데.. 아래와 같은 jQuery 명령어로 실행이 가능 합니다. $('선택자').get(0).click(); 간단하게 예제를 살펴보시면 이해가 될것입니다. Javascript 코드 if( true ) { $('#uxgjs').get(0).click(); } HTML 코드 조건이 참이면 http://uxgjs.tistory.com이 경로로 이동을 합니다.
WEB개발이야기/웹퍼블리싱 2018. 8. 12.
원하는 DIV박스 안에 최적의 이미지 사이즈로 표시하기
이미지를 최적의 사이즈로 마추어서 표시해야 할 때가 있습니다. 저같은 경우는 Bootstrap 4의 card Component를 사용할 경우에 필요해서 개발을 해 봤습니다. 구현결과 구현하고자 하는 모양새는 아래와 같습니다. 이미지가 넓이로 긴 경우 높이값을 100%로 맞추고 넓이값을 중앙으로 맞춥니다. 이미지가 높이로 긴 경우 넓이값을 100%로 맞추고 높이값을 중앙으로 맞춥니다. HTML 구현 핵심은 class="js-imgSizeSame" 입니다. 이 클래스명을 기준으로 javascript로 사이즈를 조절합니다. javascript 구현 javascript는 jquery를 활용하였습니다. 이미지를 찾는 부분과 불러온 이미지의 크기를 조절하여 중앙으로 맞추는 Function으로 구분하여 작성하였습니다..
WEB개발이야기/웹퍼블리싱 2018. 7. 11.
javascript 배열 중에 내가 찾는 단어가 포함되어 있는지 확인하기
javascript의 배열 리스트 중에 내가 찾는 단어가 포함되어 있는지 없는지를 확인할 필요가 있습니다. 몇가지 방법이 있지만 indexOf나 lastIndexOf를 통해서 확인 할 수 있습니다. 구문 array.indexOf(searchElement[, fromIndex]) array.lastIndexOf(searchElement[, fromIndex]) 해결방법 var fruit = new Array("apple","orrange","pear","grape"); alert(fruit.indexOf("pear")); // 2 출력 alert(fruit.lastIndexOf("pear")); // 1 출력 var fruit = new Array("apple","orrange","pear","grape"..
WEB개발이야기/웹퍼블리싱 2018. 7. 10.
CSS로 그럴듯한 버튼효과를 내보자
별도의 라이브러리를 사용하지 않고 순수하게 CSS3만을 활용하여 버튼의 효과를 줄 수 있습니다. 급하게 퍼블리싱할때 써먹을 수 있게 정리해 놓겠습니다. 미리보기 BUTTON 1 BUTTON 2 BUTTON 3 BUTTON 4 코드설명 HTML HTML은 기본 버튼을 사용하고 .btn으로 기본속성을 지정하고 .hover로 효과의 형태를 변경하겠습니다. BUTTON 1 BUTTON 2 BUTTON 3 BUTTON 4 CSS .btn의 설정으로 기본형태를 정의합니다. 아래쪽에 있는 transition과 color속성이 중요하다 할 수 있습니다. .btn { display:block; width:200px; height:40px; line-height:40px; border:1px #3399dd solid;; ..
WEB개발이야기/웹퍼블리싱 2018. 7. 10.
레이아웃의 다단을 100% 로 맞추기
예전에 Table로 레이아웃을 잡을 때는 어렵지 않게 구현되었던 표현인데 근래들어서 웹표준에 맞게 코딩을 하게 되면서 레이아웃을 DVI태그로 구현해야 하게 되므로써 다소 구현이 어려워진 것 중에 하나가 다단을 구성하는 것이 아닐까 합니다. 그 다단을 구현하는 방법이 여러가지가 있을 것 같은데.. 이번에 소개를 해드리는 것은 javascript로 구현하는 방법입니다. 레이아웃을 구성 시 2단 또는 3단 이상의 다단을 구성할때 상위 Tag에 대해 가로 100%로 자동으로 맞춰지는 javascript 입니다. 예를들어 만약 레이아웃을 4단으로 구성한다고 했을 때 3개의 단에 대해서는 px 또는 %로 고정값을 지정하고 나머지 하나의 단에 대해서만 .pct 클래스를 지정해 주면 .pct 클래스가 자동으로 나머지 ..
WEB개발이야기/웹퍼블리싱 2018. 7. 10.
완벽한 CSS3 선택자 총정리
CSS3를 잘 활용하기 위해서는 먼저 선택자를 확실히 알고 넘어가야 합니다. 선택자란 내가 손을 보고자 원하는 HTML테그를 정확히 집어내는 것을 말합니다. 자주 사용하는 선택자의 경우는 잃어버릴 일이 거의 없지만 자주 사용하지 않는 선택자는 잘 생각이 나지 않는경우가 많습니다. 그것을 대비해서 일단 CSS3의 선택자를 정리해 놓으려고 합니다. 제가 잘 활용하려고 정리하는 목적이 크지만 처음보시는 분도 도움이 될 수 있도록 정리해 놓겠습니다. 선택자는 기본 선택자, 속성 선택자, 상태 선택자로 나눌수 있습니다. 기본 선택자 가장 기본이 되는 선택자로 CSS를 다루시는 분이라면 반드시 알아야 하는 선택자 입니다. 서식 설명 CSS버전 * 모든 요소 선택 2 E 태그명이 E인 요소 선택 1 #myIDname..
WEB개발이야기/웹퍼블리싱 2018. 7. 10.
무료로 아이콘 폰트 사용하기 - XEICON 편
웹사이트를 개발 시 아이콘을 제작하려고 하는데 딱히 디자이너가 없는경우~, 아이콘을 사용하고 싶은데 라이선스를 구매하기 어려운경우~ 이렇때 고맙게도 무료이면서 간단하게 아이콘을 사용할 수 있는 방법이 있습니다. 대표적으로 폰트어썸이 있지만 우리나라에서도 서비스를 해주는 곳이 있습니다. 바로 XEICON 입니다. XEICON XEICON 홈페이지 바로가기 XEICON은 예전에는 제로보드로 이름을 날렸고 현재는 Xpressengine이라는 브랜드네임으로 서비스를 하고 있는 XE프로젝트에서 Fonts형 아이콘 형태로 무료 서비스를 하고 있는 웹사이트입니다. 이 XE프로젝트는 현재 네이버에서 서포트를 받고 있기 때문에 쉽게 사라지지는 않을 듯 합니다. Fonts형 아이콘을 무료로 제공하고 있는 원조격인 폰트어썸..
WEB개발이야기/웹퍼블리싱 2018. 7. 10.
폰트어썸 (Font Awesome) 아이콘 폰트 사용하기
아이콘 폰트인 폰트어썸 (Font Awesome)을 사용하는 방법입니다. 아이콘폰트가 무엇인지 궁금하면 이전에 포스팅한 아이콘 폰트(Icon font) 자유자제로 사용하기를 먼저 읽어 보시는 것을 추천합니다. 폰트어썸 (Font Awesome) 폰트어썸 (Font Awesome) 홈페이지 바로가기 폰트어썸은 가장 유명한 대표적인 아이콘폰트 제공 사이트 입니다. 다양한 형태의 아이콘이 빠르게 업데이트되고 있으며 깃헙에서 51000여개의 star를 받고 있을 정도로 사랑을 받고있습니다. 현재 유료서비스를 시도하고 있긴하지만 무료로 사용할 수 있는 아이콘도 현재까지 675개나 되어서 상당히 인기가 높습니다. 다만 주의 할 점은 GPL라이선스를 따른다는 것입니다. GPL라이선스는…… 설치 방법 설치는 크게 2가..
WEB개발이야기/웹퍼블리싱 2018. 7. 10.
나만의 아이콘 폰트(Icon font) 만들기
정해져 있는 아이콘 폰트를 사용하는 경우도 있지만 때에 따라서는 내가 원하는 아이콘을 폰트화 시켜서 사용해야 할 경우도 있습니다. 이번에는 나만의 아이콘 폰트를 만드는 방법에 대해서 정리해 보려고 합니다. 아이콘 폰트가 무엇인지 궁금하면 이전에 포스팅한 아이콘 폰트(Icon font) 자유자제로 사용하기를 먼저 읽어 보시는 것을 추천합니다. 나만의 아이콘 폰트 만들기 오픈소스로 제공되어 정해져 있는 아이콘 폰트를 사용하는 경우도 있지만 내가 원하는 아이콘을 아이콘 폰트 형태로 만들어서 사용할 수도 있습니다. 이럴경우 필요한 아이콘만 사용할 수 있어서 용량을 줄일 수 있는 잊점이 있습니다. 다만 아이콘 폰트로 만들어야하는 아이콘은 벡터그래픽 파일 형식인 SVG 파일 포멧이어야 합니다. 아이콘 폰트를 만들어..
WEB개발이야기/웹퍼블리싱 2018. 7. 10.
구글 머티리얼 아이콘(Material icons) 폰트 사용하기
아이콘 폰트인 구글 머티리얼 아이콘 (Google Material icons)을 사용하는 방법입니다. 아이콘폰트가 무엇인지 궁금하면 이전에 포스팅한 아이콘 폰트(Icon font) 자유자제로 사용하기를 먼저 읽어 보시는 것을 추천합니다. 구글 머티리얼 아이콘 (Google Material icons) 구글 머티리얼 아이콘 홈페이지바로가기 구글에서도 머티리얼 아이콘을 무료로 사용할 수 있게 공개를 했습니다. 구글 머티리얼 아이콘은 웹폰트형식 뿐만이 아니라 안드로이드나 아이폰에서도 사용할 수 있게 SVG와 PNG 형식으로도 아이콘을 제공을 하고 있습니다. 여기서는 다른사이트와 동일하게 웹폰트형식의 아이콘 폰트를 사용할 수 있는 방법에 대해서만 설명을 하도록 하겠습니다. 설치 방법 설치는 크게 2가지로 나누어..
WEB개발이야기/웹퍼블리싱 2018. 7. 10.
아이콘 폰트(Icon font) 자유자제로 사용하기
웹사이트를 제작 시 생동감 있는 사이트를 만들기 위해서는 아이콘은 필수로 들어가는 요소입니다. 간단하게는 블릿에서 부터 중요하게는 웹사이트의 매인 이미지 까지도 아이콘으로 사용하는 경우가 있는데 예전에는 이러한 아이콘들을 디자이너에게 만들어 달라고 요청을 하던지 아니면 웹에서 무료로 제공하는 아이콘 이미지들을 찾아서 잘라서 적용하고는 했었는데요. 근래에는 오픈소스가 발달하면서 이러한 아이콘들을 쉽고 편하게 사용할 수 있게 제공해 주는 다양한 사이트들이 생겨나고 있습니다. 그 중에서도 아이콘들을 폰트와 비슷한 속성으로 만들어서 마치 폰트처럼 아이콘을 사용할 수 있게 제공을 하고 있습니다. 예전에 이런 것을 딩벳 폰트라고 했었는데.. 이제는 웹폰트형식으로도 무료 제공하고 있어서 웹사이트에 쉽게 적용할 수가 ..
WEB개발이야기/웹퍼블리싱 2018. 7. 10.
이미지 하단에 생기는 이상한 공백 없애기
HTML로 레이아웃을 설정하다보면 DIV태그 안 이나 P태그 안에 이미지가 있는 경우 이미지 하단에 약 1~3px정도의 공백이 생기는 경우를 볼 수 있습니다. 그 공백을 없애려고 이리 찾아보고 저리 찾아봐도 해결이 잘 되지 않는데요. 이것을 없애는 방법을 정리해 보려고 합니다. ▲ 하단에 파란색의 공백이 있음(표시를 위해 백그라운드색을 파란색으로 했음) 원인 위와 같이 Image를 DIV나 Table에 넣을 경우 하단에 원치않는 공백이 생깁니다. 그 이유는 Image가 인라인 요소이기 때문에 그런 것입니다. 인라인 요소의 경우 블록 요소와 달리 보이지 않는 가상의 기준선이 존재를 하는데 기본값으로 vertical-align의 baseline에 위치를 하게 됩니다. baseline은 영문 소문자로 치자면 ..
WEB개발이야기/웹퍼블리싱 2018. 7. 10.
HTML5 태그의 블록 요소와 인라인 요소
HTML의 태그는 크게 블록 요소(block element)와 인라인 요소(inline element)로 나누어 집니다. 이 부분을 명확히 이해하고 있어야 CSS를 사용하는데 어려움이 없습니다. 이 각각의 요소에 적용되는 CSS가 별도로 존재하기 때문에 CSS를 적용해 놓고도 "왜 적용이 되지 않지?" 라는 상황이 발생할 수 있습니다. 예를들면…. 인라인 요소는 height가 적용되지 않는다. 인라인 요소는 width가 적용되지 않는다. 인라인 요소는 text-align이 적용되지 않는다. 블록 요소는 vertical-align 이 적용되지 않는다. 블록요소 (block element) 블록 요소는 모든 인라인 요소를 포함할 수 있고 다른 블록 요소도 일부 포함 할 수 있습니다. 그리고 기본적으로 가로폭..
WEB개발이야기/웹퍼블리싱 2018. 7. 10.
웹디자이너라면 꼭 알아야 할 Flexbox Layout
웹디자인을 하면서 레이아웃을 잡는 방법에 대해서 시대별로 많은 변화가 있었습니다. Web이 나오기 시작한 초창기에는 Table을 이용하여 화면의 레이아웃을 잡았고 웹표준, 웹접근성이 이슈화 되면서 시멘틱한 마크업이 대세가 되면서 CSS의 DIV를 이용한 방법으로 레이아웃을 잡았습니다. CSS3로 버전업이 되면서 레이아웃 구현애 대한 방법으로 Flexbox가 탄생하게 되었고 2017년 현재 레이아웃을 편리하게 구현하기 위해서는 Flexbox를 사용하여 구현하는 것이 최선이라 할 수 있습니다. 그래서 웹디자이너나 Frontend 개발자라면 꼭 이해를 하고 넘어가야 하는 요소입니다. Flexbox의 브라우저별 지원 현황 브라우저별 Flex 지원은 현재 대부분의 브라우저가 지원하고 있다고 보면 되고 Intern..
WEB개발이야기/웹퍼블리싱 2018. 7. 10.
크롬에서 input, textarea, button에 생기는 파란색 테두리 없애는 방법
웹디자인을 하다보면 input이나 textarea등의 Form요소에 포커싱이 될때 원치않는 파란색 테두리가 쳐지는 것을 볼 수 있습니다. 이런 현상은 크롬브라우저에서 발생을 하는데 원인과 해결방법을 포스팅하려고 합니다. 원인 IE에서는 이런현상이 없는데 크롬브라우저에는 발생하는 현상입니다. 오류라기 보다는 접근성에 대한 정책으로 보면 될것 같습니다. input이나 textarea에 포커싱이 될 경우 포커싱이 되었다는 것을 표시하기 위해 outline 요소가 작동하는 것입니다. 해결방법 outline은 border와 흡사한 방식으로 css로 핸들링을 할 수 있습니다. 그래서 그냥 focus되는 영역의 outline의 두께를 0으로 만들면 됩니다. 주로 input이나 textarea, button 요소에 생..
WEB개발이야기/웹퍼블리싱 2018. 7. 10.
CSS에서 ellipsis('...')를 처리하는 방법
이번에 ellipsis에 대해 정리해 보도록 하겠습니다. 보통 게시판 리스트의 제목부분이 길어질 경우 php나 jsp등의 프로그램단에서 일정 글자수 이상이 되는 것에 대해 '…'으로 마무리 하는 경우가 많은데요.. 이것을 프로그램이 아닌 CSS만 가지고도 처리할 수 가 있습니다. 한줄라인 글자수 제한 한줄 라인 글자수 를 제한하는 방법은 아래와 같습니다. 통영의 신흥보물 강구안의 동쪽벼랑인 동피랑의 벽화마을을 다녀왔다 .txt_line { width:70px; padding:0 5px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } Block레벨 테그에서만 적용됨. overflow:hidden : 넓이가 70px를 넒어서는 내용에 대해서는..
