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 배경..

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 선택자 순서를 바꿔 보니 ..

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?

caniuse.com 에서 Flex를 검색하면 아래와 같은 내용을 확인할 수 있다. 거의 대부분의 브라우저에서 지원 가능하고 심지어 IE도 10과 11에서 부분 지원 되고 있다! 그치만... Notes 탭의 4번 항목을 보면 아래와 같은 말이 써있다. Partial support is due to large amount of bugs present (see known issues) 엄청난 양의 버그가 있어서 부분적으로 지원한다는 멘트. Known issues탭을 확인 해보면 이미 알려진 이슈들을 확인할 수 있다. Safari 10 이하 버전에서는 min/max width/height 선언을 사용하여 플렉스 아이템을 렌더링 하지만 멀티 라인 플렉스 컨테이너의 한 줄에 있어야 하는 항목 수를 계산할 때는 이..

IE 크로스브라우징시 디자인이 깨지는 현상의 많은 경우CSS의 initial 값을 사용했을 때 발생했다. initial은 부모요소가 주는 모든 상속값을 건너뛰어 CSS 초기값을 되돌리는데 사용한다. 하지만! Internet Explorer은 이 값을 지원하지 않는다. 이를 해결하기 위해 initial대신 속성의 초기값이나, 초기화 혹은 없애는 값을 사용하는것을 권장하며 자주 사용하는 속성의 초기값은 아래와 같다. position: static overflow: visible line-height: normal color: transparent border: none 혹은 0 width, height 등 수치값 은 auto 초기 값이 없는 경우, 가장 가까운 부모로부터 상속받을 수 있도록 inherit 를..

word-break /* 키워드 값 */ word-break: normal; word-break: break-all; word-break: keep-all; word-break: break-word; /* 사용 안함 */ /* 전역 값 */ word-break: inherit; word-break: initial; word-break: unset; normal 기본 줄 바꿈 규칙을 사용합니다. break-all 오버플로를 방지하기 위해서는 어떠한 두 문자 사이에서도 줄 바꿈이 발생할 수 있습니다. (한중일 텍스트 제외) keep-all 한중일(CJK) 텍스트에서는 줄을 바꿀 때 단어를 끊지 않습니다. 비 CJK 텍스트에서는normal과 동일합니다. break-word👎 실제 overflow-wrap속성에..