# Elements
DOM, Nodes
웹 개발을 하려면 에 대한 이해가 필요하다. 사실 예전에 리액트 강의를 들으면서 에 대해서도 배운 적이 있지만 열심히 공부를 하지 않아 머릿 속에서 깔끔하게 잊혀졌다. 미래의 나는 이런 일이 일어나지 않도록 작은 개념이라도 꼼꼼히 체크하며 필기를 해나가는 습관을..
[React] Rendering Elements
Elements의 정의와 생김새, Elements의 특징 및 렌더링하는 과정을 학습하여, 시계를 만드는 실습을 통해 Rendering Elements에 대해 알아보자!
[ CSS ] Block과 Inline
✅ Block Elements 문서의 틀(Frame) 가로폭을 자신이 100% 차지해 기본적으로 세로정렬처럼 보인다 width, height, margin, padding 속성을 모두 반영한다 ⭕️ 🙆♀️ ⭕️ * 대표적인 요소 * , , , ~ , , , , , ✅ Inline Elements 틀 안의 내용(Contents) 자기자신의 크기만큼 ...
[기타] 개발자도구-Elements panel
페이지 레이아웃 html 확인스타일(css) 검사 및 편집\-> Elements panal에서 내용 수정해보고 원래 코드에 복사해서 붙여넣기도 한다.section tag는 semantic tag중의 하나로 HTML 문서에 포함된 독립적인 섹션(section)을 정의할
HTML / HTML ElEMENT
HTML(Hyper Text Markup Language)은 페이지에 제목, 문단, 표, 이미지, 동영상 등을 정의하고,그 구조와 의미를 부여하는 정적 언어로 웹의 구조를 담당한다.HTML의 기본 태그 구조는 열린태그와 닫힌태그로 이루어져있다.HTML 빈태그는 닫힌태그
Elements 패널, User agent stylesheet, Styles 순서 및 계산
문서 내의 모든 요소를 정의하고 접근하는 방법을 제공하며 랜더링 된 페이지의 html과 구성요소에게 적용된 css를 볼 수 있는 패널이다. 요소에 적용된 스타일을 검사할 수 있을 뿐만 아니라 수정도 가능하다.위의 이미지에서 볼 수 있듯이 Element 패널을 누르면 h
개발자 도구
Application Panel?현재의 웹페이지에서 사용된 리소스(이미지, 스크립터, 데이터)를 볼 수 있다.데이터베이스, 로컬 & 세션 스토리지, 쿠키, 캐시 등 로딩된 모든 리소스를 검사할 수 있다.스토리지서버가 아닌, 클라이언트쪽에 데이터를 저장할 수 있도록 지원
HTML Elements(요소)
일반요소/빈요소 블록레벨요소/인라인요소 블록레벨요소 => 내용에 관계없이 영역으로 가로줄을 모두 차지하는 요소 보기. hn, p, div, ul, li, ol, table... 인라인요소 => 내용만큼만 영역을 차지하는 요소 보기. a
[Flutter][번역] Flutter internals (1)
출처 : 오리고기님코드를 복사붙여넣기 하는 코더가 되는것 같아 내부적으로 플러터가 어떻게 돌아가는지에 대한 갈망이 항상 있었는데 좋은 글이 있어 읽어보면서 정리하려고 한다.플러터는 내부적으로 어떻게 작동할까?위젯, 엘리멘트, 빌드컨텍스트, 랜더오브젝트, 바인딩이란 무엇
[WEB #9] 개발자 도구(Developer tools)
개발자라면 개발자 도구(developer tools)와 친구가 되어야 한다. 이제 웹 브라우저를 띄운다는 것은 항상 브라우저-개발자 도구로 분할된 화면을 함께 띄운다는 것을 의미한다. 개발자 도구의 다양한 패널 종류과 기능을 파악하고, 친해지기 시작! 개발자 도구(d