전체 글 22

HTML - dialog, popover 요소

html에서 흔하게 모달창이라고 부르는 요소를 태그를 이용해서 간단하게 구현 할 수 있다. 모달창 열기 깜짝 혜택 다이얼로그 내용 닫기 . . . . . . 태그 안에 전달하고자 하는 내용을 작성해서 사용하면 된다. 기본적으로는 숨겨져 있으며 open이라는 속성을 줘서 보이게끔 할 수도 있다. 자바스크립트로 제어 할 수있고 모달창을 열기 위해서는 dialog.showModal() 이라는 기본 메소드를 사용하고 닫을때 dialog.close()로 닫을 수 있다.popover속성은 HTML 요소를 이용해서 자바스크립트 없이 툴팁과 유사한 UI 요소를 만들 수 있게 해주는 새로운 기능이다. popov..

Coding/HTML & CSS 2025.04.24

HTML - select, textarea

요소는 옵션 선택 메뉴를 제공하는 역할을 한다. 기본적으로 내부요소인 을 가지며 옵션에 개수에 따라 선택할 수 있는 드롭다운 목록이 나타나게 된다. 요소를 id로 묶어서 연관성을 나타낼 수 있다. 반려동물 강아지 고양이 토끼 햄스터 을 사용해서 옵션 그룹을 생성해서 옵션을 분리할 수 있다. 에는 selected라는 속성을 부여해서 기본 선택값으로 사용할 수 있다. 반려동물 --좋아하는 애완동물을 선택하세요-- 강아지 고양이 토끼 햄스터 ..

Coding/HTML & CSS 2025.03.07

HTML - button 요소

은 클릭 가능한 버튼을 생성하는 요소를 나타낸다. 내부에서 사용하면 사용자 입력 내용을 action속성에 정의된 URL로 전송하는 역할을 하지만 그 외에도 입력 정보를 리셋하거나 javascript의 이벤트 처리 등 다양한 작업을 수행하기도 한다. 요소에도 type="submit"을 통해 동일한 역할을 부여할 수 있지만 텍스트 외에 다른 이미지 등을 넣을 수 없어 다양한 UI요소를 꾸미는데 한계가 있다. 반면 요소는 등을 내부요소로 사용해서 기본 스타일 외에 다양한 버튼 UI를 만들 수 있다. 요소는 type속성을 통해 다양한 역할을 부여할 수 있다.값설명submit태그에 정의된 URL로 사용자 입력값을 전송함reset사용자 입력값 초기화button값 자체는 기능이 없으나 javascript와 함께..

Coding/HTML & CSS 2025.03.07