input type="submit" VS button type="submit"   강의를 들으면서 공부 중 제출 버튼을 구현하는데 button이 아닌 input에 type을 submit으로 지정해서 버튼을 구현하는 모습을 보고 궁금증이 생겼다. 결론적으로는 둘 다 사용가능하지만 button을 더 많이 사용합니다. 기능적 차이는 없을까?폼 전송 기능을 담당하는 과 은 기능적으로 동일합니다.기능적으로는 button에 type을 명시하지 않으면 기본적으로 submit을 실행하기 때문에 form에서 사용하기에 딱 입니다. Button의 type 속성값브라우저별 기본 button 요소의 기능이 다를 수 있기 때문에 꼭 넣는걸 추천합니다.- type="submit" : 폼의 전송 기능을 담당합니다.- type="..

태그로 모달(modal) 만들기??    이 글을 작성하게 된 이유원래는 실제 프로젝트에서 useModal 커스텀훅과 상위 파일인 layout.tsx에 div태그에 id값을 주어야 하는 방법까지 번거롭게 작업했었다.하지만 강의를 들으면서 상위 layout 파일에 div 요소도 안넣고 더 간편하게 사용하는 방법을 알게 되어 글을 작성해본다.import '../styles/globals.css';import Providers from './providers';export default function RootLayout({ children,}: Readonly) { return ( {children} );}'use client';import..

HTML 특수문자 사용하기     페이지 넘길때 사용하는 , >>등 이러한 특수문자를 어떻게 사용하는지 서치 해보았다.나같은 경우 span 태그안에 ex) ‹ 이렇게 작성하면 해당 문자의 특수문자가 나온다 ❗️사이트 공유https://www.digitalmediaminute.com/reference/entity/index.php HTML EntitiesThis page contains the 252 allowed entities in HTML 4 and XHTML 1.0, as outlined in section 24 of the official HTML 4 specifications, published by the W3C. If you find it helpful we'd really a..

HTML input 태그 readonly 속성    정의 및 특징 태그의 readonly 속성은 요소의 입력 필드가 읽기 전용임을 명시합니다. 읽기 전용으로 설정된 입력 필드는 사용자가 수정할 수는 없지만, 해당 내용을 하이라이트하거나 복사할 수는 있습니다.따라서 이 속성을 사용하면 특정 조건이 충족될 때까지 사용자가 입력 필드의 내용을 수정할 수 없도록 설정하고, 특정 조건이 충족되면 자바스크립트 등으로 readonly 속성값을 삭제하여 사용자가 입력 필드를 수정할 수 있도록 조절할 수 있습니다. disabled 속성이 명시된 입력 필드의 값은 서버로 제출되지 않지만, readonly 속성이 명시된 입력 필드의 값은 서버로 제출됩니다. readonly 속성은 불리언(boolean) 속성입니다.불리언 ..

HTML 링크, 미디어 태그 (이미지, 오디오, 비디오)     https://developer.mozilla.org/ko/docs/Web/HTML/Element/a - HTML: Hypertext Markup Language | MDN" data-og-description="HTML 요소(앵커 요소)는 href 특성을 통해 다른 페이지나 같은 페이지의 어느 위치, 파일, 이메일 주소와 그 외 다른 URL로 연결할 수 있는 하이퍼링크를 만듭니다. 안의 콘텐츠는 링크 목적지" data-og-host="developer.mozilla.org" data-og-source-url="https://developer.mozilla.org/ko/docs/Web/HTML/Element/a" data-og-url="..

HTML 태그 종류 및 개념정리  https://www.w3schools.com/html/html_forms.asp HTML FormsW3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.www.w3schools.com   : 입력 양식 전체를 감싸는 태그폼은 사용자와 웹사이트 또는 어플리케이션이 서로 상호 작용하는 것 중 중요한 기술 중에 하나이다. 폼은 사용자가 웹사이트에 데이터를 전송해주기도 하며 이밖에 ..

HTML 테이블 태그   https://developer.mozilla.org/en-US/docs/Web/HTML/Element/table: The Table element - HTML: HyperText Markup Language | MDN" data-og-description="The HTML element represents tabular data—that is, information presented in a two-dimensional table comprised of rows and columns of cells containing data." data-og-host="developer.mozilla.org" data-og-source-url="https://developer.mozilla..

HTML 목록(리스트) 태그  : 순서가 없는 리스트 (Unordered List)순서가 없기 때문에 앞에 ●과 같은 불릿이 붙는다CSS에서 list-style: none; 으로 순서 표시 없앨수 있음  : 순서가 있는 리스트 (Ordered List) 태그와 달리 태그는 기호가 아닌 숫자나 영문 순서가 들어감사용할 수 있는 속성들이 있다 속성!! 1) type="  "1숫자(기본값)a영어 소문자A영어 대문자i로마숫자 소문자I로마숫자 대문자 2) start="  "(중간 부터 시작하고 싶을때): list item 태그와 태그 안에서 각 항목을 나열할 때 사용한다    마지막으로 , , 모두 쓰이는 예제 목록1 목록2 목록1 목록2 목록3 목록3-1 목록..

HTML5의 기본요소시작태그 속성1="속성값" ...속성n="속성값">내용종료태그>  글자/폰트 관련 태그 : 제목 태그까지 있다 - 숫자가 커질수록 폰트 크기는 작아진다.h를 사용한 것과 같게 보이는 태그들 도 많지만 태그를 사용한다는 것은 제목이 된다는 정보를 준다는 것이기 때문에 다른 내용과 구별해서 사용해야 된다.: 긴 가로선 표시----------------------------- 실선으로 표시:  줄 바꿈 태그를 그 맨뒤에 붙이면 삽입된 위치에서 줄이 바뀐다. ( 닫는 태그 x): 단락, paragraph태그를 사용하면 사용한 앞, 뒤로 빈 줄이 생기면서 단락이 생긴다.: 기울임 태그로 감싸진 내용을 기울임 꼴로 표현한다.: 기울임 태그보다 더 강조되고 중요한 태그이다.기울임 꼴로 표현한다.:..