예방이의 개발일기

PC 브라우저로 테스트 할 때는 몰랐는데스마트폰을 이용해 모바일 테스트를 해보니까 :hover에 background를 넣어놨는데 이 hover의 background 색상이 지속되는 현상이 있었다.  이미지 처럼 같은 위치에 있을 때각 페이지로 화면 전환이 이뤄지면 처음에는 기본 색상이였는데두번째 화면 부터는 hover 색상으로 적용되어 유지되었다. 왜그럴까?모바일 기기는 마우스 대신 터치로 작용을 하는데 그래서 hover 기능이 크게 의미가 없다.hover 기능이 사용자의 커서(마우스 포인터)가 요소 위에 올라가 있으면 선택되어 효과를 주는건데, 모바일에서는 손가락이 요소 위에 올라가 있는게 아니기 때문이다.그래서 모바일 환경에서는 엘리먼트를 터치하게 되면 브라우저는 포인터가 계속 해당 엘리먼트에 위에 ..

이미지맵 HTML tag인 map과 area를 사용해서 이미지에 링크를 걸 수 있다. 주로 지도같은 복잡한 이미지에 사용할 수 있고,내가 봤던 것은 통 이미지로 된 쇼핑몰 사이트 또는 홍보 배너에서 많이 볼 수 있었던 것 같다. 지금은 많이 안쓰는 태그라고 하는데가끔 이 이미지 버튼 부분에만 링크를 걸어주세요 하는 요청이 있을 때마다 a태그를 position absolute줘서 위치를 맞춰서 작업했는데이 이미지맵 방법을 쓰는것도 빠르고 좋을 것 같다.  " data-ke-type="html">HTML 삽입미리보기할 수 없는 소스 위에 이미지는 내가 이미지맵을 이용해 각 포스티잇 부분에 링크를 걸었는데 (개발자도구에서 확인가능)링크가 제대로 동작하지 않는다. 찾아보니이미지..

srcset 속성 파일위치, 픽셀 밀도, 너비값 지정 가능 콤마를 이용해 다중 지정 가능 해당 속성은 생략 불가능 (파일 위치 필수, 픽셀 밀도와 너빗값은 생략 가능) 파일위치 : 이미지 파일 위치 픽셀 밀도 : 해상도의 배수 너빗값: sizes 속성과 뷰포트 크기와 연계되어있음 media 속성 (생략가능) 미디어 쿼리를 뜻함 (모든 미디어 쿼리의 조건문을 사용할 수 있는 것은 아님, 너비값에 대해서만 지원) sizes 속성 (생략가능) 이미지가 표현될 영역의 크기 설정, 너빗값과 미디어 쿼리 지정 가능 type 속성 불러올 파일의 유형 지정 가능 img 태그 src 속성에 기본으로 출력될 이미지 경로 입력 picture, source 태그 지원하지 않는 브라우저를 위한 용도 (크로스 브라우징) 마지막에..

vscode에서 prettier 사용할 때, 저장할 때마다 자동으로 줄바꿈 되는 것 방지하는 방법 Prettier · Opinionated Code Formatter Opinionated Code Formatter prettier.io 주석으로 줄바꿈 하고 싶지 않은 부분 바로 위에 아래 코드 넣기 주석 형식은 각 확장자에 맞게 고쳐야함 아래는 css일 때, /* prettier-ignore */

내가 헷갈려하는 flex에 대한 부분을 정리해봤다. inline-flex CSS display: flex 그리고 inline-flex 인터넷 익스플로러도 망한 마당에 이제 HTML의 블록 요소들의 배치가 좀 더 자유로워졌습니다. display: flex; 에 의해서 가능해진 것입니다. 이제 flex(플렉스) 정렬 방법에 의해서 간격이든, 가로 정 rgy0409.tistory.com flex-flow .item { display: flex; /* flex-direction flex-wrap */ flex-flow: flex-col wrap; } align-self 교차축 방향으로 박스를 개별적 배치할 수 있게 해주는 속성 속성명 속성값 적용요소 align-self auto stretch flex-start..

