허도경, limewhale

Input 요소나 Textarea에 가이드 텍스트를 제공할 때 아주 손쉽게 사용할 수 있는 게 html5 속성 중 placeholder속성입니다. 아주 예전에는 크로스 브라우징을 위해 스크립트를 이용하여 구현을 많이 했지만 요즘은 placeholder속성을 기본적으로 사용하는것 같습니다. 다만 이렇게 편리한 placeholder기능을 우리가 CSS로 수정하고 싶을 때 CSS에서 요소를 바로 수정해 보면 수정이 되지 않는 걸 알 수 있습니다. placeholder 속성의 컬러값을 바꾸고 싶으면 웹킷 전용 속성을 CSS에 사용해 주어야 하며 placeholder 속성은 IE 9 이상부터 정상적으로 지원합니다. /* 웹킷 전용 속성 */ input::-moz-input-placeholder {} input::..

우리는 마크업을 하면서 가장 먼저 CSS의 박스 모델(Box Model) 개념을 배우게 됩니다. 이 개념을 바탕으로 다양한 GUI를 구현하게 되는데요. 기본적으로 박스 모델에서 요소에 할당 한 width 및 height 값은 사용자가 지정한 요소의 콘텐츠 상자에만 적용됩니다. 요소에 테두리(border) 또는 패딩(padding)이 있는 경우에는 width 및 height에 해당 값이 추가되어 자신이 지정한 값보다 더 큰 값이 화면에 렌더링 되는 결과를 얻게 됩니다. 하지만 우리는 box-sizing속성을 활용하면 테두리(border) 또는 패딩(padding) 요소가 추가되더라도 처음에 사용자가 의도한 값을 얻을 수 있습니다. (와우!) 그럼 지금부터 조금 더 심도 있게 box-sizing에 대해 알아..

이제는 많은 분들이 아시지만 다시 예전의 내용을 정리하게 되면서 내용을 정리해 봅니다. 요즘은 동영상이나 youtube 영상을 웹에 바로 보여주는 경우가 많습니다. 이럴 때 가로 사이즈가 고정된 사이즈면 상관없지만 다양한 사이즈의 모바일이나 반응형 웹 화면으로 화면을 구성한다면 가로 화면 폭 사이즈에 맞게 해당 세로 값 화면 값을 유동적으로 변경될 수 있도록 해 주어야 화면이 틀어지거나 비율이 이상하게 나오지 않고 정상적인 화면이 유지됩니다. 요즘 영상은 16:9 화면 비율이 일반적이기 때문에 해당 화면을 비례식으로 놓고 계산하면 대략 56.26% 라는 값이 나오게 됩니다. 비율 값은 어떤 값으로 적용하냐에 따라서 조금은 차이가 있을 수 있습니다. 참고 : 비례식 공식 기본값(100) : 사용할 영상(박..

우리는 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..

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

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

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