📌컨트롤 안내 메시지placeholder HTML 5 --> 컨트롤의 안내 메시지는 placeholder 속성을 작성한다.암호를 입력할 때에는 '*'로 입력되게 할 수 있다.다중 텍스트 박스에서도 마찬가지로 placeholder를 사용한다. 📌필수 입력requiredHTML 5 로그인 아이디: 암호: 필수로 입력을 받으려고 할 때에는 required 속성을 사용한다.required 속성은 자동으로 focus를 가진다. 📌이메일, URL, 전화번호email, url, telHTML 5 이메일: URL: 전화번호: 📌숫자numberHTML 5 나..
💡FormForm은 입력양식 즉, 입력 컨트롤을 의미한다. 클라이언트(사용자)로부터 입력장치(키보드, 마우스, 터치 등)를 통해서 데이터를 입력받는 역할을 한다. 입력 데이터를 서버로 전송하며, 이를 업무에 활용하거나 데이터베이스에 저장하는 등의 일을 하게 된다. 예로 들어 텍스트 박스, 버튼, 체크 박스, 라디오 버튼 등이 있다. 태그의 사용 + 의 자식 태그들을 사용하여 구현한다.폼 태그 자체는 렌더링 하는 결과가 없어서 화면에 보이지 않는다.은 비주얼 한 요소라기보다는 기능을 구현하는 요소이다. 브라우저가 값을 받아서 사용할 수 있는 서버를 연결해 주어야 한다.html 파일과 JSP 파일을 생성하여 나이를 입력받아서 출력하는 프로그램을 작성해 보도록 하자. html 파일 생성 데이터 입력 ..
💡셀병합가로로 인접한 셀끼리 합치면 가로 셀병합, 세로로 인접한 셀끼리 합치면 세로 셀병합이다. 원본 테이블 1. 가로 셀병합가로 셀병합을 할 때에는 colspan 속성을 사용한다.colspan 속성을 2로 지정하면 다른 것들보다 2개만큼의 컬럼을 확보한다.가로 셀병합 1 2 3 4 가로 셀병합 1 2 --> 3 4 그리고 2번 셀을 삭제해주면 1번 셀만이 남아 가로 셀병합이 된다. 2. 세로 셀병합세로 셀병합을 할 때에는 rowspan 속성을 사용한다.세로 셀병합 1 2 3 4 ..
💡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 ..
📌인라인 태그와 블럭 태그모든 태그는 인라인 태그와 블럭 태그 두 분류 중 하나에 속한다.예로 들어 문단 태그와 제목 태그는 블럭 태그이며, 링크 태그와 이미지 태그는 인라인 태그이다.각 태그가 어디에 속해 있는지를 반드시 알고 있어야 한다.인라인 태그와 블럭 태그에 속하는 것에 따라서 랜더링의 결과가 서로 다르기 때문이다. 랜더링 (Rendering)HTML에서의 랜더링은 태그를 화면에 출력하는 작업을 의미한다. 💡인라인 태그인라인 태그(Inline Tag)는 자신의 내용물과 주변 태그의 내용물을 같은 라인에 출력을 한다. 같은 줄에 출력을 한다고 해서 Inline이다.PCDATA(텍스트)는 인라인 태그에 속하는 성질을 가진다. 태그는 인라인 태그이다. 태그가 인라인 요소들을 개행하는 역할을 한다..
💡이미지 삽입이미지를 삽입할 때 태그를 사용한다. 태그는 단독 태그이다. 속성1. img.srcsrc는 source의 약자로, 이미지의 경로를 나타낸다.경로는 절대 경로와 상대 경로 모두 사용할 수 있다. 2. img.alt대체 텍스트(alternate text)로서 이미지를 대신해서 출력할 문자열이다.이미지가 깨지는 경우 alt에 작성한 내용이 출력된다.alt는 필수 속성이지만, 작성하지 않아도 이미지가 출력되기는 한다.공공기관 프로젝트에서는 alt 속성을 음성으로 읽어주는 경우가 있으므로 alt 작성을 반드시 작성하도록 한다. 3. img.width4. img.height사진의 크기를 알고 싶을 때 개발자 도구를 활용할 수 있다.해당 이미지의 크기는 width 492 x height 640이다..
💡URL(URI)http://localhost:8090/client/html/ex12_url.htmlhttps://www.naver.com/https://www.google.co.kr/?hl=koUniform Resource IdentifierUniform Resource LocatorURL(URI)는 웹 상의 자원(페이지, 이미지, 영상, 프로그램 등)을 구분하기 위한 고유 주소값이다. URL과 URI의 관계URI가 정의하는 게 더 크고, 그 안에 부분집합으로 존재하던 게 URL로, URI가 상위 개념이다.하지만 URL을 제외한 URI의 기능이 거의 쓸모가 없어졌기 때문에 현재는 URL과 URI를 거의 동급으로 취급한다. 1. 프로토콜http://https://프로토콜(Hyper Text Transf..
💡Link 태그는 anchor(닻)의 약자로, Link 태그라고도 부른다. 링크 속성a.hrefa.targeta.href는 클릭하면 이동할 URL을 넣는 속성이다. 이때 href는 reference a hyperlink의 약자이다.a.target은 열거형으로 _self | _black | _parent | _top | 프레임명을 사용한다. a.href 속성내부 링크 외부 링크내부 링크는 같은 사이트 내의 이동을 의미한다.외부 링크는 다른 사이트의 이동을 의미한다.링크링크입니다.내부 링크링크입니다.외부 링크링크입니다.링크는 파란색 또는 보라색으로 색이 다르며, 밑줄이 생기는 게 일반적이다.외부 링크를 이용할 때에는 프로토콜(https://)을 반드시 붙여 주어야 한다. a.target 속성_blanka...
