px, em, rem을 넘어서서 요새 많이 쓰이는 단위를 정리해보겠습니다. 사용함에 있어서 굉장히 편리하고! 게다가 IE9부터 지원을 하기 때문에 앞으로의 쓰임이 더욱 기대되는 단위입니다. 1. vw, vh width:100vw; height:100vh; width 에는 vw를 height에는 vh 를 사용하는데. 이부분은 반응형웹과 같은 곳에서 쓰일수록 더욱 편리함이 높아집니다. 이 단위는 요소의 뷰포트값의 100분의 1을 하는 값을 뜻합니다. 즉 값에 해당하는 숫자는 1부터 100이 됩니다. (1vh - 100vh) 가령 브라우저의 전체 넓이가 1000px이 된다면 1vh 는 10px이 되는 것을 뜻합니다. 위의 단위를 쓴 저의 구체적 사례로는, 브라우저의 전체화면에 풀 이미지를 넣어야하는 경우였..
제목 그대로, 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를..
css상으로 만드는 말줄임표는 한줄까진 다양한 브라우저에서 사용가능하나, 멀티라인, 즉 두줄 이상의 글에서는 사용할 수가 없다. 그러나, webkit 엔진을 쓰는 브라우저(크롬, 모바일 사파리 등)는 멀티라인 말줄임이 가능하다. display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; text-overflow:ellipsis; // 2줄 이상이 될때 말줄임표 등장. 여기서 문제는 모바일에선 큰 문제가 없을 듯 하나, pc 크로스브라우징의 경우 어찌해야하나 이다. 그럴경우 상호간 합의(기획과 퍼블..?)에 의해 2줄이상에서 보여지지 않는정도로 합의를 본다면 아래 폴백 css로 대체할 수 있다. height..
벡터이미지인 SVG 이미지를 반응형이나 모바일에서 많이 쓰이는데 자주 쓰이는 아이콘 이미지를 웹폰트화 하기 위한 방법을 서술한다. 1. 먼저 path가 묶여지지 않은 벡터 이미지를 svg 이미지로 다운을 받는다. path가 묶여진 채로 svg를 다운받으면 오류가 난다. 2. 아래 사이트에서 우측 상단의 IconMoon App 버튼을 클릭한다. https://icomoon.io/ Icon Font & SVG Icon Sets ❍ IcoMoon About IcoMoon is striving to build and provide the best iconography and icon management tool for perfectionists. IcoMoon's icon library features only..
오랜만에 포스팅하는 중. 이번 포스팅의 정리는 퍼블리싱 작업 중 자주 나오는 회원가입(정보입력) 페이지와 같은 경우에 해당하는 내용이다. 보통 정보입력 부분에 필수 입력하는 부분을 *와 같은 표시로 나타내주는데, 이 경우 * 표시가 텍스트 뒤에 붙는다면 크게 상관이 없겠지만, 앞에 position:absolute를 써야하는 경우가 발생한다. 그런데 이때, th와 같은 table-cell 에 position:relative를 주게되면 크롬에선 정상적으로 표현되나, ie에서 table-cell이 가지고 있는 border값이 뭍히는 경우가 발생한다. (position값을 제거하면 다시 나타난다) 이럴 경우는 th>div 를 둬서 div부분에 position:relative값을 주거나, 디자인의 변화를 주는 것..
널리에서 올려준 아코디언 메뉴 사용시 aria 쓰임 정리 페이지 이동이 아닌, 아코디언 헤더부분을 클릭 하면 내용을 보여주는가 안보여주는가이기 때문에 a 태그보단 button 태그를 추천한다. 아래와 같이 작성한다. 1. button을 쓸 경우 각 아코디언의 타이틀부분의 헤더와 내용부분에 id값 부여. aria-expanded 값은 열렸을 경우 true, 닫혔을경우 false 2. a를 쓸 경우 페이지이동이 아닌 버튼으로 인식되기 위해 role 부여. js로 스페이스 키를 통한 컨텐츠영역 확장/축소 가능하게 할 것. 그 외의 공통 정리 부분. 아코디언의 헤더 헤딩태그를 사용 할 것 헤딩태그를 사용 못할 경우 button에 role="heading" aria-level="3"의 속성을 사용. 아코디언의 컨..
- Total
- Today
- Yesterday
- 퍼블리싱
- javascript
- 웹접근성
- props
- 웹퍼블리싱
- vue
- API
- js
- frontend
- Issue
- WAI-ARIA
- 자바스크립트
- 리액트생명주기
- 수영전후기
- youtube
- component
- 환경설정
- 퍼블리셔
- ES5
- vue.js
- Aria
- 포세이돈되기까지
- 이론공부
- 웹퍼블리셔
- css3
- 수영하기전후기
- jeonst
- 커리패턴
- jQuery
- curring
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | |||
5 | 6 | 7 | 8 | 9 | 10 | 11 |
12 | 13 | 14 | 15 | 16 | 17 | 18 |
19 | 20 | 21 | 22 | 23 | 24 | 25 |
26 | 27 | 28 | 29 | 30 | 31 |