Atelier BiCute

HTML에서 이미지를 표시하려면 "img" 요소를 사용합니다. "src" 속성을 사용하여 이미지의 URL을 지정할 수 있습니다. 다음은 간단한 예입니다. "alt" 속성은 이미지가 로드되지 않을 때 표시될 텍스트입니다. 접근성을 위해 이미지의 설명을 제공하는 것이 좋습니다. # 이미지 tag img 태그는 HTML에서 이미지를 표시하는 데 사용됩니다. 아래는 "img" 태그의 주요 속성입니다. - src: 이미지의 URL을 지정합니다. 예: - alt: 이미지가 로드되지 않을 때 대체 텍스트를 지정합니다. 접근성을 위해 이미지의 설명을 제공하는 것이 좋습니다. 예: - width와 height: 이미지의 가로 및 세로 크기를 지정합니다. 예: - style: 이미지의 CSS 스타일을 지정합니다. 예: -..

HTML에서의 링크 태그는 태그로 표현됩니다. 링크는 특정 문서, URL, 이메일 주소 또는 기타 리소스와의 연결을 제공합니다. 태그에는 다음과 같은 주요 속성이 있습니다. - href: 링크가 가리키는 대상의 URL을 지정합니다. - target: 링크가 열릴 위치를 지정합니다. 기본값은 "self"이며, 현재 탭에서 링크가 열립니다. "blank"로 지정하면 새 탭에서 링크가 열립니다. - rel: 링크와 현재 문서 간의 관계를 지정합니다. "nofollow"로 지정하면 검색 엔진에서 링크를 따라가지 않습니다. - download: 링크가 가리키는 리소스를 다운로드하도록 지정합니다. - hreflang: 링크가 가리키는 리소스의 언어를 지정합니다. 예: Example Website # 앵커 태그 HT..

HTML에서 목록은 ul, ol, li 태그를 사용하여 구현할 수 있습니다. ul 태그는 순서가 없는 목록을 표현하며, li 태그를 사용하여 각 항목을 구성합니다. ol 태그는 순서가 있는 목록을 표현하며, type 속성을 사용하여 숫자 또는 글자 등으로 표시되는 순서 형식을 지정할 수 있습니다. # 순서가 없는 목록 순서가 없는 목록(Unordered list)은 HTML에서 ul 태그를 사용하여 구현할 수 있습니다. 각 항목은 li 태그를 사용하여 구성합니다. 순서가 없는 목록은 글자 형식의 순서를 사용하지 않고, 구분 기호(bullet)로 각 항목을 구분합니다. 예: Item 1 Item 2 Item 3 # 순서가 있는 목록 순서가 있는 목록(Ordered list)은 HTML에서 ol 태그를 사용..

HTML의 텍스트 서식은 태그를 사용하여 문서의 텍스트를 서식적으로 표현하는 것을 말합니다. 예를 들어, 제목을 표시하기 위해서는 태그를, 굵은 글씨를 표시하기 위해서는 태그를, 기울어진 글씨를 표시하기 위해서는 태그를 사용할 수 있습니다. 이 외에도 다양한 태그가 있습니다. 예를 들어: : 단락을 표시하는 태그 : 줄바꿈을 표시하는 태그 : 점으로 구성된 목록을 표시하는 태그 : 숫자로 구성된 목록을 표시하는 태그 : 목록의 각 항목을 표시하는 태그 : 인용구를 표시하는 태그 HTML 태그를 사용하여 텍스트의 서식을 꾸며주면 웹 페이지를 더욱 깔끔하게 만들 수 있습니다. # 굵은 텍스트(Bold text) HTML에서 굵은 텍스트는 태그를 사용하여 표시할 수 있습니다. 굵은 텍스트는 글씨 굵기가 두껍게..

제목(Heading)은 웹 페이지에서 주요한 제목을 나타낼 때 사용됩니다. HTML에서 제목은 h1부터 h6 태그로 표현되며, h1은 가장 중요한 제목을, h6은 가장 적은 중요도를 나타냅니다. 단락(Paragraph)은 웹 페이지에서 텍스트를 작성할 때 사용되는 태그입니다. HTML에서 단락은 p 태그로 표현됩니다. 예: 메인 제목입니다 부제입니다 단락입니다. 이것은 또 다른 단락입니다. # 제목(Heading) tag HTML에서 제목 태그(h1~h6)는 웹 페이지의 구조와 내용을 나타내는데 사용됩니다. h1 태그는 웹 페이지의 최상위 제목을 나타내며, h2 태그는 h1의 하위 제목, h3 태그는 h2의 하위 제목 이런 식으로 계층 구조를 가집니다. 제목 태그는 다음과 같이 사용할 수 있습니다. 메인..

