[HTML] 사용자 입력 폼 태그 - <form>

태그 - 웹 페이지에서 사용자로부터 데이터를 수집하기 위한 인터페이스를 제공 - 사용자로부터 입력을 받을 수 있는 HTML 입력 폼(form)을 정의 - 사용자와 웹사이트 간에 상호작용 지원 action: 폼 데이터를 처리하게 될 서버의 URL을 지정 method: 데이터 전송 방식을 지정. HTTP 동사 사용 GET: 주로 데이터를 검색할 때 사용. 폼 데이터는 URL의 쿼리 문자열로 전송. 입력정보가 주소(i.e., url bar)에 나타나고 4096byte까지만 전송가능 POST: 폼 데이터를 본문에 포함시켜 전송. 주로 데이터를 서버에 제출할 때 사용. 입력정보가 드러나지 않고 사이즈 제한도 없음 내용 : "전송방식" 요청으로 url에 정보를 보냄 Creating a form Looks like ..

• format_list_bulleted Front-end/HTML
• · 2023. 9. 6.
• textsms

[HTML] 테이블 태그(3) - 테이블 테두리 추가

테이블 테두리 1. 의 border 속성 추가 내용 01 02 2. CSS 사용 table { border: 1px solid black; } table, td { border: 1px solid black; }

• format_list_bulleted Front-end/HTML
• · 2023. 9. 6.
• textsms

[HTML] 테이블 태그(2) - colspan, rowspan 속성

colspan 속성 - , 에서 주로 사용 - 데이터가 여러 열에 걸쳐 있을 때 사용 - 범위에 걸쳐 있는 열의 개수를 입력받음 코드 coffee tea latte Americano herb tea strawberry latte colspan 속성 - , 에서 주로 사용 - 데이터가 여러 행에 걸쳐 있을 때 사용 - 범위에 걸쳐 있는 행의 개수를 입력받음 코드 coffee tea latte Americano Herb tea Strawberry latte Cold brew Matcha latte

• format_list_bulleted Front-end/HTML
• · 2023. 9. 6.
• textsms

[HTML] 테이블 태그(1) - <table>, <tr>, <td>, <th>, <tbody>, <thead>, <tfoot>

테이블 태그 (table) - 데이터를 포함하는 셀들의 행과 열로 구성된 2차원 테이블 생성할 때 사용 태그 - 테이블 생성 태그 - 테이블에 행 추가 태그 - 테이블에 데이터 추가 - 테이블 행, 열 내에 위치해야 함 Americano Herb tea Strawberry latte 태그 - 테이블의 행과 열에 제목 추가 scope : 제목이 어느 곳에 위치할지 결정하는 속성 제목 : 행의 제목 제목 : 열의 제목 coffee tea latte Americano Herb tea Strawberry latte 태그 - 테이블 데이터를 섹션화 - 테이블이 커져 많은 데이터를 포함할 때 사용 - 데이터를 한 개 이상 포함해야 함 coffee tea latte Americano Herb tea Strawberr..

• format_list_bulleted Front-end/HTML
• · 2023. 9. 6.
• textsms

[HTML] 비디오 태그 - <video>

비디오 태그 (video) - 비디오를 웹 페이지에 포함할 때 사용 - 태그와 달리 닫는 태그 필요 - 여는 태그와 닫는 태그 사이에 적힌 텍스트는 브라우저가 비디오를 로드할 수 없는 경우에만 표시됨 src : 비디오의 위치, 주소 추가하는 속성 controls : 일시 중지, 재생과 같은 기본 비디오 컨트롤을 포함하도록 브라우저에 지시하는 속성 autoplay: 페이지가 로드되자마자 동영상이 자동으로 재생되는 속성 loop: 이 속성을 사용하면 비디오가 계속해서 반복해서 재생되는 속성 비디오를 로드할 수 없습니다. Video not supported

• format_list_bulleted Front-end/HTML
• · 2023. 9. 5.
• textsms

[HTML] 영역 정의 태그 - <div>

div 태그 - HTML 요소 그룹화하는 데 사용 - 시각적 표현 없음 - 사용자 정의 스타일 적용할 때 유용 This is a heading in a div element This is some text in a div element.

• format_list_bulleted Front-end/HTML
• · 2023. 9. 5.
• textsms

[React] 실습 - 댓글 컴포넌트 만들기

- Comment.jsx import React from "react"; const styles = { wrapper: { margin: 8, padding: 8, display: "flex", flexDirection: "row", border: "1px solid grey", borderRadius: 16, }, imageContainer: {}, image: { width: 50, height: 50, borderRadius: 25, }, contentContainer: { marginLeft: 8, display: "flex", flexDirection: "column", justifyContent: "center", }, nameText: { color: "black", fontSize: 16,..

• format_list_bulleted Front-end/React
• · 2023. 5. 24.
• textsms