본문 바로가기

IT

[CSS] 인터넷익스플로러(IE)에서 셀렉트(Select) 화살표 제거하기 인터넷익스플로러에서 Select를 사용하고 있다면 스타일을 바꾸기 위한 코드를 작성해봤을거다. 기본 화살표는 투박하고 아름답지 못하기 때문에 디자이너의 입맛을 맞춰주기 위해서 셀렉트 우측 화살표 정도는 디자인에 맞춰서 아름답게 꾸며주자! IE에서 Select 화살표가 사라지지 않는다?! 문제 아래와같이 코드를 준다면 뭔가 하나 부족한게 있다. 바로 IE에서 select를 제거하는 방법이다. select{ appearance:none; //기본 -webkit-appearance:none; //크롬 -o-appearance:none; //오페라 -moz-appearance:none; //파이어폭스 } 문제해결 "appearance면 끝나는거 아냐?!" 라고 생각할 수 있지만 IE를 위해서 한가지 코드를 더 .. 더보기
이미지와 영상(iframe)을 HTML과 CSS 반응형으로 비율 유지하여 늘리고 줄이기! 코딩을 하면서 반응형을 원하는 프로젝트가 대다수이다. 반응형이 아니라도 모바일의 경우 다양한 크기의 디바이스가 나와 있기 때문에라도 이번 글에서 소개하는 것처럼 이미지와 동영상 등 오브젝트들을 같은 비율로 줄이는 코드를 넣어주는 것은 반드시 알고 있어야한다. 문제 : 이미지나 유튜브동영상(iframe)이 고정값 또는 가로/세로값이 비율에 맞게 줄거나 늘지 않는다. 해결 : 아래와 같은 방법으로 조절이 가능하다. 보편적으로 많이 사용하는 해상도 - 21:9 - 16:9 - 4:3 너비(width)를 기준으로 정비율을 구하는 방법 높이(height) / 가로(width) x 100 예시) 16 : 9 = 560(가로) : 315(세로) 315 / 560 x 100 = 56.25 필요한 것은 부모와 자식 엘리.. 더보기
모바일에서 textarea, input, a태그를 터치하면 회색 표시가 나온다?!(해결 : webkit-tap-highlight-color) "이거 좀 없애주세요." 위의 주제와 무관한 댓글, 악플,.,.,.,.은 textarea 태그다.(출처 : 네이버뉴스) textarea뿐 아니라 input과 button, a 태그 등 기본적으로 모바일에서 터치를 했을 때 저렇게 하이라이트가 적용된다. 기본 기능으로 표시를 보여야하는데 반해 '앱'의 경우는 저 기본 기능이 거슬리는 경우가 많다. 웹앱 프로젝트를 진행하는데 앱에서 제공하는 위와 같은 아주 '간단한 기능'을 웹앱은 모바일웹이 바탕이 되기 때문에 귀찮아도 일일히 값을 설정을 해줘야한다. 구글에 해당 css를 검색해보면 아래와 같이 일치하는 결과가 나오지 않는다. 작성이 필요한 영역과 하이라이트가 굳이 필요없고 제거를 하고 싶다면 css 한줄을 추가해서 간단히 해결해보자. "CSS 하나만 추가해.. 더보기
플러터(Flutter),안드로이드 스튜디오 Git log(깃로그) 한글 깨질때 설정 하나 해주면 끝!? 폰트를 넣어라 마라?! 그냥 설정 하나면 끝! 플러터 프로젝트를 진행하는데 처음 세팅을 하고 VCS 중 가장 많이 쓰는 git을 연결했다. 로그를 보고 싶어서 하단에 위치한 'git' 패널을 선택하고 'log'를 선택했는데 띠용?! ㅁㅁㅁㅁㅁㅁㅁ 뭐지? 하다가 검색을 해서 찾았고 찾은 내용을 간단히 공유해본다. 아마 검색을 하면 바로 나오는 내용일 수도 있다. 하지만 검색을 해서 지금 '이 글'을 보고 있으면 굳이 다른 곳으로 찾아갈 필요없이 설정만 바꿔서 한글이 깨지는 문제를 빠르게 해결하고 다음 스텝으로 넘어가는게 좋을거 같아서 한팔 거들어 본다. 최근 개인적으로 프로젝트를 이것저것 시작해서 그런지 시간이 정말 어떻게 가는지 모를 정도로 하루하루를 바쁘게 살아가고 있다. 모든 프로젝트가 성공할거라 생.. 더보기
패스트캠퍼스 The RED : 견고한 UI 설계를 위한 마크업 가이드 정리 2탄 BEM이 뭐지? CSS 네이밍 어떻게 하지? "이름을 '개똥이'라고 짓는 것과 같다." 마크업을 할 때도 그렇고 프로그래밍을 할 때 고민이 되는 부분은 '변수와 함수의 이름을 뭐로 지을까?'이다. 프로그래밍뿐 아닌 작품명, 책 제목, 타이틀, 서브 타이틀, 상품명 등 다양한 분야에서도 작명으로 인해 많은 생각을 하게 된다. 그래서 그런지 컴퓨터 과학 분야에서 이런 말도 있다고 한다. 컴퓨터 과학에는 두 가지 난제가 있다. - Phil Karlton 캐시를 무효로 만드는 것 작명 이제부터 이름을 어떻게 작명하는게 좋을지 함께 공유하고 생각해보도록하자. 작명 규칙을 잘못 관리한 사례 "찔리시는 분?" 사례를 들어서 설명을 해주는데 조금 뜨끔했다. 작명을 하기 위한 고민을 안하고 귀찮아서 대충 이름을 지어서 작업을 하곤 했었는데 아래 사례들을 보니.. .. 더보기
패스트캠퍼스 The RED : 견고한 UI 설계를 위한 마크업 가이드 정리 2탄 CSS 리셋은 사용하는게 나을까? reset.css or normalize.css "여러분은 어떤 CSS 리셋을 사용하고 계신가요?" HTML은 기본적으로 가지고 있는 스타일 속성이 있다. 처음 퍼블리싱을 하는 사람들에게는 이런점을 모르고 작업을 시작했다가 중간에 바꾸려고 하니 전체가 바뀌는 현상으로 부분적으로 '쓸데없는' 코드를 마구마구 넣어주는 경우가 많다. 그래서 수년전 에릭 마이어의reset.css와 necolas의 normalize.css를 많은 이들이 사용하고 있다. 하지만 많이 사용하는 리셋 css 치고 마지막으로 업데이트된 시기는 각각 2011과 2018년. 현재가 2021년인 것을 감안하면 꾸준한 업데이트가 되고 있지는 않다. "하지만 과연 이걸 사용하는게 맞을까?" 1. reset.css - Eric A. Meyer 마지막 업데이트 : 2011년 1월 - 현재시점에서.. 더보기
패스트캠퍼스 The RED : 견고한 UI 설계를 위한 마크업 가이드 정리 1탄 picture와 img 활용법 "picture, source, img 활용하기" 이미지 포맷 비교 이름 크기 종류 지원 브라우저 example.tif 8.4MB TIFF 이미지(원본) - example.jpg 201KB JPEG 이미지 - example.webp 93KB WebP 이미지 크롬 엣지 파폭 사파리 14~ 사파리 IOS 14.4~ 크롬(안드) 삼성인터넷 example.avif 45KB 문서 크롬 파폭 크롬(안드) 삼성인터넷 picture 태그 예제 더보기
애플 2021 노트북 맥북 프로 M1 PRO, 맥북 프로 M1 MAX, 14.2형과 16.2형 스펙 상세! 2021년 10월 맥북 프로의 신형 모델 발표! 새로운 애플이 제작한 M1 PRO와 M1 MAX의 향상된 CPU 칩이 눈에 띄며 13인치의 작은 노트북과 터치바의 아쉬움이 있었다. 하지만 이번 신형 맥북 프로에서는 14인치와 16인치를 선보이고 터치바를 없애면서 기존 사용자들의 만족도를 높여주었다. 지난달 발표한 애플의 이벤트에서 맥북 프로를 기대했는데 발표하지 않아서 아쉬워했는데 맥북 프로 발표를 보면서 사고 싶다는 욕구가 마구 생겼다. 앱 개발과 디자인, 사진 작업, 영상도 하고 싶어 하는 내게 있어서 새로운 2021 맥북 프로는 나를 유혹하기에 부족함이 없었다. 맥북 프로의 향상된 기능 충전 후 최대 21시간 사용가능(16형 기준) 최대 2배 향상된 하드웨어 속도 최대 11배 향상된 머신러닝 처리속.. 더보기

티스토리툴바