본문 바로가기

전체보기

내부망 PC(오프라인)에서 최신 버전 크롬 다운로드 및 설치하기 크롬 기본 인스톨러는 인터넷에 연결되어 있을 때에만 정상설치가 됩니다. 내부망 PC와 같이 오프라인 환경에서 크롬 설치가 필요한 경우에는 크롬에서 별도로 제공하는 스탠드얼론(Stand Alone) 버전의 인스톨러를 운영체제에 맞게 선택하여 설치파일을 다운받은 후, 해당 파일을 대상 PC로 옮겨 설치하시면 됩니다. 크롬 오프라인 버전 설치 파일 사이트 오프라인 설치를 위해서는 스탠드얼론 다운로드 페이지 접속이 필요합니다. 기존 다운로드 사이트와 똑같아 보이지만, 다운로드 받을 때에 다른 파일이 받아집니다. 또한 최신버전의 크롬으로 다운로드가 진행됩니다. 해당 설치파일 다운로드 후 설치희망 PC에 설치파일을 옮겨 설치를 진행하시면 됩니다. 크롬 스탠드얼론 설치파일: https://www.google.com/..
[CSS] ::placeholder로 텍스트인풋 플레이스홀더 폰트 크기 & 색 바꾸기 텍스트인풋의 폰트 스타일을 변경하려면 이전에는 각 vendor별 prefix를 활용한 속성을 별도로 정의해 주어야 했습니다. CSS의 새로운 기능으로 ::placeholder라는 슈도선택자(pseudo selector)가 존재하며, 해당 선택자를 활용해 쉽게 텍스트필드의 스타일을 변경할 수 있습니다. 해당 선택자는 IE에서는 사용 불가하며, 대부분의 모던 브라우저에서 정상적을로 활용할 수 있습니다. 다른 브라우저와의 호환성을 추가 확보하기 위해서는 autoprefixer 등의 CSS 처리기 또는 라이브러리를 활용하면 좋을 것으로 보입니다. input::placeholder { color: red; font-size: 1.2em; font-style: italic; } 참고자료 MDN 문서 (::place..
[CSS] IE 대응을 위해 flex-basis에 width & max-width 함께 넣기 (2022년 03월 16일 수정) IE 대응 관련 내용 추가 IE11(IE: Internet Explorer, 인터넷 익스플로러)은 여전히 국내 많은 조직에서 호환성을 맞춰야 하는 브라우저입니다. 다행히도 flexbox는 부분적이지만 IE11에서 사용이 가능합니다. 일부 기능들이 사용이 불가능하거나, 깨져서 표현되지만 일부 기능의 경우 다른 CSS 속성을 함께 기재함으로써 깨지는 현상을 해소할 수도 있습니다. 이 포스트에서는 flex-basis를 사용할 때 IE11에서도 정상적으로 표현이 가능한 방법에 대해 알아보고자 합니다. 1. flex-basis: 0는 width: 100%(채울 때) 또는 width: auto(랩핑할 때)를 함께 삽입 flex-grow를 활용하여 flex-basis를 0으로 할당함..
[CSS] flex-basis로 줄바꿈 방지 flex 레이아웃 만들기 [2022-03-08 내용추가] flex의 1개 값만 입력하는 단축 형태로 속성을 부여하는 경우 flex-basis가 자동으로 0으로 할당되기 때문에 별도 속성 추가정의 없이 줄바꿈 현상을 방지할 수 있습니다. /* One value, unitless number: flex-grow flex-basis is then equal to 0. */ flex: 2; 문제상황 row 방향의 flex 박스를 생성한 상황에서, wrap을 걸어 놓고 flex 요소의 크기가 고정되어 있을 때 다른 flex 요소의 콘텐츠 길이가 길어지면 줄바꿈이 자동으로 생성됩니다. wrap을 걸지 않으면 줄바꿈이 생기지 않겠지만 그런 경우면 고정시켜 놨던 flex 요소의 크기가 변합니다. 크기가 고정된 flex 요소의 크기를 유지하되 ..
피그마(Figma)에서 글씨 기울기, 이탤릭체(italic) 설정하는 법 피그마에서는 강제(faux) 이탤릭체 설정을 할 수 없음 포토샵이나 CSS에서 강제적으로 폰트를 기울이는 faux 방식의 bold, italic체 설정은 피그마에서 할 수 없습니다. 폰트에 포함되어 있는 것이 아니라면 강제 이탤릭체를 주는 것은 폰트를 왜곡해서 사용하는 것과 다름이 없기 때문에, 이탤릭체를 제공하는 폰트에 대해서만 기울기를 주고서 사용하는 것이 권장됩니다. 이탤릭체 폰트가 포함된 폰트를 쓰거난 skew로 개체를 변형 권장되는 방법은 이탤릭체를 제공하는 폰트 패밀리를 함께 사용하는 것입니다. 이탤릭체가 포함된 폰트인 경우 폰트 style이나 서체 종류 선택하는 상황에서 italic을 선택할 수 있습니다. 폰트가 제공되지 않는 상황에서 디자인적인 이유로 폰트에 기울기를 주어야 하는 상황인 경..
피그마(Figma)의 이미지 사이즈(해상도) 삽입/첨부 크기 제한 피그마 첨부 이미지의 크기 제한은 4096 픽셀 피그마는 클라우드 기반으로 구동되는 웹 기반의 프로그램입니다. 모든 작업 내용이 클라우드에 기록되기 때문에 대용량 파일을 첨부하는 것은 클라우드 서버 환경에 큰 부담을 줄 수 있습니다. 그런 이유로 피그마는 첨부 이미지 삽입 시의 이미지 크기를 제한하고 있습니다. 구체적으로 4096 픽셀이 넘어가는 이미지에 대해서는 첨부 시에 자동으로 리사이징 처리를 하여 피그마에 첨부되도록 설정이 되어 있습니다. 대형 이미지를 첨부하려고 하면 피그마가 자동으로 토스트팝업을 통한 안내를 주면서 이미지를 리사이징합니다. 이러한 제약에서 벗어나기 위해서는 대형 이미지를 짤라서 넣거나, 이미지 품질을 좀 포기하더라도 해상도를 줄여서 삽입하는 방법이 있습니다. 이러한 제약사항을 ..
아이폰(iOS) 가상머신으로 모바일웹 테스트 환경 구축하기 모바일웹 개발의 경우 데스크탑용 브라우저에서 제공하는 반응형 브라우저 확인 기능을 통해서 가장 많이 진행이 되지만, 실제 모바일 기기에서의 실행환경과는 다소 차이가 있습니다. 실제 기기를 구비하여 실행환경을 구축하는 것이 가장 이상적일테지만, 현실적인 제약이 있기에 가상머신을 통한 테스트도 효율적으로 활용할 수 있습니다. 가상머신 모바일웹 테스팅의 이점 : 최대한 유사한 실행환경 확인 + 과거 버전 환경 확인 가상머신을 통한 모바일웹 테스팅 환경을 구축하는 것의 이점은, 최대한 실제 기기 구동환경과 유사한 실행환경을 확인할 수 있다는 점 외에도 과거 OS와 브라우저 버전에 대한 테스트를 진행할 수 있다는 점입니다. 특히 모바일 사파리의 경우 버전에 따라 다양한 버그와 버전 비호환성을 내재하고 있기 때문에..
[CSS] webkit 브라우저 input 텍스트 필드의 색상 변경하기 크롬, 사파리 등에서 텍스트필드의 글자색이 회색으로 나타날 때... 브라우저별로 input 텍스트필드에 대한 에이전트 스타일은 상이합니다. 사파리, 크롬에서 원하는 색상으로 텍스트 색상을 설정하려면 별도의 속성 정의가 필요합니다(특히 #000, #FFF 등의 색으로 변경할 때 조금 회색빛이 도는 이슈를 방지할 필요가 있을 때). 이런 상황은 iOS 및 Safari 또한 스타일 강제성이 다소 높은 편입니다. 특히 Disabled 속성이 부여된 input 요소에 대한 강제성이 강한 편인데, 기본적으로 40%의 투명도를 갖는 회색으로 표현이 됩니다. 이를 수정하기 위해서는 별도 Webkit 브라우저(Safari, Chrome, Edge)용 속성을 사용하고, opaicty를 함께 부여해 주어야 합니다. 하기 코..
❤️ 외주/과외 문의
🖥️ 클라우드 메뉴판 : 디지털팝

티스토리툴바