# Elements

24개의 포스트
post-thumbnail

웹 브라우저 동작, React 용어, 타입스크립트 개념 정리

웹 브라우저 동작 단계 1. 사용자 요청 사용자가 주소 창에 URL을 입력하거나, 링크를 클릭하거나, 폼을 제출하는 등의 동작을 통해 웹 페이지를 요청합니다. 2. DNS 조회 브라우저는 입력된 도메인 이름(URL)을 기반으로 DNS(Domain Name System) 서버에 해당 도메인 이름을 해석하여 IP 주소를 가져옵니다. 3. TCP 연결 브라우저는 서버의 IP 주소를 기반으로 TCP/IP 연결을 수립합니다. 이 단계에서는 TCP/IP의 핸드셰이크 프로토콜을 사용하여 클라이언트와 서버 간의 안정적인 연결을 설정합니다. 4. HTTP 요청 TCP 연결이 수립되면, 브라우저는 HTTP(Hypertext Transfer Protocol) 요청 메시지를 서버로 보냅니다. 이 요청은 사용자가 요청한 페이지의 종류(HTML, CSS, JavaScript, 이미지 등)와 함께 서버에 전달됩니다. 5. 서버 응답

2023년 6월 11일
·
0개의 댓글
·

HTML_CSS_001_TAG

Tag : 태그 elements : 엘레먼츠 tag 및 contents tag의 종류는 많다 위 4가지는 알고가자 tag의 상속 참고사이트 https://www.w3.org/TR/CSS21/propidx.html

2023년 3월 29일
·
0개의 댓글
·
post-thumbnail

DOM, Nodes

웹 개발을 하려면 에 대한 이해가 필요하다. 사실 예전에 리액트 강의를 들으면서 에 대해서도 배운 적이 있지만 열심히 공부를 하지 않아 머릿 속에서 깔끔하게 잊혀졌다. 미래의 나는 이런 일이 일어나지 않도록 작은 개념이라도 꼼꼼히 체크하며 필기를 해나가는 습관을 가져야 할 것 같다. * DOM : Document Object Model* 맞게 정의하는건지는 모르겠지만, DOM은 계층적 구조를 가지고 있는 노드 트리 형태로써 존재한다고 보면 된다. 종종 상속을 하기도 하고, 수평적인 관계를 이루기도 하고 다양하다. 이렇게 말로만 하면 너무 뻔한지라 간단한 소스코드와 함께 설명하자면, 정말 흔하게 볼 수 있는 HTML 코드이다. HTML은 태그를 감싸는 형태로써 모든 코드가 존재하는데, 태그와 태그 사이에 또 다른 태그 쌍이 존재하면 그것은 하위 태그가 상단 태그의 하위 노드 형태로써 존재한다고 보면 된다. 예를 들어 제일 상, 하단에 존재하는 HTML은 최상단 노드

2023년 3월 11일
·
0개의 댓글
·
post-thumbnail

[React] Rendering Elements

Elements의 정의와 생김새 elements란? 어떤 물체를 구성하는 성분 공식적인 의미 - Elements are the smallest building blocks of React apps. : 리액트 앱을 구성하는 가장 작은 블록들 React Element와 DOM Element의 차이 : 화면에 나타나는 내용을 기술하는 자바스크립트 객체를 일컫는 용어가 필요했음 React Elements는 DOM Elements의 가상표현이라고 말할 수 있음. DOM Elements는 리액트에 비해서 많은 정보를 담고 있기 때문에 상대적으로 크고 무겁다. (이후부터 Elements에 대한 언급은 기본적으로 React Elements를 말하는 것) **Elements는 화면에서 보이

2023년 1월 8일
·
0개의 댓글
·
post-thumbnail

HTML & CSS 2

