📌진행도 progress progress 컨트롤로 진행 중이라는 것을 화면상에 표시할 수 있다. progress에 value 속성을 넣어서 진행도를 나타내는 게 일반적이다. max 최댓값 속성으로 진행도를 수치화시켜 화면에 표시할 수 있다. meter progress와 비슷한 것으로 meter 컨트롤이 있다. meter는 모든 수치(숫자)를 막대그래프로 표시할 수 있도록 만들어 둔 것이다. min과 max를 사용하여 숫자 범위를 조절할 수 있다. 또한, high와 low로 적정 수준의 범위에 따라서 색을 다르게 표시할 수 있다. 📌세부사항 detail 자바란? 자바는 어쩌구 저쩌구 어쩌구 저쩌구 어쩌구 저쩌구 어쩌구 저쩌구 어쩌구 저쩌구 어쩌구 저쩌구 어쩌구 저쩌구 어쩌구 저쩌구 어쩌구 저쩌구 어쩌구 저..
📌컨트롤 안내 메시지 placeholder HTML 5 컨트롤의 안내 메시지는 placeholder 속성을 작성한다. 암호를 입력할 때에는 '*'로 입력되게 할 수 있다. 다중 텍스트 박스에서도 마찬가지로 placeholder를 사용한다. 📌필수 입력 required HTML 5 로그인 아이디: 암호: 필수로 입력을 받으려고 할 때에는 required 속성을 사용한다. required 속성은 자동으로 focus를 가진다. 📌이메일, URL, 전화번호 email, url, tel HTML 5 이메일: URL: 전화번호: 📌숫자 number HTML 5 나이: 최소 최대 범위를 min과 max로 정할 수 있다. 그리고 step으로 증감치를 정해줄 수 있다. 📌범위 range HTML 5 범위: range 컨..
💡Form Form은 입력양식 즉, 입력 컨트롤을 의미한다. 클라이언트(사용자)로부터 입력장치(키보드, 마우스, 터치 등)를 통해서 데이터를 입력받는 역할을 한다. 입력 데이터를 서버로 전송하며, 이를 업무에 활용하거나 데이터베이스에 저장하는 등의 일을 하게 된다. 예로 들어 텍스트 박스, 버튼, 체크 박스, 라디오 버튼 등이 있다. 태그의 사용 + 의 자식 태그들을 사용하여 구현한다. 폼 태그 자체는 렌더링 하는 결과가 없어서 화면에 보이지 않는다. 은 비주얼 한 요소라기보다는 기능을 구현하는 요소이다. 브라우저가 값을 받아서 사용할 수 있는 서버를 연결해 주어야 한다. html 파일과 JSP 파일을 생성하여 나이를 입력받아서 출력하는 프로그램을 작성해 보도록 하자. html 파일 생성 데이터 입력 나..
💡셀병합 가로로 인접한 셀끼리 합치면 가로 셀병합, 세로로 인접한 셀끼리 합치면 세로 셀병합이다. 원본 테이블 1. 가로 셀병합 가로 셀병합을 할 때에는 colspan 속성을 사용한다. colspan 속성을 2로 지정하면 다른 것들보다 2개만큼의 컬럼을 확보한다. 가로 셀병합 1 2 3 4 가로 셀병합 1 3 4 그리고 2번 셀을 삭제해주면 1번 셀만이 남아 가로 셀병합이 된다. 2. 세로 셀병합 세로 셀병합을 할 때에는 rowspan 속성을 사용한다. 세로 셀병합 1 2 3 4 세로 셀병합 1 2 4 그리고 3번 셀을 삭제해주면 1번 셀만이 남아 세로 셀병합이 된다. 더보기
💡Table 업무용 프로그램들은 표로 시작해서 표로 끝이 난다. 다른 태그에 비해 표를 구성하는 태그의 수가 많은 편이다. 💡표 만드는 규칙 2 x 2 표 생성 1. 가장 바깥쪽의 큰 상자를 1개 만든다. 2. 가로가 똑같은 상자를 2 개 만들어서 큰 상자에 넣는다. (행의 역할) 3. 작은 상자를 4개 만들어서 가로가 똑같은 상자에 2개씩 넣는다. (셀의 역할) 1. 큰 상자로서 전체 컨테이너 역할을 한다. 2. table row 중간 상자로서 행 역할을 한다. 3. table data 작은 상자로서 셀 역할을 한다. 데이터를 담는 역할을 한다. 4. table header 작은 상자로서 제목을 출력하는 셀 역할을 한다. 표 생성 2행 2열 테이블 1 2 3 4 기본적으로 표를 생성했지만, 경계가 없어..
📌인라인 태그와 블럭 태그 모든 태그는 인라인 태그와 블럭 태그 두 분류 중 하나에 속한다. 예로 들어 문단 태그와 제목 태그는 블럭 태그이며, 링크 태그와 이미지 태그는 인라인 태그이다. 각 태그가 어디에 속해 있는지를 반드시 알고 있어야 한다. 인라인 태그와 블럭 태그에 속하는 것에 따라서 랜더링의 결과가 서로 다르기 때문이다. 랜더링 (Rendering) HTML에서의 랜더링은 태그를 화면에 출력하는 작업을 의미한다. 💡인라인 태그 인라인 태그(Inline Tag)는 자신의 내용물과 주변 태그의 내용물을 같은 라인에 출력을 한다. 같은 줄에 출력을 한다고 해서 Inline이다. PCDATA(텍스트)는 인라인 태그에 속하는 성질을 가진다. 태그는 인라인 태그이다. 태그가 인라인 요소들을 개행하는 역할..
💡이미지 삽입 이미지를 삽입할 때 태그를 사용한다. 태그는 단독 태그이다. 속성 1. img.src src는 source의 약자로, 이미지의 경로를 나타낸다. 경로는 절대 경로와 상대 경로 모두 사용할 수 있다. 2. img.alt 대체 텍스트(alternate text)로서 이미지를 대신해서 출력할 문자열이다. 이미지가 깨지는 경우 alt에 작성한 내용이 출력된다. alt는 필수 속성이지만, 작성하지 않아도 이미지가 출력되기는 한다. 공공기관 프로젝트에서는 alt 속성을 음성으로 읽어주는 경우가 있으므로 alt 작성을 반드시 작성하도록 한다. 3. img.width 4. img.height 사진의 크기를 알고 싶을 때 개발자 도구를 활용할 수 있다. 해당 이미지의 크기는 width 492 x heigh..
💡URL(URI) http://localhost:8090/client/html/ex12_url.html https://www.naver.com/ https://www.google.co.kr/?hl=ko Uniform Resource Identifier Uniform Resource Locator URL(URI)는 웹 상의 자원(페이지, 이미지, 영상, 프로그램 등)을 구분하기 위한 고유 주소값이다. URL과 URI의 관계 URI가 정의하는 게 더 크고, 그 안에 부분집합으로 존재하던 게 URL로, URI가 상위 개념이다. 하지만 URL을 제외한 URI의 기능이 거의 쓸모가 없어졌기 때문에 현재는 URL과 URI를 거의 동급으로 취급한다. 1. 프로토콜 http:// https:// 프로토콜(Hyper T..
