본문 바로가기

Frontend/HTML13

HTML5의 문서 구조화 HTML5이전까지는 웹페이지의 구조를 표현하는 태그가 없었기 때문에 div태그나 table 태그를 이용하였지만 문서의 구조 파악이 어려웠다. 이를 개선하기 위하여 HTML5에서는 웹 문서를 구조화할 수 있도록 시맨틱 태그(레이아웃 표준 태그, Semantic tag)들이 추가되었다.  코딩쥐의 공부방 홈 태그 방명록 분류 전체보기 HTML CSS .. 2024. 7. 7.
HTML의 진행률을 알아보는 태그(<progress>, <meter>태그) 진행상태를 나타내는 태그는 태그와 태그가 있다. 태그의 경우 작업의 진행 상태를,  태그의 경우 알려진 범위 내의 값에서 얼마나 사용되었는지를 나타내는 태그이다. 예를 들어 태그는 진행률 표시를 하는데 사용하고, 태그의 경우 디스크 사용량, 투표율 등에 사용된다.  value의 경우 처음 로딩이 되었을 때의 상태를 설정할 수 있으며 max는 최대일 때의 수를 나타낸다.  작업진행률: 디스크(D): 2024. 7. 1.
HTML에서 버튼을 만들어보자 HTML 버튼은 사용자가 클릭할 수 있는 요소를 말한다. HTML에서는 버튼을 만드는 방법이 두 가지가 있는데 하나는 input type을 사용하는 방법이고, 다른 방법은 button태그를 사용하는 방법이다. HTML5부터 button태그가 추가되었으며, 웹 접근성이 중요해지면서 button 태그의 사용을 권장하고 있다. HTML4: HTML5 : 버튼이름버튼타입기능button아무 기능이 없는 버튼으로 자바스크립트 코드에서 이용된다.submit클릭하면 브라우저가 폼 데이터를 웹 서버로 전송한다.reset폼에 입력된 내용을 모두 지우고 초기화 하는 버튼이다.image이미지 버튼을 만든다.HTML5에서는 이미지 버튼을 만드는 방법으로는 이있다. .. 2024. 6. 30.
HTML에서 폼 요소를 사용해서 선택형 입력, 드롭다운 목록을 만들어보자 선택형 입력목록을 보여주고 목록에서 사용자가 선택하는 방식의 입력 요소다. radio" name="카테고리 이름" id="요소 이름" value="값">radio의 경우 여러 개의 목록 중 하나만 선택하고자 할 때 name을 통해서 항목끼리 묶어주면 된다. radio의 경우에는 name과 id가 다르다. value의 경우 입력하여 웹 서버에 전송될 때 보내지는 값을 의미한다.   checkbox의 경우 다중선택이 가능하며 name과 id를 같게 설정한다.  성별 남자 여자 좋아하는 과일을 선택하세요.(다중선택가능) 사과 포도 키위 수박 등록하기   드.. 2024. 6. 30.
HTML의 폼 요소를 사용해보자 텍스트 입력한 줄 텍스트를 입력 받을 때 사용한다.사용자가 입력하는 문자 대신 다른 글자를 출력하여 다른 사람이 볼 수 없게 한다. 여러 줄의 텍스트를 입력받을 때 사용한다.이메일, url, 전화번호, 검색키워드 등 형식 검사 기능을 가진 텍스트 입력 창으로, 디지털기기에서 브라우저를 불러올 때 유형을 인식하여 그에 맞는 권장사항을 보여준다. 예를 들면 tel 타입의 경우, 스마트폰에서 숫자만 있는 키보드가 켜지는 것을 볼 수 있다. 이메일의 경우 @를 포함하지 않으면 정보를 전송할 수 없으며, url의 경우 http://와 .com이 포함되어야 정보를 전송할 수 있다. search의 경우 활성화되면 자체적으로 reset버튼이 있어 reset이 가능하다. tel의 경우는 전화번호를 자유롭게 입력하도록 허.. 2024. 6. 30.
HTML 웹 페이지를 통해 사용자 입력을 받는 폼을 만들어 보자 HTML에서는 폼을 만들기 위한 다양한 태그들을 제공한다. 폼의 경우 로그인, 등록, 검색, 예약, 쇼핑 등의 다양한 웹 서비스에서 사용자의 입력을 받기 위해 사용된다.  태그 기본 형식name 속성은 폼의 이름을 지정하는 것으로 자바스크립트에서 사용되며, action속성은 폼 데이터를 처리할 목적지를 지정한다. method속성은 폼 데이터를 웹 서버로 전송하는 형식을 설정하는데 삭제(delete), 추가(post, put), 변경(patch), 색인(get) 등의 속성이 있으나 대표적인 방식은 get 과 post 이다. get의 경우 url의 마지막에 정보가 작성이 되며, 개방적이기 때문에 주의 해야한다. post의 경우에는 get보다 담을 수 있는 데이터 용량이 크다. post의 경우 무거운 파일을 .. 2024. 6. 29.

티스토리툴바