허도경, limewhale

특정 데이터를 받아서 그 값을 가공하거나 값을 출력할 때 가장 먼저 해야 하는 것은 무엇일까요? 정답은? (두구두구두구 : 자체 효과음.. 긴장감 전혀 없음 주의) 제목에도 있듯이 해당값에 포함된 공백을 제거해주는 일입니다. 우리가 전문통신이나 이미 노출된 값을 자신이 필요한 위치 값만 잘라서 재 가공하여 화면에 보여주려고 해도 값에 공백이 포함되어 있으면 우리가 전달받게 되는 값에는 우리가 원치 않았던 공백 값이 포함되기 때문에 자신이 원하는 정확한 값을 얻을 수 없습니다. 그래서 반드시 문자열을 자를 때는 공백문자를 제거해 줘야 합니다. 공백 문자를 제거하는 방법에는 2가지 방법이 존재합니다. 1.javaScript 정규식 javaScript는 replace를 이용하여 모든 공백을 제거해 줍니다. c..

우리는 CSS의 속성을 이용하여 화면에 특정 영역을 보이지 않게 처리할 때 display:none과 visibility:hidden 속성을 사용하게 됩니다. 두 속성 모두 화면에 정의하면 결과는 똑같이 화면에서 콘텐츠가 사라지게 되지만 이 둘의 속성을 사용하는 목적은 명확하게 다릅니다. 지금부터 이 둘의 차이점을 같이 알아보도록 해요. 1. 영역의 인식 display:none과 visibility:hidden의 속성에서 가장 큰 차이점은 바로 영역의 인식입니다. 두 속성 모두 화면상에서 콘텐츠 영역을 동일하게 숨기는 역할을 하지만 그 둘에는 엄청난 차이가 있습니다. display:none 속성을 이용하면 해당 콘텐츠가 안 보이게 되면서 해당 콘테츠가 가지고 있던 있던 영역 또한 사라지게 됩니다. 하지만 ..

웹이나 이미지의 IR(image replacement) 기법을 사용할 때 일반적으로 CSS의 text-indent 속성을 이용하여 텍스트가 보이지 않게 처리를 하게 되는데 아마 많은 분들이 가장 많이 사용하는 방법이 text-indent:-9999px값을 넣어서 사용하는 방법일거라 생각합니다. 이 방법은 정말 단순하고 너무나 쉽기 때문에 많은 인기가 있었습니다. 그러나 이 방법은 편리성을 가지고 있음에도 불구하고 단점이 있었습니다. 해당 속성을 이용해서 텍스트를 박스 영역 밖으로 보내게 되면 사용자의 눈에는 보이지 않지만 CSS에 지정한 값만큼 브라우저는 화면을 랜더링해야 하기 때문에 성능의 저하가 발생합니다. (우리 눈에는 보이지 않지만 브라우저는 계속해서 열심히 일하고 있습니다. 제발 살려줘....)..

웹 페이지 작업을 하고 브라우저 크로스 브라우징을 할 때 Safari 브라우저에서 한글이나 한자가 깨지는 경우가 종종 발생합니다. (일반 윈도우 PC에서 사파리(Safari) 브라우저를 다운받아서 설치한 경우에는 해당 현상이 안 나타나지만 Mac PC에 설치된 사파리(Safari) 브라우저 볼 때 폰트가 깨지는 현상이 발생합니다.) 이런 이유는 일반적으로 크게 2가지 이유 중 하나입니다. 1. 언어셋 가장 많은 이유인데 브라우저 창에서 보기(view) - 인코딩 (Default Encoding) 부분을 UTF-8, 한글(ISO), window 중 선택하면 대부분 해결됩니다. 폰트가 깨지는 현상의 대부분은 인코딩이 충돌하기 때문에 발생합니다. 2. 기본 언어의 한자 지원 여부 한글이 아니라 한자가 깨지는 ..

