archuive

작업 하는데 갑자기 VScode 상단 탭에 열려있는 파일이 탭에 전체로 보여지는게 아니라 현재 활성화된 문서 하나만 보여서 당황한 적이 있다. 이 경우 단축키로 쉽게 해결할 수 있다! cmd + ctrl + w 아마도 전체 종료 cmd + ctrl + q 를 누르려다가 실수로 발생하는 듯 하다.

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

디자인시 스크린 사이즈에 대한 규격과 규칙을 정의한다. 이는 디자인할 때 그리드 시스템 컬럼 갯수나 거터 사이즈 등을 설계하는 단초가 되며, 특히 각 디바이스별로 레이아웃이 달라질 경우 Break Point를 설정하는데 중요한 역할을 한다. 디자인하기 전 프로젝트 초기에 정의해두는것이 좋다. 나의 경우 모바일 (IOS, Android)은 고려할 필요가 없어서 반응형 웹 구현을 고려해 정의했다. Desktop: 1440 x 1024 Tablet: 768 x 1024 Mobile: 320 x 1024하지만, 웹의 경우 처음부터 1920 기준으로 작업하면 스케치나 포토샵에서 보는것과 실제 퍼블리싱된 결과물 사이에 이질감이 들 수 있다. 브라우저의 타이틀바, 주소 및 검색바, 윈도우의 시작 표시줄, 스크롤바 등..

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로 값을 바꿔주면 원하..

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 선언을 사용하여 플렉스 아이템을 렌더링 하지만 멀티 라인 플렉스 컨테이너의 한 줄에 있어야 하는 항목 수를 계산할 때는 이..