웹(web)/프론트엔드-html
-
렌더링 차단 리소스웹(web)/프론트엔드-html 2021. 5. 23. 23:15
페인트 시에 중단되는 경우에 대한 설명이다. 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
-
크롬으로 DOM 디버깅웹(web)/프론트엔드-html 2021. 5. 5. 00:39
기본적인 사용법은 공식 문서에서 확인할 수 있다. 이 글에서는 좋은 기능들을 정리해보고자 한다. 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(화살표)를 활용하면 된다. 다음과 같은 디버거 상..
-
HTML form, input웹(web)/프론트엔드-html 2020. 5. 22. 14:21
웹사이트를 사용하다 보면 로그인이나 회원가입도 하고 검색도 하게 된다. 아래 사진과 같이 검색하는 것도 보았을 것이다. 이런 기능을 구현할 때 form, input으로 구현한다. 위의 코드를 구현하려면 과 같은 구조를 사용하면 된다. form form 태그의 속성으로 request에 대한 목적지인 url, request 방식인 method과 같은 request에 대한 정보를 등록한다. request의 body에 들어갈 데이터는 어떻게 정의할까? 바로 input 태그를 사용하는 것이 대표적이다. 매일 우리가 로그인할 때 아이디와 비밀번호를 입력한다. 이 입력하는 과정이 input 태그에 정보를 넣는 과정이다. 그리고 로그인 버튼을 누르면 form 태그에 대한 request message가 전송되는 것이다...
-
HTML z-index with background웹(web)/프론트엔드-html 2020. 5. 20. 13:57
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의 자식이면..
-
HTML Table웹(web)/프론트엔드-html 2020. 5. 13. 11:58
다음과 같은 형태의 표를 만들고 싶다면 어떻게 해야할까? 태그를 사용하면 된다. table에서 자식 태그로 tr을 쓰면 row가 생성된다. tr의 자식태그로 td를 쓰면 cell 하나씩 만들 수 있다. 위 예제를 만드는 코드는 다음과 같다. css 설명 외측 테두리 선을 위해서 table{border: 1px solid black} table{ padding: 10px} 는 효과가 없음. (border-collapse: collapse 때문에 ) 기본 table이 생성되면 기본 생성되는 모양을 보면 엑셀의 표 형태가 아니다. 이를 위해서 table{border-collapse: collapse} 설정 테두리 내부 선을 위해서 td{border:1px solid} 셀 내부 여백을 위해 td{padding:..
-
html <img> vs css {background-image}(img태그와 백그라운드 이미지 비교)웹(web)/프론트엔드-html 2020. 5. 5. 12:54
두 가지 방법을 활용하여 이미지를 원하는 위치에 구성하면 결과적으로 똑같은 효과를 얻어낼 수 있다. 그러면 둘을 결정하는 기준은 무엇일까? 답은 html과 css의 기본에 있다. html 태그들은 웹 페이지를 구성하는 작은 부분들이다. 따라서, 사용할 이미지가 컨텐츠로 의미를 갖는다면 img태그를 사용하면 된다. 그것이 아니라 디자인적인 필요에 의해 background-image로 사용하면 될 것이다. 프론트엔드 개발 중에 위와 같은 대체 기능이 보이고 고르는 것이 헷갈릴 수 있다. html은 컨텐츠를 구성하는 부분이고 css는 디자인적인 요소임을 인지하면 쉽게 구분해서 사용할 수 있을 것이다.
-
HTML5 tag catecory(html5 태그 분류)웹(web)/프론트엔드-html 2020. 5. 1. 21:12
HTML5의 태그 개수가 50개도 넘다 보니 다 외우는 것이 어렵다. 따라서 기능적인 관점에서 태그를 분류하고 이 분류를 기억하는 것이 기억에 용이할 것이다. 우선 익숙해질 때까지 태그가 어떤 카테고리에 들어갔는지 계속 보다보면 효율적일 것이다. 1. 레이아웃 관련 태그 = 웹사이트의 화면에 컨텐츠를 넣기 위해선 레이아웃을 정하는 것이 선행된다. 상단 메뉴바, 중간 컨텐츠영역, 하단부와 같이 레이아웃을 결정하는 것이 선행되어야 한다. 다른 블로그나 책에서 섹션 태그라고 하면서 여러 태그를 언급하는데 내 생각에는 div면 충분한 것 같다. 왜냐면 각 div 별로 class를 header, main, footer로 나누는 것이 header, section, footer를 쓰는 것과 의미적으로 똑같기 때문이다..