분류 전체보기138 JQuery는 무엇 JQuery는 무엇이며, 이 언어로 뭘 할 수 있는지 가르쳐 줘. JQuery는 HTML의 클라이언트 사이드 조작을 단순화 하도록 설계된 크로스 플랫폼의 자바스크립트 라이브러리입니다. 거의 모든 웹 브라우저에 대응할 정도로 브라우저 호환성이 있으며, 존 레식이 2006년 뉴욕 시 바캠프에서 공식적으로 소개하였다. JQuery는 자바스크립트와 동일한 문법을 사용하여 HTML의 요소를 선택하고, 이벤트를 처리하고, 애니메이션을 구현하고, Ajax 통신을 수행하는 등 다양한 작업을 수행할 수 있습니다. JQuery를 사용하면 다음과 같은 작업을 수행할 수 있습니다. * HTML의 요소를 선택하고 조작합니다. * 이벤트를 처리합니다. * 애니메이션을 구현합니다. * Ajax 통신을 수행합니다. * 웹 페이지를 .. 2023. 8. 20. 작업용 조립PC 또는 워크스테이션 구성 (250만 원 / 740만 원) Excell, Word, Powerpoint, Google Sheet, Google Docs 같은 사무 작업 Photoshop, Illustraition, Figma 같은 이미지 편집 작업 Sketchup, Fusion360, CAD, Bleder 같은 3D 설계 또는 3D 모델링 작업 Javascript, React, Node.js 등을 활용한 프로그래밍 또는 코딩작업 Phython, Spacy, Pandas 등을 활용한 프로그래밍 또는 코딩작업 C++, Webassembly, Electron, React-native 등을 활용한 프로그래밍 또는 코딩작업 Dart, Swift, Kotlin, Golang, Rust 등을 활용한 프로그랭 또는 코딩작업 sql, Mysql, MongoDB, Couchbas.. 2023. 8. 20. 요즘 웹개발 [코딩애플] https://youtu.be/ZM55pce2AkY 2023. 8. 3. [필기] 자바스크립트 기초 입문 강의 30분 │조코딩 https://youtu.be/E-PzX2mKGUQ?t=317 JavaScript 코드를 간단히 테스트하려면 1. 웹브라우저(크롬)을 켠 다음, 2. 마우스 우클릭 > 검사 Ctrl+Shift+J 3. 콘솔 클릭 4. REPL 방식으로 코드를 테스트할 수 있다. ☆ 아랫줄로 이동하기 위해서는 Shift+Enter를 친다. 5. 한 개의 명령이 끝나면 세미콜론(;)을 찍는다. (안 찍어도 동작하기도 함. 그래도 찍는 버릇이 좋다.) ☆ 브라우저 콘솔에서는 '수정'은 안 된다. 다만, 위-아래 화살표를 눌러서 덮어쓰기 해서 다시 쓸 수는 있다. 6. console.log();는 '프린트' 하고 비슷한 건데, 내장함수로써 콘솔에 결과를 출력할 때 쓴다. REPL에 대해 설명해 줘. 더보기 물론, REPL에 대.. 2023. 8. 3. 단, 내가 구축하고자 하는 그리드는 뷰포트의 크기에 따라 줄어들거나 새로 생성되도록 해야 해. 내가 자바스크립트로 I/O 페이지를 구축한다고 치자. 내가 구축하고자하는 I/O 페이지 안에는 기본적으로 각각의 개별 컨턴츠의 '위치'를 파악할 수 있도록 그 기준이 되는 그리드를 (바탕으로) 가지고 있다고 치자. 그런 그리드를 구축하기 위해 CSS를 이용하는 게 좋니? 아니면 별도의 함수(javascipt)로 그리드 생성 함수를 따로 만드는 게 좋니? (단, 내가 구축하고자 하는 그리드는 뷰포트의 크기에 따라 줄어들거나 새로 생성되도록 해야 해.) Bard 그리드를 구축하기 위해 CSS를 이용하는 것이 좋습니다. CSS는 HTML 요소의 스타일을 지정하는 데 사용되는 언어로, 그리드를 쉽게 구축할 수 있는 다양한 기능을 제공합니다. 예를 들어, `display: grid` 속성을 사용하여 요소를 그리드.. 2023. 8. 2. JavaScript의 주요 내장함수(built-in function) '내장함수'라는 건, 개발자들이 자주 사용하는 함수를 API로 제공하는 거지? Bard 네, 맞습니다. 내장 함수는 개발자들이 자주 사용하는 함수를 API로 제공하는 것입니다. 내장 함수는 JavaScript 엔진에 내장되어 있으며, 별도의 설치 없이 사용할 수 있습니다. 내장 함수는 JavaScript의 표준에 명시되어 있으며, 모든 JavaScript 구현은 이 표준을 준수해야 합니다. 내장 함수는 개발자들이 자주 사용하는 함수를 제공함으로써, 개발자들이 코드를 쉽게 작성하고 유지할 수 있도록 도와줍니다. 예를 들어, `console.log()` 함수는 콘솔에 값을 출력하는 함수로, 개발자들이 디버깅을 쉽게 할 수 있도록 도와줍니다. 내장 함수는 JavaScript의 표준에 명시되어 있기 때문에, 모.. 2023. 8. 2. JavaScript의 기본 문법 JavaScript의 작성법(=문법)에 대해 요약해 줘. chatGTP3.5 자바스크립트의 기본 문법과 작성법을 상세히 설명하겠습니다. 변수 (Variables): 변수는 값을 저장하기 위해 사용되는 식별자입니다. 자바스크립트는 변수를 선언할 때 var, let, const 세 가지 키워드를 사용할 수 있습니다. - var: 과거에는 주로 사용되었으나, 블록 스코프를 지원하지 않아서 권장되지 않습니다. (대신 let 사용이 더 권장된다.) var x = 10; - let: 블록 스코프를 지원하며, 변수의 값을 변경할 수 있습니다. let y = 20; - const: 블록 스코프를 지원하며, 상수를 선언할 때 사용되며 값의 변경이 불가능합니다. const PI = 3.14; 데이터 타입 (Data Typ.. 2023. 8. 2. 트위터나 페이스북의 컨텐츠는 일반적인 구글검색에 노출되지 않잖아. 그 이유는 뭐지? 트위터나 페이스북의 컨텐츠는 일반적인 구글검색에 노출되지 않잖아. 그 이유는 뭐지? Bard 트위터나 페이스북의 컨텐츠가 일반적인 구글검색에 노출되지 않는 이유는 다음과 같습니다. * 트위터와 페이스북은 공개 API를 제공하지 않기 때문에 구글 검색 엔진이 트위터와 페이스북의 컨텐츠를 크롤링하고 색인화할 수 없습니다. * 트위터와 페이스북은 컨텐츠의 공개 범위를 제한할 수 있습니다. 예를 들어, 트위터 사용자는 자신의 트윗을 공개, 친구만 볼 수 있도록, 또는 팔로워만 볼 수 있도록 설정할 수 있습니다. 페이스북 사용자는 자신의 게시물을 공개, 친구만 볼 수 있도록, 또는 특정 그룹만 볼 수 있도록 설정할 수 있습니다. * 트위터와 페이스북은 컨텐츠의 수명이 짧습니다. 트위터의 트윗은 보통 몇 분 만에 .. 2023. 7. 31. 메인 페이지에서 서브 파일을 불러오는 방법은 index 파일 따로, 거기에 포함된 서브 파일 따로 작성하는 모듈화 방식을 사용할 때, 메인 페이지에서 서브 파일을 불러오는 방법은 무엇인가? chatGTP3.5 HTML에서 모듈화를 위해 다른 파일에 포함된 서브 파일을 불러오는 방법은 여러 가지가 있습니다. 아래에 가장 일반적으로 사용되는 세 가지 방법을 설명하겠습니다. 1. iframe을 사용한 방법: iframe은 현재 페이지 안에 다른 HTML 페이지를 삽입하는 데 사용됩니다. ```html Main Page Content ``` ```html Sub Page Content ``` 위의 예제에서, `index.html` 파일에서 iframe 태그를 사용하여 `subfile.html`을 불러옵니다. 2. object 태그를 사용한 방법: obje.. 2023. 7. 31. 모듈화된 상태에서의 CSS 선택자 방법 index.html이 따로 작성된 header.html과 style.css 파일을 호출하고 있어. 내 질문은 이런 거야. header에 flexbox가 선언되었는데, 내가 테스트 해 보니, header { display: flex; } 이렇게 쓰는 것과 #headerContainer { display: flex;} 의 결과가 동일한데, 어느 작성법이 더 나은 작성법이야? chatGTP3.5 두 가지 작성법인 `header { display: flex; }`와 `#headerContainer { display: flex; }`는 결과적으로 동일한 효과를 가집니다. 그러나 두 방법은 사용하는 컨텍스트에 따라 선호되는 방법이 다를 수 있습니다. 이에 대한 간단한 설명은 다음과 같습니다: 1. `header {.. 2023. 7. 29. fetch() API, 모듈화의 장점 이때 fetch() API를 사용하는 게 최선이라고 한다. 문법 구조는 아래와 같다. DOCTYPE html> Custom-made Request Form // Fetch API를 사용하여 header.html 파일 가져오기 fetch('header.html') .then((response) => response.text()) // 가져온 파일을 텍스트로 변환 .then((html) => { // 변환된 텍스트를 header 요소에 삽입 const headerContainer = document.getElementById('headerContainer'); headerContainer.innerHTML = html; }) .catch((error) => { console.error('Error fetch.. 2023. 7. 29. retry 1 - content와 aside(=ad)를 나누고 flexbox를 적용 가장 큰 덩어리를 본문(content)와 우측 광고가 실릴 부분 ─ 이렇게 2개로 나눔. DOCTYPE html> Custom-made Request Form 내용 광고 CSS에서 플렉스박스를 적용하면, 디폴트인 가로로 배열됨. content width를 뷰포트의 75%로 지정. .total { display: flex; } .content { border: 1px solid black; width: 75vw; } 2023. 7. 29. 텍스트든 이미지는 해당 컨텐츠를 컨테이너 중앙에 배치하려면 일단 flexbox를 선언한 다음. align-itmes와 justify-content를 이용한다. 그럼 이렇게 텍스트나 이미지가 중앙에 배치된다. 2023. 7. 28. 컨테이너 또는 박스에 컨텐츠를 맞추려면? ★ 부모 컨테이너의 사이즈(높이)를 지정한 다음 그 자식 컨테이너를 100%로 한 다음, 해당 컨텐츠(이미지)까지 비율로 맞춰줘야 함. 이렇게 실제 컨텐츠(이미지)까지 조정해야, 내가 원하는대로 박스 안에 컨텐츠가 들어맞게 되는구나. 너 이것도 모르는 아이니? chatGTP 사과드립니다. 이전에 제공한 답변에서 실수를 하였습니다. 확인해보니 주어진 코드에는 이미 `height: 100%;`를 사용하여 `.header1`과 `.header1 img`를 높이를 부모 요소인 `header`에 맞게 설정하고 있었습니다. 따라서 코드 상에서 이미지가 부모인 `.header1`의 높이를 딱 맞추도록 설정되어 있으며, 부모 요소인 `header`의 높이가 `10vh`로 설정되어 있기 때문에 이미지도 높이 `10vh`에 .. 2023. 7. 28. 전체 구획 및 logo 부분, 중앙 정렬 및 간격 주기│의뢰서 단계별 갈무리 1-2 종류 선택 테이블,탁자 책상 책장,책꽂이 수납장,서랍장 의자,벤치 침대 캠핑용 기타 스타일 선택 클릭 맞춤제작 견적의뢰서 메인1 메인2 메인3 메인4 메인5 디자인 디자인 상세 버튼들 푸터1 푸터2 푸터3 광고1 광고2 광고3 광고4 광고5 body { background-color: rgb(221, 230, 221); } .total { display: flex; } .content { display: grid; width: 75vw; /* 주요 컨텐트 사이즈를 뷰포트의 75%로 줄임 */ } .request { border: 1px solid gray; } header { display: flex; height: 10vh; font-size: 1.8vw; } .header > * + * { margi.. 2023. 7. 28. 왜 body에는 display: flex; 선언이 먹히지 않지? flexbox와 css-grid를 섞어 쓸 수 있지? chatGTP 예, Flexbox와 CSS Grid는 둘 다 레이아웃을 구성하는 강력한 CSS 기술이며, 필요에 따라 함께 사용할 수 있습니다. 각각의 기술은 다른 목적과 사용 사례를 가지고 있으며, 조합하여 복잡한 레이아웃을 구현하는 데 효과적으로 사용될 수 있습니다. Flexbox는 주로 1차원 레이아웃을 다루는데 사용되며, 한 줄 또는 한 열에 있는 요소들을 배열하는 데 적합합니다. 이것은 주로 행 또는 열에 따라 아이템을 배치하는 데 유용합니다. CSS Grid는 2차원 레이아웃을 다루는데 사용되며, 행과 열 모두에 대한 강력한 레이아웃 시스템을 제공합니다. 그리드 레이아웃은 보다 복잡한 그리드 기반의 디자인을 구현하는 데 사용될 수 있습니다... 2023. 7. 28. flexbox와 CSS grid -- 둘 중에 크로스플랫폼 차원에서 flexbox와 CSS grid -- 둘 중에 어느 게 더 적합한 레이아웃 빌딩 도구인가? Bard 크로스플랫폼 차원에서 flexbox와 CSS grid는 둘 다 레이아웃을 빌드하는 데 적합한 도구이지만, 각각의 장단점이 있습니다. flexbox는 1차원 레이아웃에 더 적합한 도구입니다. flexbox를 사용하면 요소를 수평 또는 수직으로 정렬하고, 요소의 크기를 조정할 수 있습니다. 또한, flexbox는 반응형 레이아웃을 생성하는 데 적합한 도구입니다. CSS grid는 2차원 레이아웃에 더 적합한 도구입니다. CSS grid를 사용하면 요소를 그리드에 배치하고, 요소의 크기를 조정할 수 있습니다. 또한, CSS grid는 복잡한 레이아웃을 생성하는 데 적합한 도구입니다. 크로스.. 2023. 7. 28. [필기] CSS Grid │ 1분 코딩 (유튜브) https://youtu.be/eprXmC_j9A4?t=1177 px과 % 외에 쓸 수 있는 단위들 em (상위 요소의 폰트 크기) 부모 요소의 글꼴 크기가 16px이라면, 1em은 16px과 동일하며, 2em은 32px, 0.5em은 8px과 같이 계산됩니다. 중첩된 요소의 경우, 각 요소가 상위 요소의 글꼴 크기를 상속받아 크기가 계산됩니다. rem (루트 요소의 폰트 크기) 최상위 요소인 html 요소의 글꼴 크기에 따라 크기가 결정됩니다. 즉, rem은 루트 요소의 글꼴 크기를 기준으로 합니다. 예를 들어, 최상위 html 요소의 글꼴 크기가 16px이라면, 1rem은 16px과 동일하며, 2rem은 32px, 0.5rem은 8px과 같이 계산됩니다. rem은 중첩된 요소에 대해 상위 요소의 글꼴.. 2023. 7. 28. [필기] CSS Flexbox │1분 코딩 (유튜브) 아래 글은 유튜브 의 강의와 chatGTP와의 문답을 기초로 작성된 것임. 1분 코딩 님의 CSS Flexbox와 CSS Grid, 한번에 정리! 가 보기 flexbox flexbox는 컨테이너(부모)한테 적용을 하면, 그 안의 자식 아이템들을 쉽게(=flexbox 규칙에 따라) 정리할 수 있다는 개념임. ('flex'의 사전적 의미는 "신축성 있는") display: flex; Flexbox에서는 부모 컨테이너를 "flex container"라고 하고, 이 안에 있는 자식 요소들을 "flex items"이라고 합니다. display: flex;를 부모 컨테이너에 선언하면 해당 컨테이너가 Flexbox 레이아웃 모드로 전환됩니다. Flexbox는 요소들을 수평 또는 수직 방향으로 유연하게 배치하기 위해 .. 2023. 7. 28. 의뢰서 단계별 갈무리 1 페이지의 전체적인 구획을 나누되, 시멘틱 측면을 고려하여 heade, main, article, nav, footer, aside 같은 태그를 사용한다. 헤더1 헤더2 헤더3 헤더4 헤더5 메인1 메인2 메인3 메인4 메인5 디자인 디자인 상세 푸터1 푸터2 푸터3 광고1 광고2 광고3 광고4 광고5 그 다음 전체(total)에 플렉스박스를 선언해서 가로로 큰 덩어리가 두 블록으로 생성되도록 함. .total { display: flex; } 2023. 7. 28. 빠르게 주석 처리 Ctrl + / 2023. 7. 27. [필기] 포지션 position │생활코딩 [css] position 속성에 대해 정리해 줘. chatGTP CSS의 기본 디폴트(position의 초기값)는 static입니다. 따라서 HTML 문서에서 position 속성을 별도로 지정하지 않으면 요소는 static 포지션으로 배치됩니다. `position`은 CSS의 속성 중 하나로, 요소를 배치하는 방법을 지정하는 데 사용됩니다. HTML 요소들은 문서 상에서 일반적인 흐름(normal flow: 좌 → 우, 상 →하)에 따라 배치되지만, `position` 속성을 사용하면 요소를 다른 위치로 이동시키거나 겹치게 배치할 수 있습니다. `position` 속성에는 다음과 같은 값들이 있습니다: 1. `static`: `position` 속성의 기본값이며, 요소를 일반적인 흐름에 따라 배치합니.. 2023. 7. 27. box model 의 inline 상태에서의 높이와 너비 조정 box model에서 inline 요소에 대해서는 width 와 height 가 적용되지 않나? Bard 네, 맞습니다. CSS box model에서 inline 요소에 대해서는 width와 height가 적용되지 않습니다. inline 요소는 한 줄에 표시되기 때문에 너비와 높이가 고정되지 않습니다. inline 요소의 너비와 높이는 콘텐츠의 크기에 따라 결정됩니다. 예를 들어, 다음 HTML 코드가 있습니다. This is an inline element. 이 코드에 다음 CSS 코드를 적용하면 `span` 태그가 빨간색으로 바뀝니다. span { color: red; } 그러나 `span` 태그의 너비와 높이는 설정되지 않습니다. `span` 태그의 너비와 높이는 콘텐츠의 크기에 따라 결정됩니다. .. 2023. 7. 27. 요소(element)와 태그(tag) h1~h2, div, p, ... 이런 걸 태그라고 부르는 게 맞니? 아니면 요소라고 부르는 게 맞니? chatGTP 정확한 용어는 "요소(Element)"입니다. HTML 문서 내에서 `h1`, `h2`, `div`, `p` 등과 같은 것들은 모두 HTML 요소(Element)입니다. HTML 요소는 웹 페이지의 구조를 형성하는 블록이나 인라인 요소로서, 태그(태그 이름)와 내용(content)으로 구성됩니다. 각 요소는 특정한 의미를 갖고 있으며, 웹 브라우저는 이러한 요소들을 해석하여 적절한 방식으로 렌더링하고 표시합니다. 예를 들어, `h1` 요소는 페이지의 제목을 나타내는 데 사용되며, `div` 요소는 구역을 정의하는 데 사용됩니다. `p` 요소는 단락(paragraph)을 나타내고, 각 요소.. 2023. 7. 27. CSS selector cheat sheet [선택자] 출처https://welcm.uk/blog/css-selectors-cheat-sheet Welcm Learning Blog - CSS Selector Cheat Sheet Welcm Learning Blog - CSS Selector Cheat Sheet welcm.uk ※ CSS3에서 삭제되거나 변경된 선택자를 다시 확인할 필요가 있다. ※ 선택자는 뒤쪽에 나온 것을 우선적으로 적용한다. 선택자 예제 의미 .class .btn 클래스 이름이 "btn"인 모든 요소를 선택합니다. #id #myButton 아이디 이름이 "myButton"인 요소를 선택합니다. * * 모든 요소를 선택합니다. element h1 모든 요소를 선택합니다. element,element div, p → div, p:not(h1.. 2023. 7. 27. selector의 기본 종류 html의 구역이나 아이템을 선택하는 방법을 간단히 요약해 줘. chatGTP HTML의 구역이나 아이템을 선택하는 방법은 CSS 선택자를 사용하여 다양하게 구현할 수 있습니다. 아래에는 간단히 요약된 세 가지 방법을 제시합니다: 1. 요소 선택자(Element Selector): - 가장 기본적인 선택자로, HTML 요소의 이름을 사용하여 스타일을 적용합니다. - 선택자에 HTML 요소의 이름을 그대로 사용합니다. 예를 들면 `div`, `p`, `h1`과 같습니다. - 모든 동일한 요소에 스타일이 적용되므로 주의하여 사용해야 합니다. 예시: div { /* div 요소에 적용할 스타일 */ } p { /* p 요소에 적용할 스타일 */ } 2. 클래스 선택자(Class Selector): - 클래스 .. 2023. 7. 27. class, id 선택 [css] 선택자 class와 id의 차이에 대해 간단히 설명해. chatGTP CSS( Cascading Style Sheets)에서 선택자(class와 id)는 HTML 문서의 요소들을 스타일링하는 데 사용되는 중요한 도구입니다. 각 선택자는 문서의 특정 요소를 식별하고 해당 요소에 스타일을 적용할 수 있도록 도와줍니다. 1. 클래스 선택자: - 클래스 선택자는 동일한 스타일을 여러 요소에 적용할 때 사용됩니다. - 클래스 선택자는 마침표(`.`)로 시작하며, 그 뒤에 클래스 이름을 기입합니다. 예를 들면 `.my-class`와 같습니다. - HTML 문서에서 여러 요소가 동일한 클래스 이름을 가질 수 있으며, 클래스 이름은 중복 사용이 가능합니다. - 클래스 선택자를 사용하여 여러 요소에 동일한 스.. 2023. 7. 27. css 문서를 불러오는 link 문법 CSS 문서를 HTML 문서에 불러오는 방법은 `` 요소를 사용하는 것입니다. 이 요소는 주로 외부 CSS 파일을 HTML에 적용하는 데 사용됩니다. 아래는 `` 요소의 자세한 설명입니다. My Web Page rel: 연결되는 파일과의 관계를 정의합니다. CSS 파일을 불러올 때는 "stylesheet"를 사용합니다. href: 불러올 파일의 경로를 지정합니다. 해당 파일은 HTML 파일로부터 상대 경로나 절대 경로로 지정할 수 있습니다. type: 불러오는 파일의 MIME 타입을 지정합니다. CSS 파일을 불러올 때는 "text/css"를 사용합니다. media: CSS 파일이 적용될 미디어 유형을 지정합니다. 생략하면 기본값인 "all"로 설정됩니다. `` 요소는 `` 태그 내에 작성되어야 합니다... 2023. 7. 27. 웹사이트 로딩이 더 빨라지는 매직? │노마드 코더 img 태그 이렇게 하면 유저가 실제로 이미지를 볼 때, 로딩함. 물론 이렇게 한다고, 무조건적으로 로딩 속도가 빨라지지는 않음. 그래서 srcset 및 size 속성을 사용한다. srcset은 디바이스(장치)마다 출력 이미지를 다르게 설정할 수 있음. 스마트폰이나 모바일 장치에서는 저해상도의 이미지를 로드할 수 있다는 것. 이렇게 3가지 사이즈의 이미지(cat)가 준비되어 있다는 걸 알리면, 셋 중에 어느 사진을 출력할지는 브라우저가 결정한다. srcset 속성은 현재 시점 브라우저의 97프로가 지원하기 때문에 작동 안 할 리는 없는데, 그래도 혹시 모르니 기본적인 소스(src)도 적어둔다. 브라우저가 어떤 이미지를 출력할지 결정을 돕기 위해, 'size 속성'을 적어둘 수 있다. 뷰포트 너비가 600.. 2023. 7. 27. 브라우저를 가득 채우는 작은 셀 생성 코드를.. `const cellCount = 10000;`이라고 한계를 지은 이유는? chatGTP `const cellCount = 10000;`이라고 한계를 지은 이유는 무한히 많은 셀을 생성하는 것이 성능과 브라우저의 부하에 영향을 미칠 수 있기 때문입니다. HTML과 JavaScript를 사용하여 동적으로 셀을 생성하는 것은 브라우저의 메모리와 렌더링 성능에 영향을 미칩니다. 많은 수의 DOM 요소를 생성하면 메모리 사용량이 증가하고, 브라우저의 렌더링 엔진이 요소들을 화면에 표시하는 데 시간이 더 많이 걸릴 수 있습니다. `cellCount`를 적절한 값으로 설정하는 것은 사용자 경험과 성능에 영향을 미치는 중요한 요소입니다. 수천 개 이상의 셀을 생성하면 웹 페이지가 느려질 수 있고, 스크롤링 및 상호작.. 2023. 7. 26. 이전 1 2 3 4 5 다음
