1ncode 님의 블로그

반응형 웹을 구현할 때, 이미지를 다양한 기기 환경에 맞춰~자유롭게 조절할 수 있는 태그는 크게 두 가지 방식으로 사용할 수 있다. [ 방식 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..

heading태그란?마크업을 할 때 글의 구조와 핵심 주제를 파악하기 좋은 태그! ▶ heading 태그 예시제목태그(페이지의 가장 중요한 제목)주요 소제목세부 제목 등...~~ 제목 h태그, 헤딩태그, 제목태그 등으로 불리는데! heading태그는웹페이지에서 검색엔진이 글의 구조와 핵심 주제를 파악하는 기준이기 때문에!! seo검색엔진을 고려하는 사이트를 만드는 중이라면?무조건!! heading태그를 사용하여 작업하는게 검색엔진에 유리 하겠죠? 그럼~ 작업자라면?!내가 작업한 heading태그를 반영이 잘되어있는지 체크 해봐야 합니다. 그 방법은 바로 chrom에서 확장프로그램을 설치하여 확인하는 것!!HeadingsMap 확장프로그램을 설치하고! 사용하는 방법을 알려드리겠습니다. vvvvv 1. h..