웹퍼블리셔13 IOS 에서의 스크롤링 CSS 아이폰 사파리의 경우, webkit 엔진을 쓰기 때문에 스크롤시 webkit css를 하나 더 추가 해주어야 한다. -webkit-overflow-scrolling:touch; 이렇게 해야 스크롤이 자연스럽게 내려갈 수 있다. 아니면 모바일에서 뚝뚝 끊어진다. *좋아요와 댓글은 힘이 됩니다. 2021. 6. 30. 스크롤시 background 고정 스크롤시 백그라운드의 위치를 고정하고자 할때, background-attachment : fixed /* 기본값은 inherit 이다.*/ *좋아요와 댓글은 힘이 됩니다. 2021. 6. 30. 안드로이드 모바일 자동 조절 폰트 ios와 안드로이드 동시 작업 중, ios에서는 정상적으로 폰트가 출력되는데 안드로이드에서 자동조절되서 폰트가 크게 나오는 경우. * {-webkit-text-size-adjust:none;} *update 저 속성을 썼는데도 안먹어서 해당 부분에 고정 height를 줬더니 제대로 잡힌다. *댓글과 좋아요는 힘이 됩니다. 2021. 6. 30. 요새 많이 쓰이는 단위 정리 (vh/vw/calc) px, em, rem을 넘어서서 요새 많이 쓰이는 단위를 정리해보겠습니다. 사용함에 있어서 굉장히 편리하고! 게다가 IE9부터 지원을 하기 때문에 앞으로의 쓰임이 더욱 기대되는 단위입니다. 1. vw, vh width:100vw; height:100vh; width 에는 vw를 height에는 vh 를 사용하는데. 이부분은 반응형웹과 같은 곳에서 쓰일수록 더욱 편리함이 높아집니다. 이 단위는 요소의 뷰포트값의 100분의 1을 하는 값을 뜻합니다. 즉 값에 해당하는 숫자는 1부터 100이 됩니다. (1vh - 100vh) 가령 브라우저의 전체 넓이가 1000px이 된다면 1vh 는 10px이 되는 것을 뜻합니다. 위의 단위를 쓴 저의 구체적 사례로는, 브라우저의 전체화면에 풀 이미지를 넣어야하는 경우였.. 2021. 6. 30. css만으로 탭 구성 하기 제목 그대로, css만으로 탭 구성하기에 대해서 포스팅을 해봅니다. 아래와 같은 형태로 만들 예정인데 이는 css3의 선택자로 하여금 간단하게 css만으로 만들 수가 있습니다. 하지만 ie 8,7 과 같은 하위 버전의 브라우저에서는 css3가 안된다는 것을 알고 계시기 바랍니다. 방법은 두가지로 나뉠 수 있습니다. 기본적으로 아래의 html을 가지고 작업을 하도록 하겠습니다. 제목 제목 제목 제목 1. flex를 이용한 탭 구성 첫 번째로는 flex를 이용한 탭 구성입니다. .tab {display:-ms-flexbox; display:flex;} .tab li {-ms-flex:1; -webkit-flex:1; -moz-flex:1;} .tab li+li {margin-left:10px} 해당 css를.. 2021. 6. 30. 멀티라인 말줄임과 폴백(fallback) CSS css상으로 만드는 말줄임표는 한줄까진 다양한 브라우저에서 사용가능하나, 멀티라인, 즉 두줄 이상의 글에서는 사용할 수가 없다. 그러나, webkit 엔진을 쓰는 브라우저(크롬, 모바일 사파리 등)는 멀티라인 말줄임이 가능하다. display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; text-overflow:ellipsis; // 2줄 이상이 될때 말줄임표 등장. 여기서 문제는 모바일에선 큰 문제가 없을 듯 하나, pc 크로스브라우징의 경우 어찌해야하나 이다. 그럴경우 상호간 합의(기획과 퍼블..?)에 의해 2줄이상에서 보여지지 않는정도로 합의를 본다면 아래 폴백 css로 대체할 수 있다. height.. 2021. 6. 30. 실전에 쓰이는 WAI-ARIA WAI-ARIA에 대해 정리하기에 앞서 중요한 것은, ARIA를 통해 웹접근성을 높일 수 있으나 컨텐츠에 맞는 의미의 엘리먼트를 더욱 중점으로 쓰는 것이 중요하다는 것이다. 웹에서 ARIA가 접근성을 더욱 높여줄 수는 있으나, 가장 기본은 시멘틱한 마크업이 더욱 중요하다는 것이다. 적재적소의 엘리먼트 사용에 대해 더욱 고민해보자. * 이 포스팅은 알아가는 것들을 추후에 꾸준히 업데이트 할 예정입니다. 보시다가 모자른 설명이나, 해석이 있다면 댓글 부탁드립니다. 1. font Awesome(폰트 아이콘)의 경우 //안에 내용은 읽지 않고, 스크린리더에서만 읽을 수 있는 아이콘 설명이 들어간다. (title / aria-hidden 속성 중요) 2. 컴포넌트를 숨긴 상태라면 (탭의 컨텐츠) aria\-hid.. 2021. 6. 29. 웹접근성 검수 시 주의 (웹접근성 마크를 위한) 1. skipnavigation 다수의 건너뛰기를 제공할 경우, 핵심 콘텐츠인 본문으로 이동하기를 우선으로 제공. Content / GNB / Footer 순으로 스킵네비게이션을 구현한다. GNB의 경우 IE11에서 요소 등에 접근하지 못하는 버그가 있으므로, ul이전에 div와 id,크기값을 지정하여 주메뉴 영역으로 이동할 수있게 한다. 2. 저시력자를 위해 해당 페이지의 내용을 쉽게 파악할 수 있도록 순서를 아래와 같이한다. 작은순에서 큰순으로 작성. ex) faq < 고객라운지 < JEONst Home 3. 의미없는 이미지에는 alt를 "" 비게 한다. 4. label (레이블) 레이블의 내용을 형태로 제공할 경우, 일부 스크린리더는 인지못하는 경우 발생하여 해당 input에 title로 주거나, .. 2021. 6. 29. 단계를 나타내는 UI - 프로세스 이미지화 디자인상으로는 컬러나 텍스트로 변화를 줘서, 해당 단계임을 나타내보일 수 있지만, 보이지 않을 경우, 현재 단계가 어디인지를 나타내주어야한다. 그런경우 아래와 같이 써본다. ol > li > span.hidden 위와 같은 구조로 봤을 때, hidden 처리 된 span 엘리먼트 안에 "현재 페이지" 또는 "현재 단계"의 텍스트를 넣어주면 보이지 않는 경우에도 현재 단계가 어디인지 나타내 줄 수 있다. 응용적으로 hidden 처리 시킨 span 을 그림에서와 같이 아래 화살표 모양의 디자인을 넣어줘서 디자인도 만족시키고, 추가적인 태그 추가 등을 막을 수 있다. HTML5 에 WAI-ARIA 속성이 적용되면서 해당 UI에 WAI-ARIA 를 추가한 구조를 아래처럼 나타낼 수 있다. 1단계 2단계 3단계 .. 2021. 6. 29. 이전 1 2 다음