페이지 레이아웃(Page Layout) 레이아웃 : 웹 사이트의 성격과 목적에 막제 필요한 요소들을을 배치하는 작업 학습 목표 레이아웃을 위한 HTML 구조 만들기 웹 페이지 요소를 정렬하는데 Flexbox에 대한 핵심적 개념과 내용 이해하기 1.레이아웃: 화면을 나누는 방법 1-1) 화면 분할(HTML 구성하기) 대부분의 콘텐츠는 (좌->우) / (위->아래)로 흐른다. CSS로 화면을 구분할 때에는 수직/수평 분할을 차례로 적용해 콘텐츠 흐름에 따라 작업을 진행하자. 수직 분할 : 화면을 수직으로 나눠, 콘텐츠에 요소를 가로 배치 수평 분할 : 분할된 요소를 수평으로 구분해, 내부 콘텐츠 요소를 세로로 배치 (height 속성 추가시 수평 분할이 더 직관적) 1-2) 레이아웃 리셋 때때로 문서가 갖는 기본 스타일이 레이아웃 잡는데 방해가 될 때도 있으며 다음과 같은 사례를 들 수 있다. `<bod

2022년 10월 24일
·
0개의 댓글
·
post-thumbnail

HTML & CSS 1

HTML(뼈대) 1.개요 >들어가기 전 웹 개발 초기는 프론트/백엔드의 구분이 없었으나 웹 개발 기술이 발전함에따라 각 기술들의 내용의 세분화되었다. 따라서 점차 복잡해지는 웹 개발의 영역을 구분해야할 필요성 대두되었다. 이러한 구분에도 불구하고, 각 영영의 개발자는 상대 영역의 기본적인 내용에 대해 인지하고 있어야 하며 이는 웹 서비스는 프론트엔드 개발자와 백엔드 개발자의 협업을 통해 만들어지는 것이기 때문이다. 이 과정에서는 HTML과 CSS에 대해서만 다루도록 한다. HTML은 HyperText Markup Language의 약자로 웹 페이지를 구성하는 마크업 언어 이다. 쉽게 말해 웹 페이지의 프레임(뼈대)를 정해진 규칙대로 기술하며, 전체적인 구조를 담당한다. > 마크업 언어란 태그를 이용해 문서나 데이터의 구조를 명기

2022년 10월 24일
·
0개의 댓글
·

[기타] 개발자도구-Elements panel

Elements panel 페이지 레이아웃 html 확인 스타일(css) 검사 및 편집 -> Elements panal에서 내용 수정해보고 원래 코드에 복사해서 붙여넣기도 한다. 과제 1 - 해당페이지가 몇 개의 section으로 이루어져있나요? section tag는 semantic tag중의 하나로 HTML 문서에 포함된 독립적인 섹션(section)을 정의할 때 사용한다. html을 보면 5개의 section이 있는것을 확인 가능. 추가로 section의 css에 border: 2px solid black; 효과를 주면 가시

2022년 9월 23일
·
0개의 댓글
·
post-thumbnail

시계 만들기

Clock.jsx index.js 1초당 계속해서 엘리먼트가 렌더링 되고 있는 부분을 볼 수 있다.

2022년 7월 21일
·
0개의 댓글
·

Elements란?

Elements? Elelments are the smallest building blocks of React Apps. 리엑트 앱을 구성하는 가장 작은 블록들 리엑트 element는 자바 스크립트의 객체 형태로 존재 ㄴ-> rendering Element 특징 React Elements are immutable. 불변성, Element children이나 attributes를 바꿀 수 없다. Element 렌더링 Root DOM Node index.html index.js

2022년 7월 21일
·
0개의 댓글
·

HTML의 요소 정리

웹 처리 과정 주소창에 주소 입력 서버에 최초 요청 (Request) 서버에서 최초 응답 (Response) 서버에 추가 요청 서버에서 추가 응답 (CSS, Javascript, JPG, 등) 렌더링된 웹페이지 최초 응답에는 HTML을 전송합니다. (가장 먼저 찾는 파일명은 index.html입니다.) HTML은 프로젝트의 기획자입니다. HTML은 프로젝트의 구조를 설계합니다. 메타데이터 콘텐츠 구분 문자 콘텐츠 인라인 텍스트 양식 전역 속성 (Global Attributes) 모든 HTML요소에서 공통적으로 사용 가능한 속성. >### class 공백으로 구분된 요소의 별칭을 지정. CSS 혹은 JavaScript의 요소 선택기(CSS GetElementsByClassName, QuerySelectorAll 같은)를 통해서 요소를 선택하거나 접근. >### id 문

2022년 4월 8일
·
0개의 댓글
·
post-thumbnail

HTML / HTML ElEMENT

HTML HTML(Hyper Text Markup Language)은 페이지에 제목, 문단, 표, 이미지, 동영상 등을 정의하고, 그 구조와 의미를 부여하는 정적 언어로 웹의 구조를 담당한다. HTML의 기본 태그 구조는 열린태그와 닫힌태그로 이루어져있다. HTML 빈태그는 닫힌태그가 없는 태그를 말한다. 속성(Attributes)과 값(Value) 태그(요소)의 기능을 확장하기 위해 '속성'을 사용할 수 있다. 부모와 자식 요소 태그A가 태그B의 콘텐츠로 사용되면, 태그B는 태그A의 부모요소, 태그A는 태그B의 자식요소 라고 한다. ` 은 과 ` 의 부모 요소 ` 과 은 ` 의 자식 요소 ` 은 ` 의 부모 요소 ` 는 ` 의 자식 요소 `

