archuive

웹에 아이콘을 넣는 방식은 다양하다. 이미지(png, gif등)로 불러오기, SVG를 불러오기 그리고 웹폰트로 만들어 추가할 수도 있다. Fontello는 미리 제공하는 아이콘 중 원하는 아이콘을 선택해 경량화된 웹폰트로 만들수 있으며 특히 SVG 파일을 업로드해 원하는 아이콘을 추가할 수 있다. 아이콘을 폰트로 넣게되면 CSS의 color 속성을 사용해 코드의 컬러를 변경할 수 있으므로 이미지 리소스보다 유지보수에 효율적이다. 사용법 Fontello 사이트에서 원하는 아이콘을 선택하거나 Drag&Drop으로 폰트를 등록하고 Download webfont 버튼으로 다운받는다 HTML 문서에 다운받은 fontello.css파일을 불러온다 Demo 페이지에 있는 아이콘의 이름을 참고하여 형태로 클래스 명을 ..

CSS를 작업하다보면 하나의 클래스에 여러개 속성을 선언하는 경우가 자주 발생한다. 속성 작성에 규칙이 있다면 추후 코드를 들여다볼 때 조금 더 내용 파악이 쉽지 않을까? 하는 마음에 구글링을 해보니, 역시나 CSS 선언 순서와 관련된 내용이 방대하고도 자세하게 정리되어 있었다. NHN 코딩 컨벤션 속성을 선언할 때는 그 쓰임새가 레이아웃과 관련이 큰 것에서 시작하여 레이아웃과 무관한 것 순서로 선언한다. 관련 속성은 대표되는 속성 다음으로 선언하며, 아래에 표기된 순서대로 선언한다. 레이아웃 display visibility overflow float clear position top right bottom left zindex Box width height margin padding border 배경..

DEPRECATION WARNING: Using / for division is deprecated and will be removed in Dart Sass 2.0.0. 원인 Sass는 현재 일부 맥락에서는 / 기호를 나누기 연산으로 간주하고, 다른 맥락에서는 구분 기호로 간주하고 있습니다. 즉 Sass tkdydwksms / 의 의미를 구분하기가 어렵고 / 를 구분 기호로 사용하는 새로운 CSS 기능을 사용하기 어렵게 합니다. 호환성: Dart Sass partial Sass는 복잡한 휴리스틱스를 사용해 / 를 분할로 처리할지 연산자로 처리해야할지 파악합니다. 그래도 구분 기호로 Sass 내에서 검사하기 어려운 따옴표가 없는 문자열을 생성합니다. CSS Grid와 같은 CSS 기능과 새로운 rgb()..

