목록개발 공부 (77)

열정 실천

[JavaScript] DOM이 뭔가요? ----- getElementById(), getElementByClassName(), getElementByTagName(), querySelector(), querySelectorAll()

DOM : Document Object Model 브라우저에서 자바스크립트가 html 요소를 제어할 수 있도록 제공하는 API이다. (API에 관한 설명은 아래에_) JavaScript는 html 요소를 추가하거나 변경과 같은 조작을 위해 만들어진 언어이다. 이러한 html파일을 javascript로 어떻게 제어할 수 있을까? 모든 브라우저에는 웹문서를 해석(parding)하는 웹 렌더링 엔진이 있다. 이 렌더링 엔진은 html 코드를 해석하여 모든 요소를 객체화하여 자바스크립트가 접근할 수 있게끔한다. 이렇게 문서를 객체화하였다하여 Document Object Model(문서 객체 모델)이라고 부른다. 이 DOM은 트리 형태로 되어있고 각각의 요소를 노드라고 부른다. 우리는 원하는 노드에 접근하여 변경..
개발 공부/JS 2023. 5. 11. 15:00
[JavaScript] JS 완전 기초 문법 한 방에 끝내기!!

📢 변수 선언 상수 const a = 1; 변수 let b = 2; 📢 데이터 타입 자바에서는 숫자면 int, double, long 다 타입을 지정해줘야하는데 여기서 변수는 다 let으로 지정 1. 숫자 2. string 3. boolean 4. null 5. undefined null은 개발자가 없다고 고의적으로 설정하는 값, undefined는 개발자가 설정하지 않았기 때문에 없는 값 var num = 10; var st = "Hello"; var bool = true; var n = null; var unde; 📢 배열 const arr = [1,2,3,"hi",false, null]; console.log(arr); console.log(arr[3]) //4번째 요소만 출력 arr.push("n..
개발 공부/JS 2023. 5. 9. 14:45
[CSS 009] FLEX 사용법 (여러가지 속성과 속성 값 모음)

가로 배치를 손쉽게 하기 위한 방법으로 Flex (Flexible Box, Flexbox)가 있다. float나 inline-block 을 이용했던 기존 방식보다 훨씬 편리하게 레이아웃을 배치할 수 있다. display: flex; 를 부모 요소에 선언하면 그 안에 있던 자식 요소들은 모두 flex 컨테이너의 item이 된다. 이 flex 아이템들은 가로 방향으로 배치되고, 자신이 가진 내용물의 width만큼만 차지하게 된다. 마치 inline 요소로 바뀌는 것과 같다 height는 컨테이너의 높이만큼 늘어난다. Flex container는 여러가지 속성이 있다. justify-content , align-items, flex-direction , flex-wrap , align-content, flex..
개발 공부/CSS 2023. 4. 6. 19:41
[HTML 005] VSCode HTML 단축키 모음 💥

html 기본틀 ! + enter/ tap 코드 정렬 alt + shift + f 한줄 주석 ctrl + / 여러 줄 주석 alt + shift + a 다중 선택 alt 누른 상태로 선택 해당 커서가 있는 행 삭제 ctrl + shift + k 해당 커서가 있는 행 복사 & 붙여넣기 alt + shift + 방향키 일치하는 텍스트 찾기 ctrl + f 왼쪽 탐색기 창 on/off ctrl + b 해당 커서 행 전체 이동 alf + 위/아래 방향키
개발 공부/HTML 2023. 3. 27. 23:29
[CSS 008] CSS 단위 - px, %, rem/em, vw/vh

스크린 환경에서 크기를 나타내는 적합한 CSS의 단위로 px, %, rem/em, vw/vh 등이 있다. 이들은 크기가 절대 변하지 않는 절대적 단위와 상황에 따라 크기가 변하는 상대적 단위로 나뉜다. 상대적 길이 단위 요소는 상대적인 길이를 지정함으로써 다양한 기기에 적용할 수 있다. 따라서 웹 앱 이나 반응형 웹을 구현하기 위해서는 상대적 단위를 잘 알고 있어야 한다. 절대적 단위 px 스크린을 구성하는 하나의 작은 점 만약 화면의 크기가 1920*1080이면 가로 1920개, 세로 1080개의 px가 있는 것이다. ▶사용 예시 width : 100px height : 100px 상대적 단위 % 부모 요소를 기준으로 비례하여 크기를 설정 ▶사용예시 width : 50% (부모의 width가 100px..
개발 공부/CSS 2023. 3. 23. 21:48
[CSS 007] Box-sizing - 박스에 적용된 사이즈의 기준 정하기

Box-sizing box-sizing은 박스의 크기를 어떤 것을 기준으로 계산할지를 정하는 속성이다. content-box box-sizing: content-box; width: 100px; padding: 10px; ✔ 요소 사이즈에 패딩과 테두리 포함x ✔ 콘텐츠만 100px로 최종 너비는 120px(100px+10px+10px)이 된다. ❗❗ 생각했던 요소의 크기 + ( ) border-box box-sizing: border-box; width: 100px; padding: 10px; ✔ 요소 사이즈에 패딩과 테두리 포함o ✔ 테두리와 패딩까지 합해서 최종 너비 100px 기본값은 내용이 차지하는 영역에만 사이즈가 적용되는 content-box로 생각했던 크기보다 최종 크기가 커지게 하지 않기..
개발 공부/CSS 2023. 3. 23. 21:48
이전 Prev 1 2 3 4 5 6 7 8 ··· 13 Next 다음