웹(web)/프론트엔드-html8 렌더링 차단 리소스 페인트 시에 중단되는 경우에 대한 설명이다. https://web.dev/render-blocking-resources/ Eliminate render-blocking resources Learn about the render-blocking-resources audit. web.dev https://developers.google.com/web/fundamentals/performance/critical-rendering-path/render-blocking-css?hl=ko 렌더링 차단 CSS | Web | Google Developers 기본적으로, CSS는 렌더링 차단 리소스로 취급됩니다. CSS가 렌더링을 차단하지 않도록 방지하는 방법에 대해 알아보세요. developers.google.com 2021. 5. 23. 크롬으로 DOM 디버깅 기본적인 사용법은 공식 문서에서 확인할 수 있다. 이 글에서는 좋은 기능들을 정리해보고자 한다. developer.chrome.com/docs/devtools/dom/ Get Started With Viewing And Changing The DOM - Chrome Developers How to view nodes, search for nodes, edit nodes, reference nodes in the Console, break on node changes, and more. developer.chrome.com # 키보드로 DOM 탐색하기 크롬 디버거로 DOM을 디버깅하다 보면 손이 굉장히 바쁘다. 조금 더 편하게 디버깅하려면 키보드 arrow(화살표)를 활용하면 된다. 다음과 같은 디버거 상.. 2021. 5. 5. HTML form, input 웹사이트를 사용하다 보면 로그인이나 회원가입도 하고 검색도 하게 된다. 아래 사진과 같이 검색하는 것도 보았을 것이다. 이런 기능을 구현할 때 form, input으로 구현한다. 위의 코드를 구현하려면 과 같은 구조를 사용하면 된다. form form 태그의 속성으로 request에 대한 목적지인 url, request 방식인 method과 같은 request에 대한 정보를 등록한다. request의 body에 들어갈 데이터는 어떻게 정의할까? 바로 input 태그를 사용하는 것이 대표적이다. 매일 우리가 로그인할 때 아이디와 비밀번호를 입력한다. 이 입력하는 과정이 input 태그에 정보를 넣는 과정이다. 그리고 로그인 버튼을 누르면 form 태그에 대한 request message가 전송되는 것이다... 2020. 5. 22. HTML z-index with background div: relative ul, li: absolute 다음과 같은 구조일 때 ul, li에 background를 사용하면서 ul의 z-index를 사용하면 어떤 결과가 나타날까? li 배경이 보이면서 ul의 배경이 li 배경보다 앞 쪽 레이어에 위치시킬 수 있을까? 답은 이 구조하에서는 그럴 수 없다. 이 상황에서 z-index를 사용해도 stacking context에 영향을 미치지 않는다. 쉽게 말하면 css background 사용시 z-index를 변경하여 "배경을 맨 앞으로 가져오기" 같은 것을 할 수 없다. 차라리, li의 배경을 "맨 뒤로 보내서" ul의 배경만 표시하는 것은 가능하다. 그렇다면 어떻게 하면 될까 ul의 배경에 해당하는 것을 앞으로 가져올 수 있을까? 정답은 ul의 자식이면.. 2020. 5. 20. 이전 1 2 다음