소개 | Plush 기술 블로그

소개

배운 모든 것을 기록하고 정리하는 블로그입니다.

시멘틱 마크업을 최대한 활용합니다.
- div 대신 header, nav, main, section, article, aside, details, figure, picture 등의 다양한 시멘틱 태그를 활용하여 가독성 및 SEO 점수를 높입니다.
웹 표준 / 접근성 / 호환성 (크로스 브라우징) 준수 및 WAI-ARIA 활용
- 웹 표준과 접근성을 고려하여 작업합니다.
- 크롬, 엣지, 파이어폭스, 네이버웨일 등 여러 브라우저에서도 동일한 화면이 보이도록 작업합니다.
- 필요 시 스크린 리더기에 추가적인 정보를 부여할 수 있는 WAI-ARIA 속성을 활용합니다.

id 대신 class 사용
- id는 우선순위가 class보다 높기 때문에, 최대한 class만을 사용합니다.
!important 는 최대한 지양
- Bootstrap 같은 UI 프레임워크를 커스텀하거나, 선택자가 길어져 우선순위가 꼬여 불가피하게 써야하는 경우 제외하곤 최대한 쓰지 않습니다.
고정값 (px) 대신 %, rem, vw, vh 등의 상대 단위 사용
- 상대 단위를 사용하여 요소가 짤려보이거나 하는 상황을 방지합니다.
컬러 이름 (red,white) 대신 rgb / hex code를 사용
- 컬러 적용 시 정확한 색상을 알 수 없는 애매한 컬러 이름보다는 색상 수치를 정확하게 알 수 있는 rgb 혹은 hex code (#fff, #333 등) 를 사용합니다.
색상은 css 변수로 관리 하고, 재사용될 코드는 SCSS Mixin으로 관리
- 자주 쓰이는 색상들을 CSS 변수로 관리하여 색상을 일일이 수정하는 상황을 방지합니다.
- SCSS를 사용할 경우, Mixin을 활용하여 코드 중복을 방지합니다.
셀렉터 최대한 단순화
- BEM과 같은 방법론을 사용하여 셀렉터가 계속 길어지는 것을 방지합니다.
셀렉터 선택 시 태그 이름 보단 class 로 선택
- 추후에 HTML 태그가 바뀔 것을 대비하여 태그 이름보다는 class로 선택합니다.
Flex 및 Grid 활용
- Flex와 Grid Layout을 활용하여 유연하고 효율적인 레이아웃을 구성합니다.
미디어쿼리를 이용한 반응형 구현

여러 프론트엔드 프레임워크들의 기본 문법을 숙지하고 있으며 컴포넌트로 각 요소를 나누고, api를 활용하여 데이터를 동적으로 보여주거나 mock data를 구성하여 실제 데이터를 다루는 것처럼 작업할 수 있습니다.

SPA 환경이 아닌 일반 HTML에서 반복문이나 컴포넌트 (include), SCSS 등을 사용할 수 있는 개발 환경을 구축하여 코딩을 효율적으로 할 수 있습니다.