Frontend/Markup (15) 썸네일형 리스트형 google icon 보통 아이콘은 font awesome, Xeicon에서 svg다운받아서 붙여넣거나 아니면 직접 만들기도했는데 구글 폰트사이트에서 아이콘도 제공해준다는것을 최근에 발견하였음! 저 느낌표 아이콘 어디서 가져온거지 찾아보다가~ https://fonts.google.com/icons?icon.query=warn Material Symbols and Icons - Google Fonts Material Symbols are our newest icons consolidating over 2,500 glyphs in a single font file with a wide range of design variants. fonts.google.com https://developers.google.com/fonts/do.. 에러처리(dom, 객체) 에러처리의 필요성 에러가 발생하지 않는 코드를 작성하는 것은 불가능하다. 발생한 에러에 대해 대처하지 않고 방치하면 프로그램은 강제 종료된다. 만약에 에러에 적절히 대응하면 프로그램이 강제 종료되지않고 계속해서 코드를 실행 시킬 수 있다.(모던 자바스크립트 에러처리 편) DOM const div = document.querySelector('.example') div && div.style.display = 'block' div?.classList.add('disable') 객체 https://ko.javascript.info/optional-chaining 탭메뉴 tab menu for(let i = 0; i { e.preventDefault(); for(let j=0; j nextjs viewport nextjs에는 _app.js import type { AppProps } from 'next/app' import Layout from '../components/layout/layout' import '../styles/Home.module.css' import '../styles/index.scss' import Head from "next/head"; function MyApp({ Component, pageProps }: AppProps) { return ( ); } export default MyApp 그리고 첫페이지에 하나의 이미지혹은 박스로 꽉 채우고싶으면 min-height혹은 height 값을 calc(100vh - nav높이)를 하면된다! 뷰포트 차이점에 대해 공부해봐야겠다. a태그 확장시 block 안먹힐때 https://dubaiyu.tistory.com/15 나의경우는 a태그안에 추가된 아이콘태그인 때문인지 block을해도 확장이되지않았다. 그 위의 부모요소에 inline-block을 해보니 확장이되었다. CSS #printPage{ display: inline-block; } #printPage a{ display: block; } HTML 인쇄 disabled 에서 readonly로 사용한 이유 update기능이 잘되다가 안되는 문제가 발생해서 맨붕이왔다. input태그안에 글을 수정못하게하려고 disabled를 넣은 이후에 안되는것같았다. 설마해서 구글을 검색해보니 disabled하니까 value값까지 못가져와버리는 문제가발생 readonly로 시도해보라고하는군.. height 100%가 안먹을때(100vh 아님) 추가수정: 자바스크립트로 해결 css는 한계가 있고 자바스크립트로 스크롤길이를 측정해서 그만큼 px로 변환해주면되는듯하다. 변수명+style+height = '숫자px'을 입력해야하기때문에 숫자 + 문자열을 계산하면 문자열이되는 자바스크립트의 특징을 이용해 'px'을 붙였다. 변수명.style.height = document.body.scrollHeight + 'px' --- position:absolute; top:0; width:100%; height:100%; 를 주었는데도 안먹을경우가있다. min-height:100% 혹은 100vh로도 변경해보고 그래도안되면 나같은경우는 padding-bottom:3000px처럼 야매로 해결하였음.(어차피 검은배경화면일뿐이어서..) HTML 시맨틱태그 정리 4.3.12 Usage summary html.spec.whatwg.org/#usage-summary-2 HTML Standard html.spec.whatwg.org 이전 1 2 다음
