탐구하는 취르미

사파리(Safari) 브라우저는 macOS 및 iOS 기기에서 가장 널리 사용되는 웹 브라우저 중 하나입니다. 웹 개발자들은 웹사이트를 디자인하고 개발할 때 사파리에서의 호환성을 고려해야 합니다. 반응형 웹 디자인은 모바일 기기 및 데스크톱 환경에서 웹사이트가 어떻게 표시되는지를 확인하는 데 중요합니다. 이를 위해 사파리 브라우저에서 제공하는 반응형 모드에 접근하는 방법에 대해서 알아봅시다. 메뉴 막대에서 개발자용 메뉴 보기 체크하기 우선 사파리 브라우저를 엽니다. 또 선행으로 Safari 설정 > 고급 > ✅ 메뉴 막대에서 개발자용 메뉴 보기가 체크가 되어 있어야 개발자용 메뉴를 사용하실 수 있습니다. 자세한 설정 방법이 보고 싶으시다면 아래의 링크를 참고해 주세요. 초보자를 위한 Safari 브라우..

텍스트 요소 사이의 간격을 조절하고, 반응형 디자인에서 글자 간의 간격을 조절하는 데에는 여러 가지 방법이 있습니다. 그 중 하나가 입니다. HTML 엔터티(entity)는 텍스트의 레이아웃을 세밀하게 제어하는 데에 유용하며, 특히 텍스트 간의 간격을 조절하는 데에 사용됩니다. 의 활용 방법에 대해 알아보겠습니다. 란? 는 HTML에서 사용되는 특수 문자로서, non-breaking space의 약어입니다. HTML에서 일반적인 공백 문자와는 달리, 줄 바꿈이 되지 않고 항상 공백으로 유지됩니다. 텍스트 레이아웃 및 요소 간의 간격 조절을 위해 사용됩니다. 활용 방법 를 활용하는 방법에 대해서 2가지 소개해드리겠습니다. 텍스트 사이의 강제 공백 생성 HTML에서 일반적인 공백 문자(스페이스 또는 탭)는 ..

유튜브(Youtube) 영상을 비율 유지한 채 반응형으로 삽입하는 방법에 대해서 알아보겠습니다. iframe 코드 복사하기 데모 영상으로 Google Developers의 영상으로 연습해 보았습니다. 1. 공유 버튼을 클릭합니다. 2. 퍼가기 버튼을 클릭하세요 3. 코드 복사하기가 나옵니다. 복사하셔서 HTML에 붙여 넣기 하시면 됩니다. iframe 반응형 코드 작성하기 퍼가기 허용 체크 여부 영상 게시자가 퍼가기 허용 체크를 비활성화했을 경우 아래와 같이 동영상을 재생할 수 없음으로 보입니다. 해상도에 따라 비율을 구하는 방법 일반적으로 16:9 비율을 많이 사용합니다. 4:3 : 3/4*100 = 75% 16:9 : 9/16*100 = 56.25% 21:9 : 9/21*100 = 42.85% /* ..

반응형(responsive) 페이지 작업할 때, css에서 미디어 쿼리(media query) 분기점(breakpoint) 작성 순서입니다 분기점은 해당 프로젝트에 맞게 설정하시면 됩니다 Mobile First 작은 너비 순으로 시작 @media screen and (min-width: 768px) { /* 768px 이상 */ } @media screen and (min-width: 1024px) { /* 1024px 이상 */ } Desktop First 넓은 너비 순으로 시작 @media screen and (max-width: 1023px) { /* 1023px 이하 */ } @media screen and (max-width: 767px) { /* 767px 이하 */ }