HTML & CSS 썸네일형 리스트형 [반응형 CSS] @media 쿼리, repeat auto-fit 이번 포스트에서는 최근 CSS Grid 레이아웃에서 자주 언급되는 auto-fit과 auto-fill의 차이점, minmax() 함수의 활용법, 그리고 미디어 쿼리 분기점 설정 시의 모범 사례에 대해 알아보겠습니다.1. auto-fit과 auto-fill의 차이점CSS Grid에서 repeat() 함수와 함께 사용되는 auto-fit과 auto-fill은 유사해 보이지만, 동작 방식에 차이가 있습니다.auto-fill: 그리드 컨테이너의 가용 공간에 맞춰 가능한 많은 열을 생성합니다. 남는 공간이 있더라도 빈 열을 유지하며, 콘텐츠가 없는 빈 셀을 생성합니다.auto-fit: auto-fill과 유사하게 가능한 많은 열을 생성하지만, 남는 공간이 있을 경우 빈 열을 제거하고, 기존의 셀이 그 공간을 채우.. 더보기 [다크모드] light-dark 함수로 쉽게 구현 light-dark() 함수먼저 영상에 나온 light-dark()함수를 써서, prefer-color-scheme값이 dark인 상태에서 보여줄 화면을 구성하고 싶은데요 아 근데 prefer-color-scheme란.. 여러분이 설정한 "난 다크모드가 좋아 or 라이트모드가 좋아" 시스템 설정입니다 처음 들어보셨다면 그냥 light상태일걸요? 저도 건드린적 없습니다 딱히 암튼간에:root { color-scheme: light dark;} 일단 이렇게 해서 브라우저에게 "여기는 light와 dark 테마 모두 지원합니다~"라고 알려줍시다 이제, 라이트모드와 다크모드에서 각각 달라야 하는 색상이 있다면 light-dark()함수를 쓰면 되는데 예를 들어 이렇게 되어있다고 합시다body { color:.. 더보기 [HTML] iOS에서 키보드 활성화 시 Viewport 문제 정리 1) iOS에서 키보드 활성화 시 Viewport 계산 문제문제 원인키보드로 인해 Viewport가 변경됨:iOS의 사파리에서 키보드가 표시되면 시각적 뷰포트 는 줄어들지만, 레이아웃 뷰포트는 같은 크기로 유지합니다.Android는 해당 키패드만큼 자동으로 줄여줍니다.getBoundingClientRect의 상대 위치:이 메서드는 요소의 뷰포트에 대한 상대적 위치를 반환합니다.Safari(iOS)에서는 키보드가 나타날 때 시각적 뷰포트 크기를 자동으로 줄여주지 않습니다.getBoundingClientRect가 반환하는 위치 정보 (top, left, right, bottom 등)(출처: https://developer.mozilla.org/ko/docs/Web/API/Element/getBoundingC.. 더보기 <button>태그가 iOS에서는 onFocus되지 않는 문제 {:toc}1. 태그의 Click과 Focus 동작일반적인 동작 요소를 클릭할 때, 브라우저와 운영체제에 따라 포커스가 해당 버튼으로 이동할지 여부가 결정됩니다.브라우저 별 동작(출처: https://en.spec-zone.ru/html/element/button) Spec-Zone.ru en.spec-zone.ru 데스크톱 브라우저Windows: 클릭 시 버튼에 포커스가 이동합니다.Mac(Firefox, Safari): 클릭해도 버튼에 포커스가 이동하지 않습니다.모바일 브라우저Android: 클릭 시 버튼에 포커스가 이동합니다.iOS: 클릭해도 버튼에 포커스가 이동하지 않습니다. 2. Safari와 WebKit의 포커스 동작 논쟁 (WebKit 버그 #22261)(출처: https://bugs.web.. 더보기 [CSHTML][카드 게임] 2. JS ajax, 컨트롤러 만들기 Card.js function saveCard() { var index = 0; var front = document.getElementById('CardFront'); var back = document.getElementById('CardBack'); // + 입력값 유효성 검사 추가 $.ajax({ url: '/Card/SaveCard', data: { CardIndex: index, CardFront: front.value, CardBack: back.value }, dataType: 'json', method: 'post', success: function (res) { alert("입력되었습니다: " + front.value + ", " + back.value); // 입력값 초기화 front.. 더보기 [CSHTML][카드 게임] 1. 간단한 CRUD, CSHTML 만들기 1. AddCard: Create 문제(앞면) 정답(뒷면) 저장 2. CardList: Read @ViewBag.Message @Html.Raw(File.ReadAllText(Server.MapPath("~/Views/Card/AddCard.cshtml"))) 번호 문제 정답 @for (int i = 0; i < @ViewBag.CardList.Count; i++) { @(i + 1) @ViewBag.CardList[i].CardFront @ViewBag.CardList[i].CardBack } 3. CardGame @ViewBag.Message 문제 갯수 시작 4. CardShow @{ var deckNum = ViewBag.CardList.Count - 1; var idx = ViewBag.CardI.. 더보기 [HTML] 태그별 주의사항 1. 속성 이름은 언제나 소문자로! 2. 보다는 태그를 사용하자 의미에 맞게 사용하는 것이 좋음 (검색 엔진이 읽기 쉽도록) 3. 과 의 차이? button 태그 안은 마음껏 꾸밀 수 있지만, input에는 value 값에 문자열만 쓸 수 있다. 4. 태그로 만들면 제약이 많아 잘 쓰지 않음 5. 안에 컬럼 개수만큼 을 선언하여 컬럼 별로 그룹핑 6. 다른 HTML 페이지를 현재 페이지 안에 집어넣을 수 있음 7. 쓰지 않는 게 좋은 태그들: 태그 자체가 의미를 가지지 않고 형태를 가지기 위해서 만들어졌기 때문 - : 볼드로 표시 - : 밑줄 표시 - : 이탤릭체로 표시 - : 감싸진 컨텐츠를 화면 중앙으로 정렬 - : 글자의 글꼴을 변경 8. jquery가 처음에 선풍적인 인기를 끌었던 이유가 css와.. 더보기 [CSS] 카드 뒤집기(플립) 효과 [CSS] 카드 뒤집기(플립) 효과 코드 CSS를 이용하여 입체효과가 적용된 카드를 뒤집어 앞면, 뒷면 구분을 할 수 있습니다. .flip { width: 200px; height: 250px; perspective: 1100px; } .card { width: 100%; height: 100%; position: relative; transition: .4s; tran gurtn.tistory.com 더보기 이전 1 다음