이미지, 동영상 등 미디어 요소에 대해 알아보자! : 비디오 삽입 요소 - HTML: Hypertext Markup Language | MDN HTML 요소는 비디오 플레이백을 지원하는 미디어 플레이어를 문서에 삽입합니다. 오디오 콘텐츠에도 사용할 수 있으나, (en-US) 요소가 사용자 경험에 좀 더 적합합니다. developer.mozilla.org 속성 값 설명 src url 삽입(embed)할 동영상 주소 태그 사용해서 삽입할 동영상 명시 가능 autoplay true 자동재생 여부 (autoplay="false"는 동작 안해서 autoplay 속성을 완전히 제거해야지 autoplay가 비활성화된다.) buffered 미디어의 어느 시간대의 버퍼에 들어있는지 확인할 수 있는 속성 controls ..

CSS의 grid와 flex를 사용하면 크게 사용하지 않는 편인 것 같다. 하지만 크로스브라우징을 해야할 수도 있으니까... 알아두는 것도 좋을 것 같다. (flex와 grid를 사용못할 수 있기 때문에... 거의 그 경우는 없지만 ㅎㅎ, can I use 에서 확인해보면됨! ) 근데 주로 사파리, 사파리 mobile, 갤럭시 브라우저에서 말썽이 많이 나는 듯 (아마 내 기억에 사파리 ios14?인가에서 flex gap을 못사용했다. 근데 grid gap은 또 사용가능 ㅎㅎ) 🍎 가변 그리드 공식 (박스의 가로 너비) ➗ (박스를 감싸고 있는 부모박스의 너비) ✖️ 100 = 가변크기의 % 값 작업 할 때 부모 박스를 잘 사용해야하는 것 같다. (부모 박스를 적재적소에 잘 사용하는 눈은 경력 차인듯.....

반응형 웹에 필요한 4가지 기본 개념 🍎 가변 그리드 Fluid Layout / Flexible Layout / Flexible Grid 반응형은 px로 작업할 수 없다. 대신 퍼센트(%)로 작업해야한다. 퍼센트(%)로 작업해야지 가변 폭에 따라 내용들도 가변적으로 늘어났다 줄어들었다 할 수 있다. 💡 가변, 가변적이다 "어떠한 객체/물체 또는 사물이 늘어나거나 줄어들거나 성질이 변하는 것" 💡 그리드, 그리드 작업 그리드란 격자, 눈금을 말함 웹 디자인에서는 웹페이지의 가로크기, 세로크기, 여백, 단 수 등 웹사이트의 구조 설계를 위한 의미로 사용 🍎 미디어쿼리 & 뷰포트 퍼센트로만 css를 작업한다고해서 반응형 웹이 되는 것은 아니다. 비율로 제작 시 가변적으로 작동하긴 하나 기기나 환경에 따라 구조..

반응형 웹에 등장 모바일 기기가 나오고 모바일 웹이 등장하고, 그 뒤에 계속해서 태블릿, 패블릿 기기 등 여러 사이즈의 기기들이 나오면서 다양한 화면에 최적화된 웹사이트를 제공하기 위해 반응형 웹이 등장하게 되었다. - 2015년 10월 반응형웹이란? 해당 기기 화면이나 환경에 맞게 자유자재로 변하는 것이 반응형 웹이라고 할 수 있다. 해당 사이트에서 다양한 반응형 웹사이트를 만나볼 수 있다. 반응형으로 작업해야하는 이유는? 유지보수의 간편함 반응형을 구축할 때 작업해봤는데 100% 인정은 할 수 없는 것 같다. 모바일과 웹의 디자인의 갭이 적었을 때 효과가 좋은듯? 적응형 사이트도 해봤는데 확실히 적응형보다는 유지보수가 쉬운 건 맞다. (적응형은 pc, mo 다 각자 수정해야하고 다 별도로 테스트 해야..