HTML5의 progress 태그로 구현한 프로그레스 바의 디자인을 수정한다. HTML: 여기에서 max는 progress 요소의 작업 진행에 필요한 전체 작업량이다. 반드시 0보다 크고 유효한 부동소수점 숫자여야한다. value는 프로그레스바의 작업 진행 정도이다. 부동소수점 숫자여야한다. 기본 HTML5로 구현된 의 디자인을 수정하고싶다면 웹킷 의사 요소 선택자로 선언해줘야한다. 하지만 MDN에서는 이 기능이 비표준이기 때문에 모든 사용자에 적용되지 않을 수 있음을 강조한다. ::-webkit-progress-bar 의사 선택자는 progress 요소의 전체 bar를 나타낸다. ::-webkit-progress-value 의사 선택자는 value를 나타낸다. progress { -webkit-appe..

CSS로 만든 셀렉트박스에서 발생하는 주요 이슈로 인해 브라우저 기본인 와 을 사용해 드롭다운 되는 셀렉트 박스를 구현하고자 한다. 기본 구조 option 1 option 2 option 3 브라우저마다 각기 다른 네이티브 디자인을 초기화한다. select { -webkit-appearance: none; -moz-appearance: none; appearance: none; } /* IE에서 화살표 제거 */ select::-ms-expand { display: none; } Select의 기본 디자인을 변형하고, 화살표를 제거한 후 원하는 아이콘 혹은 CSS 쉐입으로 대체하는게 가능하지만, 의 디자인 커스텀에는 한계가 있다. 이는 이 CSS의 범위를 벗어나는 객원 요소 이기 때문이다. 객원 요소는 ..

웹 작업 중 아래와 같은 에러 메시지를 발견해서 급하게 정리해본다. CSS3111: @font-face에 알 수 없는 오류가 발생했습니다.이 에러 문구의 원인은 아직 명확히 찾아내지 못했다. CSS로 웹폰트를 사용하기 위해 선언해야 할 @font-face의 유형들 CSS에 작성하는 순서대로 아래와 같다. eot woff2 woff ttf svg @font-face { font-family: 'FontName'; src: url('webfont.eot'); /* IE9+ Compat Modes */ src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('we..

문제 상황 기존에 잘 보이던 팝업 메뉴의 흰색 화살표가 회색 화살표로 변경됨 (::before, ::after 가상 요소 CSS 로 스타일링 된 화살표) 팝업 메뉴 리스트에 의문의 검은 사각형이 생기는 문제 시도한 것 들 ::before 에 들어간 클래스 때문에 검은 사각형이 발생하는 것 같아 해당 요소를 clip 처리 하거나 display: none; 처리함. 사각형은 사라지지만 화살표가 회색으로 보이는 문제는 해결되지 않았다. 결과물 스타일에서 관련 구문 긁어 보니, CSS에는 .popup::before:lang(en){border-color: #fff trans) 와 같이 스타일이 선언되어 있지만 요소에 제대로 선언되지 않고 있었다. 😨 lang(en) 과 ::before 선택자 순서를 바꿔 보니 ..

CSS 프로젝트를 설계하는 것은 아마도 프로젝트에서 해야 할 가장 어려운 일 중 하나 일 것입니다. 일관되고 의미있는 아키텍처를 유지하는 것은 더욱 어렵습니다. 다행히도 CSS 전처리기를 사용하는 주된 이점 중 하나는 @import CSS 지시문처럼 성능에 영향을 미치지 않으면 서 여러 파일에 코드베이스를 분할 할 수 있다는 것입니다. Sass가 @import 지시어를 과부하 한 덕분에 개발시 필요한만큼 많은 파일을 사용하는 것이 안전하고 (실제로 권장 됨) 모든 제품을 제작할 때 단일 스타일 시트로 컴파일됩니다. 그뿐 아니라 소규모 프로젝트에서도 폴더가 필요하다고 강조합니다. 가정에서는 모든 용지를 같은 상자에 떨어 뜨리지 않습니다. 당신은 폴더를 사용합니다; 하나는 집 / 아파트, 하나는 은행, 하나..

IE에서 input을 사용할 때 주의해야할 것이 있다. 바로 원치 않는 input field 초기화 버튼이 자동으로 생성된다는 점이다. 이를 해결하기 위해 아래와 같은 스타일을 추가해준다. input[type=text]::-ms-clear { display: none; }CSS reset 등에 미리 추가해두면 유용하게 처리할 수 있을듯! AS-IS input을 활성화하면 갑자기 input이 가로로 넓어지며 디자인에 맞지않는 엑스 버튼이 튀어나온다 TO-BE 위 스타일 적용 후, 깔끔해진 input 태그 😌 📖 참고 자료 Stack overflow: Remove IE10's “clear field” X button on certain inputs?

border-collapse CSS 속성은 표 테두리(border)가 분리(separated) 또는 겹침 혹은 상쇄(collapsed)될 지를 결정한다. 분리 될 경우, 인접한 셀은 각각 자신의 고유(distinct) 테두리가 있다. 상쇄 모델에서는, 인접한 표 셀은 테두리를 공유한다. border-spacing 속성 없이도 각 셀에 스타일링한 테두리가 제대로 출력될 수 있어서 매우 소중한 속성이지만, 이 속성은 역시 IE에서는 골칫덩어리였다. 아래 이미지와 같이 border-spacing: collapse 를 선언하는 순간 IE11 버전에서 테두리가 간헐적으로 사라지는 것을 발견했다. 이 경우 border-spacing 속성의 기본 값인 border-spacing: separate로 값을 바꿔주면 원하..