티스토리

archuive

검색하기

블로그 홈

archuive

archuive.tistory.com/m

www에서 인터페이스를 만드는 디자이너입니다✨

구독자: 3

방명록 방문하기

반응형

주요 글 목록

github GPG 설정 했는데 Signed-off-by: 표시 안되는 문제 GPG 키 설정을 완료하고 커밋을 남기면 This is my commit messageSigned-off-by: Random J Developer 이렇게 Sighned-off-by 가 표시되어야 하는데, 안되는 경우가 있다.이 경우에는 커밋을 남길 때 아래와 같이 남겨보자.git commit --signoff --message 'This is my commit message' git commit -s -m "This is my commit message" 만약 이미 커밋을 남겼다면, 아래 명령어로 수정할 수 있다.git commit --amend --signoff 이미 GitHub에 변경 사항을 푸시한 경우 이후에 git push -f 을 사용하여 브랜치를 강제 푸시해준다. 이렇게 커밋을 수정할 수.. 공감수 0 댓글수 0 2024. 8. 19.
프로덕트 디자이너가 알아야 할 효과적인 거절 방법 "No"라고 말하는 중요성효과적으로 "No"라고 말하는 능력은 성공적인 프로덕트 디자이너가 되기 위해 필수적인 기술 중 하나입니다. 아이디어를 제안하는 사람은 회사의 중요한 이해관계자, 투자자, 또는 C레벨의 임원일 수 있습니다. 그들의 제안을 어떻게 하면 잘 거절하고, 디자인의 방향을 올바르게 유지할 수 있을까요? "No"라고 말하는 데 대한 일반적인 오해효과적인 기술을 논하기 전에, 잘못된 이유로 "No"라고 말하는 일반적인 오해를 짚고 넘어가겠습니다:게으름: 단지 너무 많은 노력이 필요하기 때문에 아이디어를 거절함.업무 과부하: 이미 업무가 많아서 제안을 거절함.검증 부족: 적절한 평가 없이 아이디어를 기각함.빡빡한 일정: 시간 압박과 일정 때문에 거절함.습관적 부정: 잠재적인 가치를 고려하지 않고.. 공감수 0 댓글수 0 2024. 6. 25.
Master 말고 Main Github에서 새로 레파지토리를 생성하면 기존의 master 브랜치가 main 으로 변경된걸 볼 수 있다. 2년 전에 업데이트 된 거였지만 글로 정리해두지는 않았었는데, 오늘 Carbon의 Icon에 기여하기 위한 가이드를 읽다가 mater라는 용어를 발견했다 Carbon의 기초 아이콘들을 모아둔 파일이 업로드 되어있는데, 오랜만에 master라는 용어를 본 것 같아 묘한 기분이 들어 이렇게 글을 작성해본다. 깃허브가 master 대신 main을 사용한건 2년전 미국의 Black lives matter 운동에서부터 기인했다고 한다. 기존에 master 브랜치를 사용하고 있던 다양한 프로젝트에서 문제가 발생할 수 있지만 "While it takes time to make these changes now,.. 공감수 0 댓글수 0 2022. 4. 28.
프레이머 Site 튜토리얼 Framer Sites: Get Started Framer Login login.framer.com 프레이머 로그인시 Tool 내에서 직접 영상을 보며 실습을 진행할 수 있다. 공감수 0 댓글수 0 2022. 4. 19.
override와 overwrite의 차이 사전적 정의 overwrite[│oʊvərraɪt] (3인칭 단수 현재 : overwrites) 동사 1.중복 기재하다, 겹쳐 쓰다 혹은 덮어쓰기 override[│oʊvərraɪd]override (3인칭 단수 현재 : overrides) 동사 1.(직권을 이용하여 결정·명령 등을) 기각[무시]하다 (=overrule) 2.…보다 더 중요하다[우선하다] 3.(자동으로 진행되는 과정을) 중단시키다 혹은 재정의 overriding[│oʊvərraɪdɪŋ] 형용사 1.다른 무엇보다 더 중요한, 최우선시 되는 the overriding factor/consideration/concern 다른 무엇보다 더 중요한 요소/고려 사항/우려 사항 한 구현을 다른 구현으로 완전히 교체하는 경우 이는 "overwritin.. 공감수 1 댓글수 0 2022. 4. 6.
Notion 단축키 노션을 사용하면서 마크다운 기본 문법과 / 만 활용했는데 생각보다 훨씬 더 다양하고 많은 단축키가 있어 정리해봅니다. (사실 빠르게 quote 만들고 싶은데 클릭 -> 선택 하는게 너무 귀찮아서 찾아봄...) 마크다운 스타일 입력 하면서 사용: **: 텍스트 양 옆에 작성하면 굵게(bold) 처리 됩니다. *: 텍스트 양 옆에 작성하면 기울임꼴 처리 됩니다. ```: 텍스트 양 옆에 작성하면 인라인 코드처리 됩니다. (보통 숫자 "1"키 옆에 있습니다.) ~: 텍스트 양 옆에 작성하면 취소선 처리 됩니다. 새로운 컨텐츠를 입력하기 전에 사용: *, -또는 + 를 입력하고 space 를 입력하면 불릿 리스트를 만들 수 있습니다. [] 를 입력하면 체크박스를 만들 수 있습니다. (대괄호 사이에 space가 .. 공감수 0 댓글수 0 2022. 4. 5.
[Fontello] 폰트 아이콘의 원리와 폰텔로 사용 방법 웹에 아이콘을 넣는 방식은 다양하다. 이미지(png, gif등)로 불러오기, SVG를 불러오기 그리고 웹폰트로 만들어 추가할 수도 있다. Fontello는 미리 제공하는 아이콘 중 원하는 아이콘을 선택해 경량화된 웹폰트로 만들수 있으며 특히 SVG 파일을 업로드해 원하는 아이콘을 추가할 수 있다. 아이콘을 폰트로 넣게되면 CSS의 color 속성을 사용해 코드의 컬러를 변경할 수 있으므로 이미지 리소스보다 유지보수에 효율적이다. 사용법 Fontello 사이트에서 원하는 아이콘을 선택하거나 Drag&Drop으로 폰트를 등록하고 Download webfont 버튼으로 다운받는다 HTML 문서에 다운받은 fontello.css파일을 불러온다 Demo 페이지에 있는 아이콘의 이름을 참고하여 형태로 클래스 명을 .. 공감수 0 댓글수 0 2021. 12. 26.
[Agile] 린 소프트웨어 개발 알아보기 기원 도요타 자동차의 독특한 색산 방식 원칙과 실천법을 정리하는데서 시작되었다. 우리나라 제조/생산 업계에서는 이미 도요타 생산 방식(TPS)를 오래 전부터 벤치마킹 해왔다. 린 (Lean)에서 중요한 개념은 JIT(Just In Time)이다. JIT는 필요한 시점에 필요한 만큼만 생산하는 것을 의미하며 이를 통해 재고를 최소화하고 비용도 최소로 줄여나간다. 또 하나의 중요한 용어가 칸반(Kanban)이다. 칸반은 일종의 작업 지시서로서 Pull 방식의 생산시스템을 구축하는데 중요한 역할을 한다 린 소프트웨어 개발의 시작 생산 방식으로서 린을 SW 개발에 적용하려는 시도는 여러번 있었다. 이를 체계적으로 정리한 것은 포펜딕(톰 포펜딕, 메리 포펜딕)부부이다. 린의 중요한 목표인 재구 절감을 SW개발에 .. 공감수 0 댓글수 0 2021. 12. 14.
[Agile] XP란? XP는 eXtreme Programing의 약자로 애자일 소프트웨어 개발 방식의 하나이다. 보통 개발조직 기반의 중소규모 팀에 적합한 경량화된 개발방식임. 다른 애자일 개발 방식과 마찬가지로 '방법론'이라 불리는데 이견이 있을 수 있다. 특히나 XP는 테스트 주도 개발 (Test Driven Development), 일일 빌드 (Daily Build), 지속적인 통합 (Continous Integration) 등 개발 테크닉과 연관된 부분이 많기 때문에 종종 '방법론'으로 규정 짓는 것에 대해 논란이 되곤 한다. 팀의 개발 문화가 제대로 정립되어 있지 않거나, 계획 및 관리 중심으로 프로젝트를 유지하던 팀의 경우 XP 도입 초기에 난관이 존재하기도 한다. 최근에는 XP만 사용하기보다 스크럼등 보완적 애자.. 공감수 0 댓글수 0 2021. 12. 13.
[Agile] 스크럼 알아보기 스크럼은 프로젝트 관리를 위한 애자일 방법론으로 추정 및 조정 기반의 경험적 관리 기법의 대표적인 형태이다. 기원 1986년 타케우치 & 노나카 교수가 HBR에 기고한 "The New New Product Development Game"을 기원으로 본다. 1995년 켄 슈와버와 제프 서덜랜드가 이 방법을 소프트웨어 개발에 소개하며 스크럼이라 부름 역할 제품 책임자 (Product Owner) 제품 기능 목록에 해당하는 백로그 (product backlog)를 만들고, 우선순위를 조정하거나 새로운 항목을 추가하는 일을 관리한다. 스프린트에 대해 계획을 수립할 때까지 중요한 역할을 하지만, 스프린트가 시작되면 최대한 팀 운영에 관여하지 않는걸 권장한다. 스크럼 마스터 (Scrum Master) 스크럼 원칙과.. 공감수 0 댓글수 0 2021. 12. 12.
CSS 작성시 속성 선언 순서 CSS를 작업하다보면 하나의 클래스에 여러개 속성을 선언하는 경우가 자주 발생한다. 속성 작성에 규칙이 있다면 추후 코드를 들여다볼 때 조금 더 내용 파악이 쉽지 않을까? 하는 마음에 구글링을 해보니, 역시나 CSS 선언 순서와 관련된 내용이 방대하고도 자세하게 정리되어 있었다. NHN 코딩 컨벤션 속성을 선언할 때는 그 쓰임새가 레이아웃과 관련이 큰 것에서 시작하여 레이아웃과 무관한 것 순서로 선언한다. 관련 속성은 대표되는 속성 다음으로 선언하며, 아래에 표기된 순서대로 선언한다. 레이아웃 display visibility overflow float clear position top right bottom left zindex Box width height margin padding border 배경.. 공감수 0 댓글수 0 2021. 12. 9.
lazy loading Lazy loading이란? 페이지 내에 바로 필요하지 않은 이미지들의 로딩 시점을 뒤로 미룬다. 성능 향상 페이지 초기 로딩 시 필요한 이미지의 수를 줄일 수 있다. 리소스 요청을 줄이는것은 다운로드 bytes를 줄이는 것이다. 비용 감소 이미지가 보여지지 않으면 절대 로딩하지 않으므로, 페이지 내에서 전달할 총 바이트 용량을 줄일 수 있다. 기술 태그를 이용한 일반적인 방법 이미지 로딩을 사전에 막는다. 태그를 사용하는 경우, 이미지를 가져올 때 src 속성을 사용하는데, HTML은 무조건 모든 이미지의 src를 로드한다. 이를 막기 위해 src 가 아닌 data-src 에 이미지 URL을 지정한다. 그리고 이미지가 뷰포트에 들어오자마자 로딩할 수 있도록 브라우저에게 알려준다. 자바 스크립트 이벤트로.. 공감수 0 댓글수 0 2021. 11. 5.
[Chrome] 크롬 브라우저에서 접근성 (색맹) 시야 테스트 하는 방법 개발자 도구 (F12) 에서 More tools → Rendering 메뉴 스크롤을 아래로 내리다보면 색맹을 시뮬레이션 해볼 수 있는 기능이 있음 Blurred vision: 흐린 시야 Protanopia: 적녹색약 blue와 green, red와 green 구분이 어려움), 적색과 녹색을 혼동하거나 적색과 녹색 또는 청록색을 혼동하는 색맹의 한 형태입니다. Deuteranopia: 제2색각이상(녹색약) 색조 감별에 영향을 미치는 것은 프로토노피아와 비슷하지만, 흐릿한 효과는 없다. 남성 인구의 약 1%에서 발견된다. Tritanopia: 제 3색각이상(청색맹) 청색 망막 수용체가 전혀 없는 채 적색과 녹색 원추 색소만 존재하는 매우 드문 색각 장애다. 파란색은 초록색, 노란색과 오렌지는 분홍색, 그리고.. 공감수 1 댓글수 0 2021. 10. 21.
[Agile] 폭포수 방법론과 애자일 방법론의 차이 계획 중심 vs 고객 중심 계획 중심 (폭포수) 프로젝트 시작 전 프로젝트 기간 전체에 대한 일정 계획을 수립한다. 프로젝트 계획에 따라 수행한다 고객 중심 (애자일) 불확실한 프로젝트 기간 전체를 감안해 무리하거나 현실성 없는 계획을 수립하지 않는다 현재 시점에 고객에게 중요하거나 확전된 내용을 중심으로 수립한다 프로젝트 상황에 따라 프로젝트 계획은 변경될 수 있다고 전제한다 계획보다는 고객이 중요하게 생각하는 기능을 먼저 개발한다 빅뱅 릴리즈 vs 작은 릴리즈 빅뱅 릴리즈 (폭포수) 프로젝트 종료 시점에 모든 기능을 릴리즈한다 작은 릴리즈 (애자일) 이터레이션이라는 일정 기간 단위로 작은 규모 크기의 릴리즈를 반복한다 고객 기준, 요구사항이 제대로 반영되고 있는지 조기에 확인할 수 있어 개발이 모두 .. 공감수 0 댓글수 0 2021. 9. 15.
[Agile] 애자일 기원 및 종류 소개 1990년대 중반에 다양한 방법론들이 등장하기 시작했다. 무겁고 규범적이었던 방법론에서 탈피해 가벼운 방법론을 지향하며 등장했다. 처음에는 애자일이 아닌 경량방법론(Lightweight methods)로 통칭 되었으나, 애자일 선언문을 만들며 비로소 이름 불리게 되었다. 1970년: 워터폴 모델 waterfall Model - Winston W. Royce 1974년: Concept of Adaptive software Development - Edmonds, E. A. 1991년: Rapid App. Development - James Martin 1995년: Scrum - Ken Schwaber, Jeff Sutherland 적응형 소프트웨어 개발 방법론(Adaptive Software Develop.. 공감수 0 댓글수 0 2021. 9. 1.
[Agile] 애자일 선언문과 12개 원칙 🔖 애자일 선언문 원문: We are uncovering better ways of developing sofware by doing it and helping others do it. Trough this work we have come to value: Individuals and interactions over processes and tools Working software over comprehensive documentation Customer collaboration over contact negotiation Responding to change over follwing a pain That is while there is value in the items on the right, we v.. 공감수 0 댓글수 0 2021. 8. 25.
[Git] 이중 인증 토큰 생성하기 2021년 8월 13일부로 비밀번호로 Github을 사용할 수 없다. 별도의 개인 접속 토큰을 사용해야한다. remote: Support for password authentication was removed on August 13, 2021. Please use a personal access token instead. remote: Please see https://github.blog/2020-12-15-token-authentication-requirements-for-git-operations/ for more information. fatal: unable to access 'https://github.com/your-repo.git': The requested URL retur.. 공감수 0 댓글수 0 2021. 8. 17.
[Sass] / 슬래시 기호 사용 경고 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().. 공감수 2 댓글수 0 2021. 7. 30.
[IntelliJ] 필수 단축키와 도움이 되는 단축키 새 도구는 역시 단축키부터 익혀야 제맛! 😋 먼저, Mac OS 유저라면 Preference에서 Keymap 기본 설정을 Mac OS로 변경 해주어야 합니다. ⇧⌘A 또는 Ctrl+Shift+A: 인텔리제이에서 사용할 수 있는 모든 액션 검색 가능 e.g. 로컬 변경 내역 기록 확인 (Local History | Show History) F2: 오류, 오류, 제안으로 이동 alt + enter: 모든 제안 표시 shift + alt + enter: 첫 번째 제안 적용 ⌘1 또는 Alt+1: 좌측 도구 프로젝트 창 열기 ⌘E 또는 Ctrl+E: 최근 실행한 파일 확인 Ctrl + Ctrl: 어떤 항목이나 실행할 수 있는 run anythin 표시 Alt + F7: 어떤 항목이 사용 된 모든 곳을 검색함 ⌥.. 공감수 0 댓글수 0 2021. 6. 29.
[IntelliJ] Tip of the day 기호가 클래스, 메서드, 필드, 매개 변수 또는 다른 문의 일부이든 상관없이 캐럿에서 기호를 참조하는 코드의 모든 발생을 신속하게 찾으려면 ⌥F7을 누릅니다. 선택한 클래스에 대한 상속 계층을 보려면 ⌃H(탐색 | 유형 계층)를 누릅니다. 또한 계층 보기를 편집기에서 직접 호출하여 현재 편집된 클래스의 계층을 볼 수도 있습니다. 최근에 연 파일 목록을 보려면 ⌘E(View | 최근 파일)를 누릅니다. 실제로 코드를 스크롤하지 않고 미리 보려면 마우스 포인터를 스크롤 막대의 경고, 오류 스트라이프 또는 소스 코드의 일부 섹션 위에 놓으면 다음과 같은 렌즈가 표시됩니다. 렌즈를 비활성화하려면 스크롤 막대 상단에 있는 코드 분석 마커를 마우스 오른쪽 버튼으로 클릭하고 스크롤 막대 호버에 코드 렌즈 표시 확인란.. 공감수 0 댓글수 0 2021. 6. 15.
[VScode] 열린 파일 탭이 하나만 보일 때, 여러개 보이게 하기 작업 하는데 갑자기 VScode 상단 탭에 열려있는 파일이 탭에 전체로 보여지는게 아니라 현재 활성화된 문서 하나만 보여서 당황한 적이 있다. 이 경우 단축키로 쉽게 해결할 수 있다! cmd + ctrl + w 아마도 전체 종료 cmd + ctrl + q 를 누르려다가 실수로 발생하는 듯 하다. 공감수 16 댓글수 1 2021. 6. 9.
progress bar CSS로 디자인 수정하기 HTML5의 progress 태그로 구현한 프로그레스 바의 디자인을 수정한다. HTML: 여기에서 max는 progress 요소의 작업 진행에 필요한 전체 작업량이다. 반드시 0보다 크고 유효한 부동소수점 숫자여야한다. value는 프로그레스바의 작업 진행 정도이다. 부동소수점 숫자여야한다. 기본 HTML5로 구현된 의 디자인을 수정하고싶다면 웹킷 의사 요소 선택자로 선언해줘야한다. 하지만 MDN에서는 이 기능이 비표준이기 때문에 모든 사용자에 적용되지 않을 수 있음을 강조한다. ::-webkit-progress-bar 의사 선택자는 progress 요소의 전체 bar를 나타낸다. ::-webkit-progress-value 의사 선택자는 value를 나타낸다. progress { -webkit-appe.. 공감수 3 댓글수 2 2021. 5. 28.
select와 option으로 커스텀 셀렉트 만들기 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의 범위를 벗어나는 객원 요소 이기 때문이다. 객원 요소는 .. 공감수 0 댓글수 0 2021. 5. 20.
웹폰트를 사용하기 위한 포멧 정보 웹 작업 중 아래와 같은 에러 메시지를 발견해서 급하게 정리해본다. 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.. 공감수 0 댓글수 0 2021. 5. 17.
[CSS] '::before', '::after', ':hover', '::lang();' 사용 스타일 오류 해결 문제 상황 기존에 잘 보이던 팝업 메뉴의 흰색 화살표가 회색 화살표로 변경됨 (::before, ::after 가상 요소 CSS 로 스타일링 된 화살표) 팝업 메뉴 리스트에 의문의 검은 사각형이 생기는 문제 시도한 것 들 ::before 에 들어간 클래스 때문에 검은 사각형이 발생하는 것 같아 해당 요소를 clip 처리 하거나 display: none; 처리함. 사각형은 사라지지만 화살표가 회색으로 보이는 문제는 해결되지 않았다. 결과물 스타일에서 관련 구문 긁어 보니, CSS에는 .popup::before:lang(en){border-color: #fff trans) 와 같이 스타일이 선언되어 있지만 요소에 제대로 선언되지 않고 있었다. 😨 lang(en) 과 ::before 선택자 순서를 바꿔 보니 .. 공감수 0 댓글수 0 2021. 5. 12.
[Sass] Architecture Guideline 번역 CSS 프로젝트를 설계하는 것은 아마도 프로젝트에서 해야 할 가장 어려운 일 중 하나 일 것입니다. 일관되고 의미있는 아키텍처를 유지하는 것은 더욱 어렵습니다. 다행히도 CSS 전처리기를 사용하는 주된 이점 중 하나는 @import CSS 지시문처럼 성능에 영향을 미치지 않으면 서 여러 파일에 코드베이스를 분할 할 수 있다는 것입니다. Sass가 @import 지시어를 과부하 한 덕분에 개발시 필요한만큼 많은 파일을 사용하는 것이 안전하고 (실제로 권장 됨) 모든 제품을 제작할 때 단일 스타일 시트로 컴파일됩니다. 그뿐 아니라 소규모 프로젝트에서도 폴더가 필요하다고 강조합니다. 가정에서는 모든 용지를 같은 상자에 떨어 뜨리지 않습니다. 당신은 폴더를 사용합니다; 하나는 집 / 아파트, 하나는 은행, 하나.. 공감수 0 댓글수 0 2021. 5. 10.
[크로스브라우징] input에 생기는 x 버튼 없애기 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? 공감수 0 댓글수 0 2021. 5. 7.
[크로스브라우징] IE에서 테이블 테두리가 사라지는 문제 border-collapse CSS 속성은 표 테두리(border)가 분리(separated) 또는 겹침 혹은 상쇄(collapsed)될 지를 결정한다. 분리 될 경우, 인접한 셀은 각각 자신의 고유(distinct) 테두리가 있다. 상쇄 모델에서는, 인접한 표 셀은 테두리를 공유한다. border-spacing 속성 없이도 각 셀에 스타일링한 테두리가 제대로 출력될 수 있어서 매우 소중한 속성이지만, 이 속성은 역시 IE에서는 골칫덩어리였다. 아래 이미지와 같이 border-spacing: collapse 를 선언하는 순간 IE11 버전에서 테두리가 간헐적으로 사라지는 것을 발견했다. 이 경우 border-spacing 속성의 기본 값인 border-spacing: separate로 값을 바꿔주면 원하.. 공감수 0 댓글수 0 2021. 5. 6.
[크로스브라우징] Flex 쓰기 전에 알아두면 좋은 것들, 알려진 이슈 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 선언을 사용하여 플렉스 아이템을 렌더링 하지만 멀티 라인 플렉스 컨테이너의 한 줄에 있어야 하는 항목 수를 계산할 때는 이.. 공감수 0 댓글수 0 2021. 5. 5.
[크로스브라우징] IE에서 CSS 속성 초기화(initial) 하는 방법 IE 크로스브라우징시 디자인이 깨지는 현상의 많은 경우CSS의 initial 값을 사용했을 때 발생했다. initial은 부모요소가 주는 모든 상속값을 건너뛰어 CSS 초기값을 되돌리는데 사용한다. 하지만! Internet Explorer은 이 값을 지원하지 않는다. 이를 해결하기 위해 initial대신 속성의 초기값이나, 초기화 혹은 없애는 값을 사용하는것을 권장하며 자주 사용하는 속성의 초기값은 아래와 같다. position: static overflow: visible line-height: normal color: transparent border: none 혹은 0 width, height 등 수치값 은 auto 초기 값이 없는 경우, 가장 가까운 부모로부터 상속받을 수 있도록 inherit 를.. 공감수 0 댓글수 0 2021. 5. 4.

반응형

문의안내

티스토리
로그인
고객센터

티스토리는 카카오에서 사랑을 담아 만듭니다.