KPU CE

위와 같은 내용의 웹페이지를 만들어 보세요. 코드 연습문제 표 만들기 이름 주소 성별 금액 유현석 수원시 남 1000원 김용민 시흥시 2500원 합계 3500원 아이디 입력받기 id : password : submit : 하이퍼 링크 네이버 다음 티스토리

label 라벨이란 특정 input 태그를 지정해줄 때 쓰인다. 바로 예제를 보자. text : password : comment : default 빨간색 id 속성과 for 속성이 쓰인다. 쓰임새는 위에 코드와 같다. label은 for 안에 있는 텍스트에 맞는 id 찾아간다. 만약 label인 빨간색 텍스트를 누른다면 체크박스에 체크가 된다. label은 추가한다면 사이트를 좀 더 세련되게 만들 수 있다.

버튼 이번 시간에는 버튼에 대해서 알아보자. submit, reset, button이라는 버튼에 대해 알아보자 submit은 제출하는 버튼으로 서버에 정보를 전송하는데 쓰인다. reset은 초기화하는 버튼으로 초기화 상태로 돌아온다. ex)텍스트박스의 value값으로 돌아간다. button은 아무 기능이 없는 ui만 버튼으로 된 버튼이다. button 버튼마다 value값은 버튼에 이름이다. 기능은 아까 말한대로이다.

선택 박스 만들기 선택 박스를 만드려면 select 태그와 option 태그를 이용해서 만들 수 있다. 색상 선택 검정 빨간 파란 초록 이런식으로 코드를 작성하면 다음과 같이 화면에 나타나게 된다. 하지만 다중으로 선택을 하려면 select에 multiple 속성을 작성을 해야한다. 색상 선택 검정 빨간 파란 초록 이렇게 간단하게 만들 수 있습니다.

default 텍스트 입력받기 텍스트를 입력받기 위해서는 태그를 사용하면 되는데 뒤에 붙는 name, value 속성은 정보를 보냈을 때 name은 무슨 정보가 보내졌는지 알려주는 하나의 약속 같은 것이다. value는 처음 초기값을 설정해 줄 수 있다. 예를 보면 다음과 같다. 위와 같이 텍스트 박스가 default로 초기화 되어있는 것을 볼 수 있다. 하지만 위와 같은 텍스트 박스는 한줄로 밖에 입력을 못받는다. 여러 줄을 입력 받기 위해서는 라는 태그를 사용하여야한다. default 위와 같이 태그에 속성으로 rows = "2" cols = "20" 과 같이 행과 열의 크기를 조절하면서 사용할 수 있다.

정보 입력받기 HTML에서 정보를 입력 받기 위해서는 form태그와 input 태그를 사용하는데 사용법은 다음과 같다. 아이디 : 비밀번호 : 태그는 단락을 나누는 태그라고 알아두면 좋다. 태그에 action속성은 ""안에 주소를 넣어서 입력받은 주소를 해당 주소로 보내는 역할을 한다. 는 텍스트를 입력할 수 있는 태그이고는 패스워드를 입력하는 태그로 입력를 하게 되면 점으로 표기된다. 태그는 버튼을 만드는 태그로 제출이라고 표기된 버튼을 만들 수 있다. 버튼을 누르면 action에 지정한 주소로 정보를 전달 하게 된다. 그리고 각 input마다 name이라는 속성이 있는데 이 속성은 해당 주소로 이동했을 때 URL에 name에 내용이 같이 적혀져서 나와 무슨 정보가 입력되었는지 알 수 있다.

표 만들기 - 3 태그를 사용하면 글씨가 굵어지는걸 볼 수 있다. 코드는 전 파트에 만 추가해보았다. 이름 성별 주소 유현석 남 수원 김용민 여 시흥 글씨가 굵어진 것을 볼 수 있다.

표 만들기 - 2 표에서도 구조를 나눌 수 있다. , , 으로 세분류로 나눌 수 있다. 이전 표 만들기를 구조를 나누면 다음과 같다. 이름 성별 주소 유현석 남 수원 김용민 여 시흥 thead는 무조건 맨 첫번째 행 tfoot은 무조건 맨 마지막 행이라는 특징을 가지고 있다.

표 만들기 - 1 html에서 제공하는 함수를 이용해서 표를 만들 수 있다. 일단은 태그를 써줘야 한다. 그리고 한 행을 만들라면 을 써야한다. 그리고 모든 요소에는 라는 태그를 붙여야한다. 코드는 다음과 같다. 이름 성별 주소 유현석 남 수원 김용민 여 시흥 다음과 같이 코드를 작성하면 다음과 같이 표 같이 정렬 행과 열로 정렬되서 나오는 것을 볼 수 있다. 여기에 표 처럼 줄을 넣고 싶으면 태그에 라고 설정하면 되고 안에 숫자는 굵기를 설정해주는 것이다. 코드를 보면 다음과 같다. 이름 성별 주소 유현석 남 수원 김용민 여 시흥 조금 투박해보인다. 세련되게 하고 싶으면 border 속성말고 css로 해야된다. 본 내용은 생활코딩 사이트에서 더 자세하게 보실 수 있습니다. https://opentuto..

웹에서도 자바스크립트, css, html을 할 수 있다. jsfiddle.net/ JSFiddle - Code Playground jsfiddle.net 이 사이트에서 가능 (구름 ide보다 빠르고 좋은 것 같다.)