개발/웹 html + css 5

css. display: grid 사용법 (grid-template-columns, grid-template-rows, span)

See the Pen grid by soo-toance (@soo-toance) on CodePen. nomadcoders 강좌 들으면서 display:grid를 통해서 div 세팅하는 것을 보고 관련 css 속성을 정리했다. grid-template-* grid-template-colums : 세로 지정 가능 grid-template-rows : 가로 지정 가능 repeat()함수와 fr : - repeat() : 각각 입력하지 않고 repeat(반복할수, 반복할크기)를 통해서 지정할 수 있다. - fr : 사용 가능한 공간의 일정 범위를 가리킨다. 그래서 아래와 같은 화면을 만들려면 ? (노마드코더 예시) See the Pen grid-2023 by soo-toance (@soo-toance) on ..

bootstrap. modal 부모창 -> 모달 데이터 전달 필요시

자바스크립트 · 부트스트랩 Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica. Reprehenderit butcher retro keffiyeh dreamcatcher synth. Cosby sweater bootstrapk.com 부모창 -> 모달 데이터 전달 필요시 $('#exampleModal').on('show.bs.modal', function (event) { var button = $(event.relatedTarg..

web. 구글 폰트 적용하기 (Lexend Deca 적용)

1. 구글 폰트 사이트 접속 Google Fonts Making the web more beautiful, fast, and open through great typography fonts.google.com 2. 원하는 글꼴 선택하여 굵기 및 스타일 선택 https://fonts.google.com/specimen/Lexend+Deca Google Fonts: Lexend Deca Lexend is a collection of seven font families intended to improve reading proficiency. As prescription eyeglasses achieve proficiency for persons with short-sig fonts.google.com 3. 상..

web. 파비콘이란 + png에서 ico로 생성해주는 사이트

사이드 프로젝트를 하면서 파비콘을 넣게 되었는데, 아무 생각없이 피그마에서 png로 따서 작업을 하려다가, 기존 디폴트 파비콘 확장자가 .ico로 설정되어 있어서 혹시나 ico로 해야 하나 하면서 찾아보게 되었다. https://webdir.tistory.com/337#footnote_337_1 ICO 파일을 사용할 경우 아래와 같은 크기 정도는 포함하는 것을 추천한다 크기용도 16x16 IE9 주소 표시줄, 고정된(pinned) 사이트의 점프목록/툴바/오버레이 32x32 IE의 새로운 탭 페이지, 윈도우7 이상에서 작업 표시줄 단추, Safari 나중에 읽기 사이드바 48x48 윈도우즈 사이트 아이콘 파비콘 생성 사이트 : https://favicon.io/favicon-converter/ Favico..

반응형