# element

73개의 포스트

script

The script HTML element is used to embed executable code or data. > script HTML 요소는 실행가능한 코드 또는 데이터를 집어 넣는 데 사용된다. This is typically used to embed or refer to JavaScript code. > _ 전형적으로 자바스크립트 코드에 집어 넣거나 참조할 때 사용된다._ async src This attribute specifies the URL of an external script; >_ 이 속성은 외부 스크립트의 URL을 특정짓는다. _ charset It's unnecessary to specify the charset attribute, because documents must use UTF-8, and the script element inherits its character encoding from the documen

2023년 8월 7일
·
0개의 댓글
·

<input>

The input HTML element is used to create interactive controls for web-based forms in order to accept data from the user. > _ 인풋 HTML 요소는 유저의 데이터를 받도록 웹 베이스의 형식을 위한 상호작용 제어를 만드는 데 사용된다. _ Attributes The input element is so powerful becasue of its attributes; > 인풋 태그는 그 자체 속성때문에 강력함을 갖는다 alt : alt attribute for the image type. src : Valid for the image input button, only the src is string specifying the URL of the image file to display to represent the graphical

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

html 문서 앞에 <script> 태그 내에 js코드를 작성

html 문서 앞에 script 태그 내에 js코드를 작성했고, 문서가 로드 되기 전에 script의 element를 가져오지 못한 상태에서 console.log로 디버그하여 개발자도구에 확인해보았을때는 왜 element를 가져와졌는지 이유에 대해서 알아보기. 코드 예시 문서의 script 태그가 head 요소 내에 위치하여 문서가 아직 전부 로드되기 전에 JavaScript 코드가 시작되었습니다. 이로 인해 getElementsByTagName의 결과로 가져오려고 하는 li 요소들이 아직 없을 수 있습니다. 요약하면, 문서 앞에 위치한 script 태그는 문서가 완전히 로드되기 전에 실행되므로 오류가 발생할 수 있습니다. 해결법 head 안의 script 태그 대신, body 태그 끝부

2023년 7월 31일
·
0개의 댓글
·
post-thumbnail

요소(element)와 태그(tag)

