출처 : https://velog.io/@juno7803/%EB%B0%98%EC%9D%91%ED%98%95%EC%9C%BC%EB%A1%9C-%EC%A2%85%ED%9A%A1%EB%B9%84-%EC%9C%A0%EC%A7%80%ED%95%98%EC%97%AC-%EC%9D%B4%EB%AF%B8%EC%A7%80-%ED%91%9C%EC%8B%9C%ED%95%98%EA%B8%B0 반응형으로 종횡비 유지하여 이미지 표시하기 반응형 웹을 공부하면서 ` 태그가 아닌, 특정 card와 같은 컴포넌트에 가로 세로 비율을 유지하면서 background-image`를 주는 방법에 대해서 소개드리려고 합니다! velog.io

출처 : https://marshall-ku.com/web/tips/focus-visible%EB%A1%9C-%EC%A0%91%EA%B7%BC%EC%84%B1-%EB%86%92%EC%9D%B4%EA%B8%B0 :focus-visible로 접근성 높이기 접근성 높은 웹사이트를 만들기 위해 고려해야 하는 것 중 하나는 키보드 "만" 이용해도 사이트를 정상적으로 이용할 수 있어야 한단 것입니다. 시각장애나 신체장애를 가진 사용자는 키보드(혹 marshall-ku.com 접근성 높은 웹사이트를 만들기 위해 고려해야 하는 것 중 하나는 키보드 '만' 이용해도 사이트를 정상적으로 이용할 수 있어야 한단 것입니다. 시각장애나 신체장애를 가진 사용자는 키보드(혹은 그와 비슷한 장치)만 이용해 웹사이트를 이용해야 하는 ..

출처 : https://www.thewordcracker.com/miscellaneous/%EB%AA%A8%EB%B0%94%EC%9D%BC-%EA%B8%B0%EA%B8%B0%EC%97%90%EC%84%9C-%EC%88%98%ED%8F%89-%EC%8A%A4%ED%81%AC%EB%A1%A4-%EC%97%86%EC%95%A0%EA%B8%B0/ 모바일 기기에서 수평 스크롤 없애기 - 워드프레스 정보꾸러미 모바일 웹에서 수평 스크롤(가로 스크롤)이 있을 경우 위의 그림과 같이 화면을 터치하여 왼쪽으로 이동시키면 사이트가 좌우로 움직이게 되어 매우 불편하게 됩니다. 모바일 기기에서 수평 www.thewordcracker.com 모바일 장치에서 수평 스크롤 없애기 모바일 웹에서 수평 스크롤(가로 스크롤)이 있을 경..

출처 : https://sudalog.tistory.com/63 [공통] inline요소 사이의 없어지지 않는 간격 해결법. div 요소 안에 요소 여러개를 배열해 놓았다. button은 기본적으로 default값이 inline-block;요소이다. 즉, 제 영역값은 가지지만 block이 아니기에 가로로 배열이 된다는 말이다. 문제는 margin, padding을 0 sudalog.tistory.com div 요소 안에 요소 여러개를 배열해 놓았다. button은 기본적으로 default값이 inline-block;요소이다. 즉, 제 영역값은 가지지만 block이 아니기에 가로로 배열이 된다는 말이다. 문제는 margin, padding을 0으로 줘도 없어지지 않는 간격이 버튼요소 오른쪽에 남아있었다. ..

출처 : https://knulab.com/archives/1185 배경이미지 브라우저에 꽉 채우기 – KNULAB 브라우저 뷰포트에 배경이미지가 꽉 차게 보여지려면 아래와 같이 min-height 값을 설정한다. Full Background Cover body, html { margin: 0; padding: 0; height: 100%; } .bgimg { border: 0; padding: 0; background-image: url('ima knulab.com 브라우저 뷰포트에 배경이미지가 꽉 차게 보여지려면 아래와 같이 min-height 값을 설정한다. Full Background Cover 첫번째 방법 html { background: url(images/bg.jpg) no-repeat ce..

출처 : https://webisfree.com/2017-09-04/css-%ED%8F%B0%ED%8A%B8-%EB%B0%94%EA%BE%B8%EA%B8%B0-font-face%EB%A5%BC-%EC%A0%81%EC%9A%A9%ED%95%98%EA%B8%B0 무료 또는 유료 폰트를 자신의 홈페이지, 웹사이트에 적용하는 방법을 알아보려고 합니다. 어떻게 해야할까요? 우선 CSS를 사용하여 폰트를 바꾸는 것이 가능합니다. 아래는 폰트를 다른 것으로 바꾼는 방법에 대하여 자세히 알아봅니다. 일반적으로 브라우저에서 사용하는 기본 폰트는 다를 수 있어 폰트 설정이 필요합니다. # CSS를 사용하여 웹폰트를 변경하기 아래 예제를 봐주세요 만약 webisfree라는 폰트가 있는경우 아래처럼 @font-face에 사용..