2022년 4월 6일
·
0개의 댓글
·
post-thumbnail

TIL-HTML(태그)

22.04.06 HTML `~` 태그(tag) > `~` 태그는 HTML 문서에서 제목(heading)을 정의할 때 사용합니다. ` 요소가 가장 중요한 제목을 정의하고, ` 요소가 가장 덜 중요한 제목을 정의합니다. ex) ▷ HTML new line tag 텍스트안에 줄바꿈을 생성합니다. 주소나 시조 등 구분이 중요한 내용을 작성할 때 유용합니다. > `` 요소는 텍스트를 끊고 싶은 지점에 삽입해야 합니다. 텍스트 블록에서 줄을 바꾼다는 하나의 명확한 목적만 가지고 있으며, 크기도, 외형도 없으므로 스타일을 적용할 것도 없습니다. ▷ HTML paragraph tag > P는 paragaph의 약자로 문단을 의미합

2022년 4월 6일
·
0개의 댓글
·
post-thumbnail

TIL-HTML(텍스트 강조,밑줄긋기)

22.04.05 HTML이란 > -Hypertext Markup language의 약어로 웹 페이지와 그 내용을 구조화하기 위해 사용하는 코드입니다. -HTML은 프로그래밍 언어가 아닙니다. 컨텐츠의 구조를 정의하는 마크업 언어입니다. -HTML은 컨텐츠의 서로 다른 부분들을 씌우거나 감싸서 다른 형식으로 보이게하거나 특정한 방식으로 동작하도록 하는 일련의 요소(elements)로 이루어져 있습니다. ▷ 텍스트 강조하기(Strong) > Strong 요소는 콘텐츠 자체의 중요성을 강조할 때 사용됩니다. ▷ 텍스트 밑줄긋기(Underline) > `Underline<

2022년 4월 6일
·
0개의 댓글
·
post-thumbnail

Elements 패널, User agent stylesheet, Styles 순서 및 계산

Elements 패널이란? > 문서 내의 모든 요소를 정의하고 접근하는 방법을 제공하며 랜더링 된 페이지의 html과 구성요소에게 적용된 css를 볼 수 있는 패널이다. 요소에 적용된 스타일을 검사할 수 있을 뿐만 아니라 수정도 가능하다. Elements 패널의 기능 및 사용법 위의 이미지에서 볼 수 있듯이 Element 패널을 누르면 html과 css 스타일을 확인할 수 있다. ![](https://images.velog.io

2022년 3월 4일
·
0개의 댓글
·
post-thumbnail

Chrome Devtools - Elements

devtools를 항상 켜두고 작업을 하면서 아는 기능만 계속 사용하고 있다는 사실을 깨달았다. 더 많은 기능을 사용하기 위해 한 번 싹 흝어보는 시간을 가져보며 포스팅을 작성한다. 오늘은 Elements 탭에서의 기능들, CSS 관련 기능들을 짚어보는 내용을 위주로 작성할 예정이다. Chrome Devtools Devtools 열기 우선 너무나 당연하게도 Devtools을 여는 것부터 시작한다. mac에서는 ⌥ + ⌘ +i 를 통해서 열 수 있다. 마우스 오른쪽 버튼을 통해서 inspect를 통해서도 가능하다. windows에서는 Control+Shift+i 통해 개발자도구를 열 수 있다. Elements tab 요소 선택하기 ![Chrome Devtools selec

2021년 12월 3일
·
0개의 댓글
·

개발자 도구

개발자 도구 개발자가 프로그램을 만들고, 오류를 고치고 유지보수할 때 사용하는 프로그램이다. elements panel HTML마크업, CSS 의 구조 및 동작 확인 태그나 속성들을 수정 가능, 주로 스타일 수정(내가 보는 화면에서만 수정되고 실질적인 변경은 아니다!) 개발 시, 코드에 바로 적용하기 보다는 패널에서 먼저 수정해서 확인 해본다. 위에 있는 것부터 우선순위를 받아서 적용되고 있다, 아래로 갈수록 우선순위는 낮은 속성.. user agent style sheet 브라우저의 기본값, 기본 스타일! 브라우저 마다 다르기 때문에 동일하게 표현되게 하기 위해서 보통 이 스타일을 초기화하고 시작한다. console panel 자바스크립트 코드를 작성,실행해 볼수 있는 패널 출력되는 메시지에 대한 표시 제어를 할 수 있다.(warning, error등) _이게 메인 용도라고 볼수 있다. (API로 데이터를 받아왔을 때에도 찍어볼 수 있다.) preserve

2021년 12월 3일
·
0개의 댓글
·
post-thumbnail

TIL 4 : inline, inline-block, float

11/5 >🏁 짧은 TIL 가상 클래스 선택자는 클래스와 같은 우선순위 점수를 가짐! CSS에 문자기호 사용을 위해선 유니코드를 사용해야한다. 멋사배 캐릭터 웹 디자인 대회 우수상~ 📔 inline과 inline 블록 inline width 적용 안됨 ``는 예외적으로 width를 가지는 inline 요소 margin-top, bottom 적용안됨 inline안에 block요소 추가 불가능 vertical align은 인라인 요소에만 적용된다. >🏁 안녕하세요 이렇게 html이 있으면 내부 내용인 안녕하세요는 각각 인라인으로 취급된다. inline-block 자체적으로 3~4픽

2021년 11월 7일
·
0개의 댓글
·
post-thumbnail

Weekly I Learned(2주차) - 개발자도구(DevTools)

✔ 개발자도구란 무엇인가? 브라우저에 제공하는 하나의 도구이다 웹 사이트를 즉각적으로 수정하고 문제의 원인을 파악하여 빠른 속도로 더 나은 사이트를 만들 수 있도록 도와준다. 개발자도구를 사용할 수 있는 방법은 브라우저에서 F12(윈도우) 또는 command+option+i(맥) 키를 눌러 사용할 수 있다. > ✔개발자 도구에는 어떤 기능이 있을까? 여러가지 패널(tab)이 존재하지만 자주 사용 하는 패널들이 따로있다. 그렇기 때문에 내가 얻고자하는 정보에 맞게 적절한 패널을 찾아 사용하면 된다. 자주 사용하는 패널의 종류 1. Elements panel 2. Console panel 3. Network panel 4. Application panel > ✔ Elements panel 기능

2021년 9월 11일
·
0개의 댓글
·
post-thumbnail

HTML Elements(요소)

👩‍💻 일반요소 / 빈요소(Empty Elements) 일반요소 (Elements) 내용 빈요소 (Empty Elements) 내용과 종료태그가 없음 👩‍💻 블록레벨요소(Block-level Elements) / 인라인요소(Inline Elements) 블록레벨요소 내용에 관계없이 가로줄을 모두 차지하는 요소 ex) hn, p, div, ul, li, ol, table... 인라인요소 내용만큼만 영역을 차지하는 요소 ex) a, img, span, em, b, input... 👩‍💻 요소의 중첩 요소는 중첩 될 수 있다 = 요소는 다른 요소를 포함

2021년 8월 10일
·
0개의 댓글
·

[Flutter][번역] Flutter internals (1)

출처 : 오리고기님 목적 코드를 복사붙여넣기 하는 코더가 되는것 같아 내부적으로 플러터가 어떻게 돌아가는지에 대한 갈망이 항상 있었는데 좋은 글이 있어 읽어보면서 정리하려고 한다. 내용 플러터 내부구조 플러터는 내부적으로 어떻게 작동할까? 위젯, 엘리멘트, 빌드컨텍스트, 랜더오브젝트, 바인딩이란 무엇일까? 1부:사전지식 디바이스에서 앱을 실행하면 화면이 표시된다. 화면은 픽셀들이 모여있는것이고, 디바이스는 화면을 통해 터치한 손가락의 위치를 인식한다. 이러한 상호작용으로 디바이스는 사용자에게 시각적인 효과를 제공한다. 사용자 이벤트 네트워크 애니메이션 다른 외부 센서 화면의 이미지랜더링은 디스플레이 하드웨어가 담당한다. 하드웨어는 초당60회 간격으로 디스플레이를 새로 고침합니다. 단위는 Hz 입니다. 디스플레이 장치는 GP

2021년 8월 3일
·
2개의 댓글
·