본문 바로가기

frontend81

html, img, 절대경로/상대경로 출처 : 실전코딩 짐코딩 클럽 2023. 7. 21.
inline or block HTML의 모든 요소는 해당 요소가 웹 브라우저에 어떻게 보이는가를 결정짓는 display 속성을 가집니다. 대부분의 HTML 요소는 이러한 display 속성값으로 inline 타입 도는 block 타입 - 이 두 가지 값 중 하나를 가지게 됩니다. , , , , , 요소는 display 속성값이 블록(block)인 대표적인 요소입니다. , , 요소는 display 속성값이 인라인(inline)인 대표적인 요소입니다. 출처 TCPschool.com inline 요소: 컨텐츠가 수평으로 이어지는 것을 의미합니다. 즉, 요소들이 한 줄에 나란히 배치되며, 가로 방향으로 흐릅니다. block 요소: 컨텐츠가 수직으로 쌓이는 것을 의미합니다. 즉, 요소들이 새로운 줄에서 시작되며, 세로 방향으로 쌓입니다. 출.. 2023. 7. 21.
<div class=>`와 `<div id=>`의 차이 chatGTP ``와 ``의 차이를 쉽게 설명해 드릴게요! 우선, ``는 웹페이지에서 여러 내용들을 묶어주는 역할을 해요. 예를 들면, 책에서 챕터들을 구분하기 위해 목차에 번호를 매기듯이, 웹페이지에서도 ``는 다른 내용들을 그룹으로 묶어줍니다. 1. ``: ``는 여러 개의 HTML 요소들을 묶을 때 사용합니다. 특정한 이름(class 이름)을 붙여서 여러 곳에서 같은 스타일이나 동작을 적용할 수 있어요. 클래스 이름은 여러 요소들이 함께 묶여 있는 그룹을 표시하는 데 사용됩니다. 하나의 요소가 여러 클래스를 가질 수도 있어요. ```html 제목 내용 내용 내용 ``` 2. ``: ``는 특정한 HTML 요소를 식별할 때 사용해요. 클래스와는 달리, 아이디(id)는 페이지 내에서 오직 하나의 요소에.. 2023. 7. 21.
크로스플랫폼과 html 크로스플랫폼을 지향한다는 전제에서 html 작성에 유의할 점이 있나? Bard 네, 크로스플랫폼을 지향한다는 전제에서 HTML 작성에 유의해야 할 점은 다음과 같습니다. 브라우저에 따라 지원되지 않는 태그나 속성을 사용하지 마세요. 예를 들어, `` 태그는 Internet Explorer에서 지원되지 않습니다. 브라우저에 따라 표시되는 방식이 다른 태그나 속성을 사용하지 마세요. 예를 들어, `` 태그는 Internet Explorer와 Firefox에서 표시되는 방식이 다릅니다. CSS를 사용하여 HTML을 스타일링하세요. CSS는 브라우저에 따라 동일하게 표시되므로, HTML을 스타일링할 때는 CSS를 사용하세요. 웹 표준을 준수하세요. 웹 표준을 준수하면, 모든 브라우저에서 동일하게 웹 페이지를 표.. 2023. 7. 21.
문서 구조화하기 섹션 태그에 대해 설명해. Bard HTML의 태그는 웹 페이지의 구조를 나타내는 데 사용되는 태그입니다. 태그는 웹 페이지의 섹션을 그룹화하고, 섹션의 콘텐츠를 스타일링하는 데 사용됩니다. 태그는 HTML5에서 도입된 태그로, HTML4에서는 태그를 사용하여 섹션을 그룹화했습니다. 태그는 태그와 동일한 기능을 수행하지만, 태그는 웹 페이지의 구조를 나타내는 데 더 적합합니다. 태그의 사용법은 다음과 같습니다. 섹션 태그로 페이지 상단을 생성할 수 있나? Bard 네, 섹션 태그로 페이지 상단을 생성할 수 있습니다. 섹션 태그는 웹 페이지의 섹션을 그룹화하고, 섹션의 콘텐츠를 스타일링하는 데 사용되는 태그입니다. 따라서 섹션 태그를 사용하여 페이지 상단에 대한 섹션을 정의하고, 해당 섹션에 대한 콘텐츠를.. 2023. 7. 21.
HTML5 144개의 태그 중 가장 많이 쓰이는 것 HTML5의 종류 (by Bard) HTML5는 100개 이상의 태그를 제공합니다. HTML5의 태그는 크게 6가지로 분류됩니다. 컨텐츠 태그: 텍스트, 이미지, 링크 등을 표시하는 태그입니다. 컨테이너 태그: 다른 태그를 포함하는 태그입니다. 폼 태그: 사용자 입력을 수집하는 태그입니다. 헤드 태그: HTML 문서의 메타 데이터를 포함하는 태그입니다. 섹션 태그: HTML 문서를 구조화하는 태그입니다. 스크립트 태그: JavaScript 코드를 포함하는 태그입니다. HTML5의 태그는 HTML5 표준에서 정의되어 있습니다. HTML5 표준은 W3C에서 정의하고 있습니다. 시멘틱 의미를 가지는 HTML 태그 (by chatGTP) 시멘틱 의미를 가지는 HTML 태그들은 웹 페이지의 구조와 의미를 더 명확.. 2023. 7. 21.
flexbox 태그 `flexbox`는 CSS3에서 도입된 레이아웃 모델로, 웹 페이지의 요소를 유연하게 배치하기 위해 사용되는 CSS 속성들의 집합입니다. `flexbox`를 이용하면 컨테이너와 그 안의 요소들을 가로 또는 세로 방향으로 정렬하고 배치할 수 있습니다. `flexbox`는 주로 부모 요소인 컨테이너와 그 자식 요소인 아이템들을 다루는데 사용됩니다. 컨테이너에 `display: flex;`를 설정하면 해당 요소는 `flexbox` 레이아웃 모드로 전환됩니다. `flexbox`를 사용할 때 자주 쓰이는 속성들은 다음과 같습니다: 1. `display: flex;`: 컨테이너를 `flexbox` 레이아웃 모드로 전환합니다. 2. `flex-direction`: 컨테이너 안의 아이템들의 배치 방향을 지정합니다. (.. 2023. 7. 21.
div 태그 - 일단 큰 덩어리를 나눠 놓을 것 [HTML, JavaScript] div 태그를 사용하는 건 SEO 때문이야? 아니면 또 다른 의의가 있나? `div` 태그는 HTML에서 블록 레벨의 컨테이너 역할을 하는 가장 일반적인 요소 중 하나입니다. 이것은 레이아웃과 스타일링을 위해 사용되며, 특정 의미를 가지지 않는 "무의미한" 컨테이너로 사용됩니다. `div` 태그의 주요 용도와 의미는 다음과 같습니다: 1. 레이아웃 및 스타일링: `div` 태그는 레이아웃과 스타일을 적용하기 위해 주로 사용됩니다. 웹 페이지의 다양한 섹션, 레이아웃 영역, 컨테이너 등을 정의하는 데에 이용됩니다. 2. 구조화: `div` 태그는 구조화된 방식으로 웹 페이지의 다양한 부분을 분리하는 데 사용됩니다. 다른 의미를 가지는 태그들로 적절하게 묶어서 웹 페이지의 .. 2023. 7. 20.
table 태그 기본 table 태그에 대해 중학생 수준으로 설명해. 헤더 셀 헤더 셀 데이터 셀 데이터 셀 데이터 셀 데이터 셀 HTML에서 table 태그는 표를 만들 때 사용되는 태그입니다. 표는 행과 열로 구성되며, 데이터를 구조화하여 표시할 때 유용합니다. table 태그는 다음과 같은 구조로 사용됩니다: ``: 표 전체를 감싸는 가장 바깥쪽 태그입니다. ``: 표의 행(row)을 나타내는 태그입니다. `table` 태그 내에 위치해야 하며, 각각의 행은 `` 태그로 감싸집니다. ``: 표의 헤더 셀(header cell)을 나타내는 태그입니다. 표의 첫 번째 행(``)에서 사용되며, 일반적으로 굵은 글씨로 표시됩니다. ``: 표의 데이터 셀(data cell)을 나타내는 태그입니다. 표의 내용을 담고 있는 셀로, .. 2023. 7. 20.
HTML 문서의 기본 구조에 대한 설명 위의 코드는 HTML 문서의 기본적인 구조를 나타내고 있습니다. 각 요소가 왜 필수적인지에 대해 자세히 설명하겠습니다. 1. ``: 이 부분은 문서의 유형을 지정하는 것으로, HTML 문서임을 나타냅니다. 이것은 웹 브라우저에게 문서가 HTML 형식임을 알리는 역할을 합니다. "웹 브라우저에게 문서가 HTML 형식임을 알리는" 일이 왜 중요한데? "웹 브라우저에게 문서가 HTML 형식임을 알리는" 일은 중요한 이유가 있습니다. 여기에는 몇 가지 이유가 있습니다: 1. 올바른 렌더링: 웹 브라우저는 웹 페이지를 해석하고 렌더링하여 사용자에게 보여줍니다. HTML 문서는 웹 페이지의 구조와 내용을 정의하는 역할을 합니다. 올바른 HTML 형식으로 작성된 문서는 웹 브라우저가 문서를 정확하게 이해하고 제대로 .. 2023. 7. 20.
진짜 웹개발로 배우는 실용 자바스크립트 1강~(코딩애플) https://www.youtube.com/watch?v=8rv8GTgYYrU&list=PLfLgtT94nNq0svPBSslzReYKbZRuv_-NK&index=1 필기 웹 환경에서 JavaScript의 목적은 HTML를 조작하고 변경하기 위해서임. 이것만 기억해도 됨. (예) document.getElementByID('hello').innerHTML='안녕'; :(웹)문서의 어쩌구 저쩌구. 쩜(.)은 "~의"라고 해석하면 됨 이퀄(=)은 코딩에서 오른쪽에 있는 거를 왼쪽에 "대입한다"는 뜻임. 따옴표는 '문자'를 담을 때 쓰는 거임 documet.... ) : 이걸 selector 라고 함 innerHTML : 이건 구글에서 검색해서 찾아야 함. (이 코드로 HTML의 거의 모든 요소를 변경시킬 수 .. 2023. 7. 20.
예약 캘린더 구축 : 테이블 태그 또는 캘린더 라이브러리 1 [웹 개발] 손님(=의뢰자)가 날짜를 클릭해서 약속이나 예약을 할 수 있는 캘린더 페이지를 구축한다면 이 캘린더 구축에도 '테이블 태그'가 활용될 수 있겠구나? chatGTP 네, 캘린더 페이지를 구축할 때에도 '테이블' 태그를 활용할 수 있습니다. 캘린더는 날짜와 해당 날짜에 예약이나 약속이 있는지를 표시하는 데 사용되는 일반적인 방법 중 하나입니다. 테이블을 사용하여 캘린더를 만들면 각 날짜를 행과 열로 구성된 테이블 셀에 표시할 수 있습니다. 일반적인 방법으로 캘린더를 구축하는 경우, 다음과 같은 방법으로 테이블을 활용할 수 있습니다: 1. 테이블 구조: 각 날짜를 행과 열로 표현하는 테이블 구조를 생성합니다. 행은 일주일(7일)을 나타내며, 열은 요일을 나타냅니다. 이렇게 테이블을 구성하면 사용자.. 2023. 7. 19.
테이블과 스프레드시트 [웹 개발] JavaScript와 Quill로 텍스트 편집기 또는 포스트 편집 메커니즘을 구축하고 있어. 웹 개발 차원에서 '스프레드시트'와 '테이블'의 개념 차이를 설명해 줘. chatGTP 웹 개발에서 '스프레드시트'와 '테이블'은 두 가지 다른 개념을 나타냅니다. 1. 테이블: 테이블은 웹 페이지에서 데이터를 구조화하고 표시하는 데 사용되는 요소입니다. HTML에서 `` 태그를 사용하여 테이블을 만들 수 있습니다. 테이블은 행(row)과 열(column)로 구성되며, 각 셀(cell)에 데이터를 포함시킬 수 있습니다. 주로 정렬된 데이터를 표 형태로 표시하는 데 사용됩니다. 테이블은 웹 개발에서 데이터를 표시하고 조작하는 데 널리 사용됩니다. 예를 들어, 데이터베이스에서 검색 결과를 표 형태로 표시.. 2023. 7. 19.
CSS를 배울 수 있는 유튜브 채널 보호되어 있는 글 입니다. 2023. 7. 19.
TypeScript로 다시 쓰는 연습을 하면 도움이 되나? [TypeScript 학습] 뻔한 얘기 말고, 진짜 효과적인 Tip을 알려줘. JavaScript로 쓴 코드를 TypeScript로 다시 쓰는 연습을 하면 도움이 되나? Bard 네, JavaScript로 쓴 코드를 TypeScript로 다시 쓰는 연습을 하면 도움이 됩니다. TypeScript는 JavaScript의 확장 언어이기 때문에, TypeScript로 코드를 작성하면 JavaScript 코드와 호환됩니다. 따라서, TypeScript로 코드를 작성하면 JavaScript 코드의 타입을 명시할 수 있어 코드의 오류를 줄이고 유지 관리하기 쉽게 만들 수 있습니다. JavaScript로 쓴 코드를 TypeScript로 다시 쓰는 연습을 하는 방법은 다음과 같습니다. JavaScript로 쓴 코드를 .. 2023. 7. 19.
JavaScript, TypeScript, React, Next.js, Redux의 학습 순서 주니어 개발자가 웹개발을 한다는 전제에서 JavaScript, TypeScript, React, Next.js, Redux의 학습 순서를 나열해줘. chatGTP 주니어 개발자가 프론트엔드 웹 개발을 시작하려는 경우, 다음과 같은 학습 순서를 추천합니다: 1. JavaScript: JavaScript는 웹 개발의 기본 언어이므로 먼저 JavaScript를 학습하는 것이 중요합니다. JavaScript의 기본 문법, 데이터 유형, 함수, 제어문 등을 익히고, DOM 조작과 이벤트 처리 등 웹 개발에 필요한 기능을 학습합니다. TypeScript: TypeScript는 JavaScript의 상위 집합 언어로, 정적 타입 시스템을 제공하여 개발자의 실수를 줄이고 코드의 안정성을 높일 수 있습니다. JavaSc.. 2023. 7. 19.
필터링 데이터 필터링을 위해 유용하게 활용되는 라이브러리 중에 JavaScript와 상호운용성이 높은 건 무엇인가? JavaScript와 상호 운용성이 높은 데이터 필터링 라이브러리 중에는 다음과 같은 것들이 있습니다: 1. Lodash: Lodash는 JavaScript 유틸리티 라이브러리로, 데이터 처리와 조작을 위한 다양한 기능을 제공합니다. Lodash의 `filter` 함수를 사용하여 데이터를 필터링할 수 있습니다. 예시: const _ = require('lodash'); const data = [1, 2, 3, 4, 5]; const filteredData = _.filter(data, num => num % 2 === 0); console.log(filteredData); // [2, 4] 2. .. 2023. 7. 19.
CSS Grid로... [웹 개발] 텍스트 편집기 또는 이미지 편집기를 구축하는데 있어서, 편집 시 생성된 각 요소(컨텐츠)의 위치나 선명도를 조정하기 위해 입력 에어리어 안에 Grid System을 내장하려 한다. Grid System을 구축하는데 가장 저수준의, 가장 빠른 도구는 CSS Grid 인가? chatGTP CSS Grid는 웹 개발에서 그리드 시스템을 구축하는 데 사용되는 가장 강력하고 유연한 기술 중 하나입니다. CSS Grid는 레이아웃을 생성하고 요소들의 위치를 조정하는 데 사용될 수 있으며, 다양한 레이아웃 패턴과 조작을 지원합니다. 따라서, 텍스트 편집기나 이미지 편집기와 같은 애플리케이션에서 Grid System을 구축하는 데에 CSS Grid를 활용하는 것은 일반적으로 좋은 선택입니다. CSS Gri.. 2023. 7. 19.
HTML에 대해 초등학생/중학생/대학생에게 설명해줘 HTML에 대해 초등학생에게 설명하듯 쉽게 설명해줘. (비유법이나 은유법을 이용해서 쉽게 설명해줘.) chatGTP HTML은 마치 웹페이지의 뼈대와 같은 역할을 합니다. 생각해봐요, 우리 몸은 뼈, 근육, 기관 등으로 이루어져 있죠? 그런데 우리가 다른 사람에게 어떤 정보를 전달하거나 무언가를 보여주려면 몸을 사용하잖아요? 그렇게 몸을 통해 우리가 하고 싶은 말이나 느낌을 전달하는 것처럼, HTML은 웹페이지에서 정보와 콘텐츠를 표시하는 역할을 해요. HTML은 마치 웹페이지의 구조를 만들어주는 '뼈'와 같아요. 뼈는 우리 몸의 구조를 유지하고, 다른 부위들이 어디에 위치해야 하는지 알려주는 역할을 하죠? 마찬가지로 HTML은 제목, 단락, 이미지, 링크 등과 같은 요소들을 사용하여 웹페이지의 구조를 .. 2023. 7. 18.
HTML 기초 (생활코딩) https://youtu.be/OGFgdro160I?list=PLuHgQVnccGMDUzDDCKW-pCZQY-MMCX5yB 2023. 7. 13.
HTML 1강 (조코딩) https://youtu.be/JMLBBv05ORw 2023. 7. 13.

티스토리툴바