반응형

Work 52

CSS 작성시 속성 선언 순서

CSS를 작업하다보면 하나의 클래스에 여러개 속성을 선언하는 경우가 자주 발생한다. 속성 작성에 규칙이 있다면 추후 코드를 들여다볼 때 조금 더 내용 파악이 쉽지 않을까? 하는 마음에 구글링을 해보니, 역시나 CSS 선언 순서와 관련된 내용이 방대하고도 자세하게 정리되어 있었다. NHN 코딩 컨벤션 속성을 선언할 때는 그 쓰임새가 레이아웃과 관련이 큰 것에서 시작하여 레이아웃과 무관한 것 순서로 선언한다. 관련 속성은 대표되는 속성 다음으로 선언하며, 아래에 표기된 순서대로 선언한다. 레이아웃 display visibility overflow float clear position top right bottom left zindex Box width height margin padding border 배경..

Work/HTML, CSS 2021.12.09

lazy loading

Lazy loading이란? 페이지 내에 바로 필요하지 않은 이미지들의 로딩 시점을 뒤로 미룬다. 성능 향상 페이지 초기 로딩 시 필요한 이미지의 수를 줄일 수 있다. 리소스 요청을 줄이는것은 다운로드 bytes를 줄이는 것이다. 비용 감소 이미지가 보여지지 않으면 절대 로딩하지 않으므로, 페이지 내에서 전달할 총 바이트 용량을 줄일 수 있다. 기술 태그를 이용한 일반적인 방법 이미지 로딩을 사전에 막는다. 태그를 사용하는 경우, 이미지를 가져올 때 src 속성을 사용하는데, HTML은 무조건 모든 이미지의 src를 로드한다. 이를 막기 위해 src 가 아닌 data-src 에 이미지 URL을 지정한다. 그리고 이미지가 뷰포트에 들어오자마자 로딩할 수 있도록 브라우저에게 알려준다. 자바 스크립트 이벤트로..

Work/JacaScript 2021.11.05

[Chrome] 크롬 브라우저에서 접근성 (색맹) 시야 테스트 하는 방법

개발자 도구 (F12) 에서 More tools → Rendering 메뉴 스크롤을 아래로 내리다보면 색맹을 시뮬레이션 해볼 수 있는 기능이 있음 Blurred vision: 흐린 시야 Protanopia: 적녹색약 blue와 green, red와 green 구분이 어려움), 적색과 녹색을 혼동하거나 적색과 녹색 또는 청록색을 혼동하는 색맹의 한 형태입니다. Deuteranopia: 제2색각이상(녹색약) 색조 감별에 영향을 미치는 것은 프로토노피아와 비슷하지만, 흐릿한 효과는 없다. 남성 인구의 약 1%에서 발견된다. Tritanopia: 제 3색각이상(청색맹) 청색 망막 수용체가 전혀 없는 채 적색과 녹색 원추 색소만 존재하는 매우 드문 색각 장애다. 파란색은 초록색, 노란색과 오렌지는 분홍색, 그리고..

Work/Tools 2021.10.21

[Agile] 폭포수 방법론과 애자일 방법론의 차이

계획 중심 vs 고객 중심 계획 중심 (폭포수) 프로젝트 시작 전 프로젝트 기간 전체에 대한 일정 계획을 수립한다. 프로젝트 계획에 따라 수행한다 고객 중심 (애자일) 불확실한 프로젝트 기간 전체를 감안해 무리하거나 현실성 없는 계획을 수립하지 않는다 현재 시점에 고객에게 중요하거나 확전된 내용을 중심으로 수립한다 프로젝트 상황에 따라 프로젝트 계획은 변경될 수 있다고 전제한다 계획보다는 고객이 중요하게 생각하는 기능을 먼저 개발한다 빅뱅 릴리즈 vs 작은 릴리즈 빅뱅 릴리즈 (폭포수) 프로젝트 종료 시점에 모든 기능을 릴리즈한다 작은 릴리즈 (애자일) 이터레이션이라는 일정 기간 단위로 작은 규모 크기의 릴리즈를 반복한다 고객 기준, 요구사항이 제대로 반영되고 있는지 조기에 확인할 수 있어 개발이 모두 ..

Work/Tools 2021.09.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..

Work/Tools 2021.09.01

[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..

Work/Tools 2021.08.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()..

Work/HTML, CSS 2021.07.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: 어떤 항목이 사용 된 모든 곳을 검색함 ⌥..

Work/Tools 2021.06.29

[IntelliJ] Tip of the day

기호가 클래스, 메서드, 필드, 매개 변수 또는 다른 문의 일부이든 상관없이 캐럿에서 기호를 참조하는 코드의 모든 발생을 신속하게 찾으려면 ⌥F7을 누릅니다. 선택한 클래스에 대한 상속 계층을 보려면 ⌃H(탐색 | 유형 계층)를 누릅니다. 또한 계층 보기를 편집기에서 직접 호출하여 현재 편집된 클래스의 계층을 볼 수도 있습니다. 최근에 연 파일 목록을 보려면 ⌘E(View | 최근 파일)를 누릅니다. 실제로 코드를 스크롤하지 않고 미리 보려면 마우스 포인터를 스크롤 막대의 경고, 오류 스트라이프 또는 소스 코드의 일부 섹션 위에 놓으면 다음과 같은 렌즈가 표시됩니다. 렌즈를 비활성화하려면 스크롤 막대 상단에 있는 코드 분석 마커를 마우스 오른쪽 버튼으로 클릭하고 스크롤 막대 호버에 코드 렌즈 표시 확인란..

Work/Tools 2021.06.15
반응형