Dev/Knowledge 7

웹 개발자/디자이너가 사용하면 좋은 Google의 Tools

#1 모바일 친화성 테스트 모바일 친화적인 사이트를 보유하는 것은 온라인 인지도를 유지하는 데 중요한 역할을 합니다. 여러 국가에서 스마트폰 트래픽이 데스크톱 트래픽을 넘어서고 있습니다. 아직 사이트를 모바일 친화적으로 만들지 않았다면 모바일 친화적인 사이트를 만들어야 합니다. Search Console의 모바일 친화성 테스트 도구를 사용하면 사이트가 모바일 친화적인지 빠르고 간편하게 테스트할 수 있습니다. 사용 방법은 매우 간단합니다. 테스트 하려는 웹페이지의 전체 URL만 입력하면 됩니다. 모바일 친화성 테스트 페이지로 바로가기 > #2 PageSpeed Insights 웹페이지의 전반적인 속도를 측정하여 사이트 성능을 파악할 수 있습니다. 사이트를 로드하여 시뮬레이션을 한 후 속도에 관한 다양한 분..

Dev/Knowledge 2022.05.08

임팩트 있는 코딩을 해보자: Power Mode

쓸데없지만 멋있는!? 마치 스타벅스 한복판에 자리잡고 이걸로 코딩을 하고있으면 주변의 이목을 끌수있을거 같은. 그런 확장앱을 하나 소개해보고자 합니다. #1 Power Mode 당신의 코드가 파워풀해진다! Power Mode는 VSCODE, Brakets 등에서 사용할 수 있는 확장 툴입니다. 코딩을 할때 지진과 같이 화면이 흔들리면서 이펙트와 콤보수(연속 타이핑수)를 표시해 줍니다. #2 설치 방법 확장 마켓 플레이스로 이동한 후, power mode를 검색하면 쉽게 설치 할 수 있습니다. #3 사용방법 (1) 설정 창으로 이동 하여 power mode를 검색합니다. (2) 가장 위쪽에 위치한 powermode: Enabled를 체크해주면 사용 상태가 됩니다. 설정을 통해 찾아 들어가는게 귀찮다면 명령..

Dev/Knowledge 2022.05.02

웹 페이지의 목적별 분류

웹페이지의 목적을 어떻게 설정하였는지에 따라 다음과 같은 형식으로 나눌 수 있습니다. 제작자의 성향과 특성에 맞게 세분화하여 막연하게 '웹 사이트를 만든다'라고 하기보단 '웹 사이트를 만들고 있으며 특히 쇼핑몰을 잘 만듭니다' 같은 식으로 전문성을 어필하는 것도 좋습니다. #1 기업(corporate) 사이트 기업에 대한 정보를 게시하고 전달 "우리 회사를 알리고 싶다" #2 브랜딩 사이트 기업 및 상품의 이미지를 향상시키는 목적 "우리의 회사(브랜드)와 상품의 이미지를 향상하고 싶다" #3 서비스 사이트 서비스나 상품을 알리기 위한 사이트 "우리의 서비스(상품)를 알리고 싶다" #4 랜딩 페이지 구입 등의 액션을 노린 원페이지 형식의 완결형 사이트 "빠르게 고객을 집중시키고 싶다." #5 캠페인 사이트..

Dev/Knowledge 2022.04.19

기본적인 마크다운 작성 방법

기본적인 마크 다운 사용 방법입니다. *하단의 적용 결과는 모두 이미지 파일입니다. #1 기본 문법 1) 제목 # 다음 한 칸 띄우고 작성 # H1 ## H2 ### H3 #### H4 ##### H5 ###### H6 2) 굵게 하기(Bold) 텍스트 앞 뒤에 ** 작성 **bold text** 3) 이탤릭체 텍스트 앞 뒤에 * 작성 *italicized text* 4) 인용문 > 한 칸 띄우고 내용 > The overriding design goal for Markdown's > formatting syntax is to make it as readable > as possible. The idea is that a > Markdown-formatted document should be > publi..

Dev/Knowledge 2022.04.12

[Visual Studio Code] Live Server 크롬으로 열기

Visual Studio Code의 Live Server는 기본적으로 설정되어있는 브라우저를 이용하여 열리게 되어있습니다. window라면 Edge가 별로라 기본을 Chrome으로 설정하는 경우가 많으니 큰 문제가 안될 것인데, Mac 같은 경우엔 safari가 충분히 매력적이기에 Chrome을 메인으로 쓰는 사람은 잘 없을 것입니다. 이럴 때 라이브 서버를 크롬 브라우저로, 혹은 원하는 다른 브라우저로 설정하기 위해선 다음과 같은 방법으로 라이브 서버의 설정을 변경해 주면 됩니다 # Live Server Config Step 1. '설정'으로 이동합니다. Mac은 "Code > 기본 설정 > 설정"(단축키 cmd + ,) 윈도우는 "파일 > 기본 설정 > 설정"(단축키 ctrl + ,) Step 2. ..

Dev/Knowledge 2022.04.10

px / em 변환표

px을 em으로 변환한 표가 꽤나 자주 필요한데, 어디를 검색해도 최대 40px까지밖에 안보이는거 같아 개인적인 사용을 위해 80px까지 조금 범위를 넓혀 작성해 보았습니다. 참고. 대중적으로 사용되는 폰트는 10px에서 12px까지는 1px, 12px에서 18px까지는 2px, 18px에서 24px까지는 +3px, 24px에서 72px까지는 12px씩 일정한 규칙으로 증가하고 있습니다. 이러한 12가지 사이즈의 폰트에 대해서는 (*)표시가 되어있습니다. 변환표 Pixels EMs 1px 0.063em 2px 0.125em 3px 0.188em 4px 0.250em 5px 0.313em 6px 0.375em 7px 0.438em 8px 0.500em 9px 0.563em 10px* 0.625em 11px..

Dev/Knowledge 2022.04.04

프로그램 언어 문자 표기법의 종류 - 네이밍 커벤션(naming convention)

네이밍 커벤션(naming convention)이란? 변수명을 짓는 규칙. 컴퓨터 프로그래밍 언어 또는 개발 도구마다 사용되는 표기법이 다르며, 혼용이 가능할 경우 취향에 따라서도 선호하는 표기법이 다르기에 가볍게 정리해 보았습니다. 1. 카멜 표기법 (camelCase) 글자의 모양이 낙타의 등과 같다고 해서 카멜(낙타) 표기법이라 부른다. 변수 명이 두 단어 이상일 경우, 두 번째 이후부터는 단어의 첫 번째 문자를 대문자로 표기하며 띄어쓰기는 사용하지 않습니다. 변수명과 함수명 등에서 주로 사용됩니다. let userName = ""; 2. 파스칼 표기법 (PascalCase) 카멜 표기법과 유사하지만, 첫 번째 단어의 첫 문자도 대문자를 사용합니다. 클래스명과 생성자 명 등에서 주로 사용됩니다. ..

Dev/Knowledge 2022.03.18
반응형