HTML의 기본 문서 구조는 다음과 같습니다: 1. DOCTYPE: HTML 문서에 대한 정의입니다. 2. HTML 요소: 모든 HTML 문서의 기본 요소입니다. 3. Head 요소: 브라우저에게 HTML 문서에 대한 정보를 제공합니다. 4. Body 요소: HTML 문서의 실제 콘텐츠가 포함되어 있습니다. 예: Hello World! This is my first HTML page. # DOCTYPE DOCTYPE 선언은 HTML 문서의 문서 타입을 지정하는 것입니다. 이 선언은 HTML 문서의 첫 라인에 위치하여야 하며, 브라우저에게 HTML 문서가 어떤 버전의 HTML을 사용하는지 알려줍니다. 예를 들어, HTML5 문서의 경우에는 다음과 같이 선언합니다: DOCTYPE은 프로젝트에서 사용할 HTM..

# HTML은 무엇인가? 현재 HTML은, 웹 페이지를 작성하는 데 가장 기본적인 도구로 평가됩니다. 하이퍼 텍스트 마크업 언어(Hypertext Markup Language)는 웹 페이지의 내용을 구조화하고 표시하기 위한 마크업 언어입니다. HTML은 텍스트, 이미지, 비디오, 테이블, 폼 등의 웹 페이지 요소를 구조화하는 태그를 사용합니다. 태그는 각 요소의 속성을 정의하는 역할을 합니다. HTML 태그를 사용하여 웹 페이지의 구조, 내용, 디자인 등을 정의할 수 있습니다. HTML은 브라우저를 통해서만 접근이 가능한 웹 페이지를 생성할 수 있습니다. HTML 파일은 .html 혹은 .htm 확장자를 가지며, 웹 서버에 업로드된 후 누구나 접근할 수 있습니다. HTML은 개인이나 회사, 기관 등이 웹..

#1. 비주얼 스튜디오 코드 설치하기 브라우저의 주소창에(https://code.visualstudio.com/)를 입력하여 비주얼 스튜디오 코드 홈페이지로 접속합니다. 오른쪽 위에 다운로드 페이지로 들어가는 방법도 있지만, 화면 중앙의 버튼을 이용하면 자신의 운영체제에 맞는 다운로드 버튼이 나타납니다. 이 버튼을 눌러 비주얼 스튜디오 코드 설치 파일을 다운로드합니다. 다운이 완료되면 파일을 더블클릭하여 설치를 진행합니다. (특별히 건드릴 세팅 없음) #2. 비주얼 스튜디오 코드 실행하기 처음 비주얼 스튜디오 코드를 실행하면 한글 패치부터 시작하는 것이 좋습니다. 한글 패치 외 추천할만한 플러그인들에 관한 것은 다음글을 참고해 주세요 ※ 참고: 비주얼 스튜디오 코드 확장 프로그램 추천 (12종) #3. ..

Mitt는 작고 빠른 JavaScript 이미터(emitter) 라이브러리입니다. 브라우저와 Node.js 환경 모두에서 작동하도록 설계되었으며 이벤트를 내보내고 처리하기 위한 간단하고 직관적인 인터페이스를 제공합니다. Mitt를 사용하면 사용자 정의 이벤트를 생성하고, 이벤트 핸들러를 연결하여 이러한 이벤트를 수신하고, 무언가 발생했음을 코드의 다른 부분에 알리고 싶을 때마다 이러한 이벤트를 트리거할 수 있습니다. ※ emitter란? 코드의 다른 부분에 알림을 보낼 수 있는 소프트웨어 디자인 패턴입니다. # 설치 npm npm install --save mitt yarn yarn add mitt # 등록 전역 플러그인으로 설치 import Vue from 'vue' import mitt from 'm..

form 데이터를 콘솔로그나 화면에 출력해보면 "[object FormData]” 라고만 출력이 됩니다. 이 내용을 확인하는 방법들에 대한 글입니다. # FormData FormData는 양식 데이터의 키-값 쌍을 저장하는 데 사용되는 JavaScript의 개체입니다. get 메소드를 사용하고 검색하려는 값의 키를 전달하여 FormData 객체의 내용에 액세스할 수 있습니다. let formData = new FormData(); formData.append('key1', 'value1'); formData.append('key2', 'value2'); console.log(formData.get('key1')); // 출력 'value1' console.log(formData.get('key2')); ..