웹 접근성을 준수하기 위해 img의 alt값이 태그로 구성하여 처리해야 하는 경우(현역 표)나 ir 기법을 사용할경우 화면상에 내용은 존재하여야 하지만 일반 사용자의 시각에는 보이지 않게 처리해야 하는 경우가 왕왕 있습니다. 이럴때 특정 클래스를 만들어서 처리하는데 웹에서 사용할 때는 caption, legend 에도 동일한 속성을 주어서 처리 하는 경우가 많습니다. 일반적으로 가장 많이 사용하는 방법이 position:absolute 속성을 추가하여 화면 밖으로 안 보이게 처리하는 방법을 사용하는데 이 방법은 모바일에서 caption에 적용하면 colgroup의 width값을 제대로 인식하지 못하는 버그가 발생하게 됩니다. 일반적인 hidden 처리 CSS .hidden { position:absolu..

대부분 직장을 다니는 직장인들이라면 반드시 IT 직군이 아니더라도 혼자서 업무를 진행하는 경우보다는 일반적으로는 타 부서와의 협업을 통해 회사에서 목표하는 방향성에 맞게 프로젝트를 정하고 진행하면서 최고의 결과를 도출해야 하는 경우가 더 많다고 생각합니다. 문제는 타 부서와 협업을 하다 보면 각 파트(직군)에 대한 이익이나 상호관계에 따라서 같은 목표임에도 불구하고 의견이 충돌하는 경우가 발생하게 되는데 이때 원하든 원치 않았든 한쪽의 파트에서는 원활한 프로젝트의 진행을 위해서 손해를 감수하고 업무를 진행해야 하는 경우가 발생하게 됩니다. 이때 상대방을 배려하지 않는 몇몇의 사람들로 인해 업무적 스트레스 보다 더 힘들게 스트레스를 받아들이는 경우도 발생합니다. 그렇기에 우리는 프로젝트를 진행할 때 서로를..

HTML과 CSS를 사용하여 마크업을 하게 되면 가장 기본적으로 많이 듣게 되는 단어가 웹 표준입니다. 그리고 그에 파생되어서 웹 접근서이라는 단어도 같이 접하게 되는데 아마 '웹 표준', '웹 접근성'이라는 단어를 처음 접하시는 분들도 계실수도 있고 두 단어가 같은 의미를 가진다고 생각할 수도 있습니다. 비슷하지만 서로 의미하는게 다른 두 단어를 오늘 이해해보려고 합니다. 📒 웹 표준이란? 웹 표준이란, ‘웹에서 표준적으로 사용되는 기술이나 규칙의 총칭으로 다양한 접속 환경을 가진 인터넷 사용자들이 정보에 소외되지 않고, 동등하게 정보를 이용할 수 있도록 하는 방법이라고 정의합니다. 좀 더 쉽게 정리하면 웹 표준은 브라우저의 종류나 버전에 관계 없이 서로 호환이 가능하도록 제시된 표준으로 어느 한쪽에 ..

웹에서도 구현되기는 하지만 빈도수로 볼 때 아무래도 웹에 비해서 화면이 작은 모바일에서 더 많이 구현됩니다. 이제부터 알아두면 유용하게 사용할 수 있는 가로 스크롤 메뉴에 대해서 알아보려고 합니다. 일반적으로 가로 스크롤은 사용자에게 보여 줘야 하는 메뉴는 많고 화면이나 GUI의 변화는 없이 쉽게 메뉴를 변경하고 싶은 기획 의도가 반영되는 경우 사용되게 됩니다. 아래 화면은 우리가 자구 사용하는 네이버 쇼핑 카테고리의 화면인데요. 쇼핑을 자주 사용하는 분들은 해당 화면을 자주 접하고 친숙할 거라 생각합니다. 아래 이미지에서 빨간색 박스 영역이 가로 스크롤 메뉴입니다. 궁금하신 분들은 지금 네이버 쇼핑 화면에서 직접 가로 스크롤이 무엇인지 확인하는 것도 괜찮을 거 같아요. 그럼 우리가 가로 스크롤 메뉴를 ..

인지 장애인분이나 몸이 불편하신 신체 약자분들도 웹 환경을 동등하게 사용하기 위해 웹 접근성 지침 항목이 만들어져 있습니다. 그 중 스킵 내비게이션(Skip Navigation)은 접근성에서 키보드 사용자를 위해 필요한 요소로 키보드만 사용하여 하단 메뉴나 다른 페이지 메뉴로 이동시 지속적으로 탭키로 이동하여야 하는 번거로움을 덜어줄 수 있게 하기 위해 만들어진 구조입니다. 쉽게 이야기하면 사용자가 원하는 대 메뉴로 바로 이동할 수 있는 메뉴 바로가기라고 생각하시면 이해하기가 조금 더 쉬울 거 같아요. 그렇기 때문에 탭키로 포커스 진입시 가장 먼저 스킵 메뉴로 진입해야 하기 때문에 마크업 시 DOM 구조의 가장 최상단에 위치하여야 합니다. 예제로 만든 스킵 네비게이션은 탭으로 포커스가 스킵 내비게이션에 ..

마크업을 하고 UI 개발을 하다 보면 우리는 매번 너무나 익숙하게 습관처럼 사용하는 코드를 사용합니다. 태그도 각각의 태그가 가지고 있는 의미에 맞게 사용하고 보다 좋은 코드는 무엇일까 고민하면서 작업한다면 분명 우리는 어제보다 조금 더 나아진 코드를 마주하게 될 거예요. 평소에 무심코 사용하는 HTML과 CSS의 숨겨졌던 새로운 모습을 정리해보겠습니다. 1. dl 태그는 반드시 와 의 구조로 쌍을 이뤄서만 사용해야 하는 것은 아닙니다. dl (definition list : 정의 목록) 요소 - 블록 레벨 요소로 dt, dd 요소 이외의 요소를 포함할 수 없으며 용어를 설명하는 목록입니다. dt (definition term : 정의 용어) 요소 - 블록 레벨 요소로 용어의 제목을 나타냅니다. dd (..