Publish/CSS9 IR(Image Replacement) 기법 & IS(Image Sprite) 기법 IR (Image Replacement) 기법 "의미가 포함되어 있는 이미지"를 배경으로 처리하고 전경에 상응하는 텍스트를 넣는 방법. "접근성을 떨어트리지 않고" 검색엔진으로부터 높은 가중치를 받을 수 있다. 의미가 포함된 이미지는 전경으로 처리한다. IS (Image Sprite) 기법 조각난 이미지 파일들을 하나의 파일로 병합 후 배경으로 처리해서 웹 문서 전송 속도를 높이는 기법 의미가 있는 이미지는 전경에 상응하는 텍스트를 포함시켜서 접근성을 확보해야 하기 때문에 IR(Image Replacement)기법을 함께 사용해야 함. *좋아요와 댓글은 힘이 됩니다. 2021. 6. 30. 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. .svg를 웹폰트화 하기 벡터이미지인 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.. 2021. 6. 30. IE 브라우저에서 table-cell 에 position:relative 를 쓸 경우. 오랜만에 포스팅하는 중. 이번 포스팅의 정리는 퍼블리싱 작업 중 자주 나오는 회원가입(정보입력) 페이지와 같은 경우에 해당하는 내용이다. 보통 정보입력 부분에 필수 입력하는 부분을 *와 같은 표시로 나타내주는데, 이 경우 * 표시가 텍스트 뒤에 붙는다면 크게 상관이 없겠지만, 앞에 position:absolute를 써야하는 경우가 발생한다. 그런데 이때, th와 같은 table-cell 에 position:relative를 주게되면 크롬에선 정상적으로 표현되나, ie에서 table-cell이 가지고 있는 border값이 뭍히는 경우가 발생한다. (position값을 제거하면 다시 나타난다) 이럴 경우는 th>div 를 둬서 div부분에 position:relative값을 주거나, 디자인의 변화를 주는 것.. 2021. 6. 30. 이전 1 다음
