1ncode 님의 블로그

수업을 하는 폴백! 폴백이라는 단어가 계속 쓰인다!폴백이란 무엇일까?! 폴백을 알아보자~! vv 폴백(fallback)이란?원래 의도한 기능이 동작하지 않을때! 대신 사용되는 예비옵션, 즉 대안을 말한다. [ 예시 01 ]font-family: 'Noto Sans', Arial, sans-serif; Noto Sans 로드 실패 >> Arial 사용! >> Arial도 없으면 >> OS 기본 sans-serif 사용 [ 예시 02 ]:root { --base-color: gray; --default-color: pink;}div {background: var(--base-color, var(--default-color, red));} var(--base-color) >> var..

웹접근성 텍스트 숨김 방법! sr-only 설정 하는 방법! vv /* 접근성 관련 CSS */.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; white-space: nowrap; margin: -1px; padding: 0; border-width: 0; clip-path: inset(50%);} 1. position: absolute;요소를 화면 레이아웃 흐름에 빼서 보이지 않는 곳에 배치하기 위한 작업2. width: 1px; height: 1px;요소의 크기를 아주 작게(1px) 만들어서 화면에 거의 보이지 않도록 함3. overflow: hidden;요소 안의 내용이 밖으로 보이지 않도록 잘라냄..

CLI란? (Command Line Interface) - 키보드로 직접 명령어를 입력해서 컴퓨터와 소통하는 방식 "명령어로 사용하는 인터페이스"예: 터미널, 명령 프롬프트, Git Bash'명령어'로 컴퓨터와 대화하는 방식GUI란? (Graphical User Interface) - 버튼, 창, 아이콘 등 눈에 보이는 화면을 클릭해서 컴퓨터와 상호작용하는 방식이야. "그래픽으로 사용하는 인터페이스"예: 소스트리, VSCode 등'그래픽'을 클릭하면서 컴퓨터와 대화하는 방식shell 이란?셸(shell)은 운영체제와 사용자간의 인터페이스 역활을 하는 프로그램. 터미널에서 사용되는 주로 CLI를 제고하여 사용자가 텍스트 기반 명령어를 사용하여 컴퓨터와 상화작용 가능 운영체제(OS)와 사용자 사이에서 ‘..

반응형 웹을 구현할 때, 이미지를 다양한 기기 환경에 맞춰~자유롭게 조절할 수 있는 태그는 크게 두 가지 방식으로 사용할 수 있다. [ 방식 01 - 'sizes + w 단위(srcset)' 방식 ] 폭(Width) 기반 반응형 이미지 방식 sizes="50vw" >> 이 이미지는 뷰포트의 절반 크기로 보일 예정!브라우저는 실제 렌더링 크기(50vw 계산값)를 보고! 420w 또는 656w 중 적절한 해상도를 선택함. 브라우저가 선택 기준으로 삼는 것?? >> 화면에서 이미지가 어느 정도 폭(width)으로 보일지! 언제 사용??로고처럼 화면 크기에 따라 보이는 크기가 달라지는 이미지반응형 레이아웃에서 width가 유동적인 이미지 [ 방식 02 - '픽셀 밀도(1x, 2x, 3x..

태그란?하나의 이미지 자리에 여러 버전의 이미지를 준비해 두고,브라우저의 화면 크기, 지원 포맷에 맞춰 가장 적절할 이미지를 선택해서 보여주는 태그! 즉! 화면의 크기나 기기의 환경에 따라~알맞은 이미지를 자동으로 골라 보여주는 태그 이다!! [예시] 브라우저가 화면의 크기를 확인하면서 500px 이하의 핸드폰 화면 → small-550.jpg 사용768px 이하의 태블릿 화면 → medium-1024.jpg 사용1280px 이하의 작은 노트북 화면 → large-1600.jpg 사용그보다 크면 기본 의 이미지(normal-1920.jpg) 사용즉, 각 디바이스에 딱 맞는 이미지를 자동으로 선택해주는 구조 태그는 상황별 이미지 스위치라고 생각하면 됨! 태그는 "조건/규칙"만 알려..

vscode에서 터미널로 git 명령어를 사용할 때! shell을 사용하잖아요?! windows 환경에서 vscode의 터미널을 실행하면~ 기본값이 PowerShell로 설정되어 있습니다!(tip. mac사용자는 기본 zsh 또는 bash로 설정되어 있어~ 추가로 설정해주지 않아도 됩니다.) vscode에서 터미널 실행시!내가 원하는 shell을 기본값으로 설정하는 방법을 알아 보겠습니다! vvvv 1. vscode > 터미널 열기 > 화살표 클릭 vscode 터미널을 열어~터미널 상단 우측에 화살표 아이콘을 클릭! 2. terminal > 화살표 아이콘 클릭 > Select Default Profile 선택 화살표 클릭 > Select Default Profile 선택 터미널에서 화살표 아이콘을 ..

비쥬얼 스튜디오 코드에서htmltagwrap 확장기능을 사용하여~ 쉽고 간단하게텍스트를 태그로 감싸는 방법을 알려드릴게요. 1. Visual Studio Code - EXTENSIONS Visual Studio Code의 좌측 상단에 아이콘 리스트가 있는데!그곳 중 4번째를 클릭하면 extesnions를 확인 할 수 있습니다. extensions 검색창에~필요한 확장기능을 찾아 설치 하면 됩니다. 2. EXTENSIONS - htmltagwrap 설치 extension 검색창에 htmltagwrap 입력하고!위에 이미지와 같은 화면이 뜨면~ 설치 하면 됩니다. 3. htmltagwrap 사용 방법 1. 텍스트를 입력2. 입력한 텍스트를 드래그3. 드래그 상태에서 단축키 alt + w 입력 4. p..

개발 세계의 입문자라면?? 내가 현재 작업하고 있는 코드에 오류가 있는지 없는지?검색엔진, 웹접근성에 문제가 있는 코드인지~ 없는 코드인지 혼란스럽죠?? 확인할 수 있는 방법을 알려드리겠습니다~! 방법으로는 chorme 브라우저의extension을 사용하는 방법이 있습니다. extension(확장프로그램) 설치부터~ 확인방법까지 알려 드리겠습니다. vvvvv 1. Web Developer 설치 chorome 브라우저의 구글 검색창 Web extension 검색 하거나~아래 남겨놓은 url을 통하여 바로 이동!하여 설치하면 됩니다. https://chromewebstore.google.com/detail/web-developer/bfbameneiokkgbdmiekhjnmfkcnldhhm?hl=ko We..