요소(element)와 태그(tag) 요소(element)의 구조 요소는 시작태그와 컨텐트, 그리고 종료태그로 정의된다. 요소와 태그를 혼용해서 쓰는 경우가 많아 문맥에 따라 이해하면 되고, 요소가 태그를 포함하는 좀 더 큰 개념이라고 생각하면 된다. 태그(tag) HTML의 태그들은 민감하지 않다. `를 쓰던 `를 쓰던 상관이 없다. 하지만 W3C에서는 소문자 태그를 권장하니 되도록이면 소문자로 쓰도록 한다. 태그를 작성할때 종료태그를 반드시 작성한다. `` 태그에 css를 추가해서 테두리와 크기, 그리고 간격을 추가할 수 있다. `` : 줄 바꿈 태그이다. `` : 특정 구역을 정의할 때 쓰인다. block요소 `<textare

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

HTML 태그 2가지로 분류하기

HTML 태그 종류는 아주 많지만 크게 두 종류로 나누고 이것을 대비 시킬 수 있다. HTML의 태그 1. element과 container element(요소) : 낱개 하나 하나 container : element를 담는 박스나 포장용기 같은 것. ✨container는 semantic tag랑 유사한 것 같다. 컨테이너가 더 큰 범위인건 안다. 2. block과 inline 블록 : 내용이 있어도 없어도 박스 통째로 해당 라인을 박스 칸으로 유지한다. 인라인 : 크기가 컨텐츠 길이 만큼이다. ✨이것과 별도로 언어를 배울 때는 (마크업 랭기지도 랭기지임ㅋㅋ) 항상 MDN 공식문서 확인해서 공부해야한다. 책으로 공부하기엔 세상은 너무 빨리 변하고 원하는 부분만 공

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

HTML element

01 HTML element 01-1 block element 대부분의 element(요소)는 block 요소이다. block요소는 해당 요소의 전체 가로 넓이를 모두 포함해, 따로 스타일을 적용하지 않으면 이 요소 옆에 다른 요소를 붙여 넣을 수 없다. 다음은 block요소에 해당하는 태그들이다. > , , 등 02 Display 02-1 display: block; / inline; 위에서 언급한 것과 같이 html 요소들에는 각각의 성격이 정해져 있다. 하지만 작업을 하다보면 block 요소를 가진 객체들을 나열해야 할 상황도 있고, inline 요소를 쌓아서 표현하고자 할 때도

2023년 4월 9일
·
0개의 댓글
·
post-thumbnail

Html(Hypertext Markup Language)

01HTML HTML은 웹 페이지를 만들기 위한 언어이고, 구조를 잡아주는 역할을 한다. 브라우저는 HTML을 가지고 뭘 어떻게 그리고 만들어 줘야 할지 파악 한 뒤 웹 페이지를 생성한다. 02 HTML 확장자 HTML은 .html 확장자가 붙은 텍스트 파일로 파일 이름은 원하는 대로 지정할 수 있다. > index.html, main.html, login.html 03 HTML tag html에 표현되어 지는 모든 내용물은 태그에 감싸져 있다. 어떤 이미지나 텍스트, 컨텐츠를 표현하기 위해서는 그에 맞는 태그가 필요하다. 웹 브라우저가 제대로 인식하고 표현하기 위해서는 알맞는 태그를 사용해야 한다. 태그를 작성할 때는 로 묶어서 표현한다. 태그는 시작하면 마무리를 꼭 해야한다. 시작태그와 종료태그가 나누어져 있다는 의미이다. 그러나 시작과 동시에 종료되는 태그도 있다. > 시작 태그와 종료 태그 >시작과 동시에 종료되는 태

2023년 4월 9일
·
0개의 댓글
·
post-thumbnail

배열

학습 목표 자바스크립트에서 배열의 선언에 대해 알 수 있다. 배열에서 요소 (element), 길이 (length)가 무엇을 의미하는지 알 수 있다. 배열에 요소를 추가할 수 있다. 배열의 길이를 이용해 요소가 몇 개 있는지 확인할 수 있다. 배열 > 배열이란? = 자바스크립트에서 다수의 값을 한 번에 다룰 수 있는 자료형으로 다수의 값을 담을 수 있는 커다란 상자와 같다. // 대괄호 [ ] 안에 여러 개의 값이 들어가 있는 형태다. 각각의 값을 요소 (element)라고 한다. 요소와 요소는 ','로 구분한다. // 이전에 공부한 변수를 선언하고 할당하는 방법은 하나의 변수에 하나의 값만 넣었다. (변수에 대한 게시글 참고) 만약, 다수의 값을 하나의 변수에 할당

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

[Vue] Dom Template에서는 Self-Closing Tag를 사용하면 안된다.

참고자료 - Vue2 공식 문서 참고자료2 - Github Element+ Issue Element+ 의 Table을 제작하던 중 문제가 생겼다. 나는 .vue 파일이 아니라 CDN에서 직접 vue를 다운로드받아 페이지를 생성하고 있었는데, Table 생성 예제를 그대로 복사해서 실행했더니 아래와 같이 테이블이 잘못 표시되는 문제가 생겼다. 잘못 나온 테이블 정상적으로 표시될 경우 아래와 같이 나와야 한다. !

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

HTML 문법 정리 (tag, element, attribute, table, semantic markup, content model)

강의 boostcource HTML element reference > HTML (Hyper Text Markup Language) 웹페이지를 만들 때 사용되는 언어 Hyper Text: 웹페이지의 특정 부분과 연결할 수 있는 기능을 가진 텍스트 == link Markup 언어 특징: 정보를 구조적으로 표현 가능 두 칸 이상의 공백 Ignore > 주석 작성 > 태그(tag)들의 집합 태그(Tag) tag: 이름표 로 표현됨 시작 태그와 종료 태그로 구성, 종료 태그 이름 앞에 '/' 기호 들어감 > 태그 중첩 가능 → 중첩되는 태그는 부모 태그 내부 에 있어야 함 >

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

HTML과 Javascript의 상호작용

document Javascript에서 html을 표현하는 object를 가져옴 document에서 항목들을 가지고 오는 것 document 항목들을 변경 document.getElementById("") string을 전달받음, HTML에서 id를 통해 element를 찾아줌 console.dir() console.log보다 element를 더 자세하게 보여줌 title.innerText= ""; javascript로 html내의 요소들 수정 ![](https://velog.velcdn.

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

[jQuery] 제이쿼리 정리 1 (+스크립트 언어, 컴파일 언어, 인터프리터 언어, scss, bem)

제이쿼리의 특성 엘리먼트 선택 및 제어에 용이 > $(css 셀렉터).메소드() > ex) . -> class / # -> id 해당 css 셀렉터가 가리키는 모든 엘리먼트에 원하는 메소드(jquery가 제공하는 api)를 동작시킬 수 있습니다. 그리고 모든 제이쿼리 메소드들은 해당 메소드가 동작을 마치고 리턴될 때 자신이 제어했던 엘리먼트를 리턴하기 때문에, 메소드를 연속적으로 꼬리를 무는 것처럼 연결해서 사용할 수 있습니다. 이를 '체인'이라고 부릅니다. 크로스 브라우징 이슈 해결 웹 브라우저에 따라 지원해주는 메소드 및 api가 달라서 발생하는 이슈를 제이쿼리가 알아서 처리해주는 기능이 있습니다. 오늘의 개발지식 스크립트 언어 스크립트 언어는 응용 소프트웨어를 제어하는 컴퓨터 프로그래밍 언어를 의미합니다. 스크립트 언어는 응용 프로그램과 독립적으로 사용되며, 응용 프로그램을 구성하고 있는 언어와도 다른 언어로 사용되어, 최종 사용자가 응용

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

HTML - 시작!

HTML > 저는 HTML로 코딩하는 것을 좋아합니다.😀 HTML은 Hypertext Markup Language의 약자이며 이름에서 확인할 수 있듯 마크업 언어입니다. 네, 프로그래밍 언어가 아니죠? 코딩은 프로그래밍 언어를 사용하는 것이니 틀린 말이라고 할 수 있겠네요. 마치 맷돌을 어이 대신 가래떡을 꽂아 돌리겠다고 하는 것처럼 말이죠!😂 HTML은 웹 페이지의 구조를 여러 요소들을 사용해서 문서화하는 마크업 언어입니다. HTML 문서를 브라우저가 해석해서 우리가 볼 수 있도록 화면에 띄워주게 됩니다. Element HTML에는 많은 요소들이 있습니다. 요소는 어떻게 이루어져있을까요?🤔 ![](ht

2023년 3월 8일
·
0개의 댓글
·

[React] Video Element 삽입하기, 동영상 재생속도 조절 등

웹페이지의 배경을 이미지가 아닌 동영상으로 삽입하고 싶었다. 로컬에 있는 동영상 video element로 불러오기 동영상의 오디오 무음, 자동재생, 반복재생 및 재생속도 조절 필요 위와 같이, setPlayBackRate이라는 동영상 속도 조절을 위한 함수를 생성했다. useRef를 이용하여 동영상 속도 조절은 playbackRate = "재생속도"로 할 수 있다. *재생속도: 0.5 (0.5배속), 1.0 (기본 배속), 2.0 (2배속) video element에 onCanPlay Prop을 추가하여 해당 함수 삽입하면 동영상 재생이 준비가 되면 함수를 호출하는 이벤트가 발생한다. 또한 source의 src는 로컬에 있는 동영상을 import하여 넣어주었다. >💡 사용한 Video element properties muted: 오디오 무음 autoPlay: 자동 재생 loop: 반복 재생 onCanPlay: 지정된 동

2023년 2월 10일
·
0개의 댓글
·
post-thumbnail

[JavaScript] 배열 (Array)

1. 배열 (Array) 배열은 여러 데이터 타입을 담으며 배열 내에는 어떠한 데이터 타입이든 포함될 수 있다. 특히 배열 안에 다른 배열이 포함될 수도 있다. 대괄호를 사용하고, 쉼표로 요소들을 구분한다. 랭킹과 같은 순위, 또는 순서가 있는 값을 만들 경우 객체보다 배열이 보다 간결하고 효율적이다. 단순히 여러 값의 묶음이 필요할 때도 활용 가능하다. 배열은 객체에 해당한다. 2. 요소 (element) 배열 내 각 데이터 3. 순서(index) 일반적으로 세는 방식과 달리 0 부터 순서를 메긴다. ex. let myArray = [3, 25, 'people', true] 에서 3은 첫 번째가 아닌 0번 인덱스에 해당 객체와 비교했을 때 프로퍼티 네임의 역할 4. 요소에 대한 접근 인덱싱(indexing) - 인덱스를 통해 요소에 접근 접근하려는 배열 이름 뒤에 대괄호를 적은 후 대괄호 안에 접근하고자 하는

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

node와 element 차이,비교

😎DOM이란? > document Object Model이라 불리는 object객체이다. document를 객체 형태로 구현했다고 보면 된다. ❓javascript node란? > 태그노드와 텍스트 노드 전체를 말한다. ❓javascript Element는? > 텍스트 노드를 제외한 태그만을 말한다. 그래서 우리가 보통 자바스크립트로 작업하는건 element를 말하는것. 알기 쉽게 그림으로 직접 정리해봤다.

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

[TypeScript] TypeScript로 HTML 조작하기

TypeScript와 함께 HTML을 조작해보쟈 일단 tsconfig.json 파일에 "strictNullChecks" : true를 추가해 null타입에 대한 엄격한 체크를 해주자 html문서의 'title'이란 id를 가진 요소의 innerHTML을 변경해보자 > let title = document.querySelector('#title'); title.innerHTML = 'Hello!!' &nbsp;&nbsp;&nbsp;// 오류!!! 코드를 입력하면 오류가 나는것을 확인할 수 있음 오류문을 살펴보면 title의 타입이 (Element | null)로 지정되어있음을 확인할 수 있음 이 말인 즉 type narrowing이 필요하다는 뜻!! ✅ type

2022년 12월 23일
·
0개의 댓글
·

ForEach Ui Element

UiPath Studio -v 22.10.4 UiPath.UIAutomation.Activities = 22.10.4 >ForEach Ui Element 👻 LI, UL, Table 등 반복적인 하위 자식 엘리면트 노드들을 순차적으로 가져옴 타입 UiPath.Core.UiElement인 변수을 통해 Click 등 작업수행 Element선택시 바뀌는 Selector Filter기능이 없음 ChildrenElement 선택 하는 부분 없음 잘 정의된 화면 에서는 문제없을 것 같으나, 세부옵션 정의 기능이 부족해서 오류시 불편함. 기존 FindChildren 의 Scope 옵션의 다음 기능 활용 하여 Filter 정의하는 게 나을듯 FIND_CHILDREN FIND_DESCENDANTS 참고 https://forum.uipath.com/t/find-childr

2022년 12월 14일
·
0개의 댓글
·
post-thumbnail

Front-end 국비지원 #039일

반응형 페이지 1-5 > 결과 > HTML > CSS >Script bx slider (슬라이더) >오늘 만든 슬라이드 중에서는 'bx slider'를 이용하여 슬라이드를 구현하였다. 'bx slider' 사용법을 알아보자 bx slider 사용법 > 1. bx slider 를 검색하여 https://bxslider.com/ 에 들어간다. > 2. Examples 을 선택한다. ![](https://velog.velcdn.com/images/nuyhes/post/346f010e-900f-43e

2022년 12월 11일
·
0개의 댓글
·
post-thumbnail

[javascript] 문서객체 조작/생성하기 (DOM)

문서객체 조작하기 element와 DOM 이란 ? >HTML에 있는 각 택들을 우리는 '요소' (element) 라고 부릅니다. 이를 자바스크립트에선 '문서객체' 라고 함 이러한 요소, 문서객체를 조합해서 만든 전체적인 형태를 우리는 "DOM" 이라고 한다. DOM & DOM tree > 위의 이미지에서 는 의 자식요소 이며, 은 의 부모 요소이다 문서객체의 조작이란 ? >HTML의 요소를(태그) 조작한다 라는 의미이다. 여기서 우리가 배우는 리엑트는 문서객체를 원활하고 편리한 조작을 위해 사용하는 라이브러리이며, 리액트 말고도 제이쿼리 등이 있다! 이벤트란? >이벤트(event) 는 어떤 사건을 의미한다. 브라우저에서의 이벤트란 사용자가 버튼을 클릭했을때,

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