코밍이의 하루

1. 개발 환경 구분 내용 사용 언어 HTML5, CSS3 개발환경 Visual Studio Code 참고 도서 [Do it] HTML5 + CSS3 웹 표준의 정석 웹브라우저 Chrome 2. 주요 폼 요소 태그 1) 태그 - 폼을 전송하거나 리셋하기 위한 버튼 삽입 기본형 내용 - 태그의 속성 속성 설명 submit - 폼을 서버로 전송 - 전송하기과 같이 사용 reset - 폼에 입력한 모든 내용 초기화 - 다시 쓰기과 같이 사용 button - 버튼 형태만 만들 뿐 자체 기능 없음 - 주소 입력과 같이 사용 2) 태그 - 입력하는 값이 계산 결과라는 것을 브라우저에게 알려줌 기본형 내용 3) 태그 - 작업 진행 상태를 나타낼 때 사용 기본형 - 태그 속성 속성 설명 value - 작업 진행 상태를..

1. 개발 환경 구분 내용 사용 언어 HTML5, CSS3 개발환경 Visual Studio Code 참고 도서 [Do it] HTML5 + CSS3 웹 표준의 정석 웹브라우저 Chrome 2. 주요 문법 1) , , - 드롭다운 목록 만들기 - 드롭다운 목록 : 클릭했을 때 옵션들이 요소 아래쪽으로 펼쳐짐 - 여러 옵션 중에서 선택하도록 하고 싶을 때 사용 - 공간을 최소한으로 사용하면서 여러 옵션을 표시하기에 적당 기본형 내용1 내용2 내용3 ... - 태그의 속성 속성 설명 size 화면에 표시될 드롭다운 메뉴의 항목 개수 지정 multiple 브라우저 화면에 여러 개의 옵션이 함께 표시되면서 Ctrl 키를 누른 상태로 드롭다운 메뉴에 있는 여러 항목을 선택할 수 있음 - 태그 안의 태그의 속성 속..

1. 개발 환경 구분 내용 사용 언어 HTML5, CSS3 개발환경 Visual Studio Code 참고 도서 [Do it] HTML5 + CSS3 웹 표준의 정석 웹브라우저 Chrome 2. 주요 문법 1) 태그의 다양한 속성 유형 설명 autofocus 페이지를 불러오자마자 폼의 요소 중에서 원하는 요소에 마우스 커서 표시 placeholder - 사용자가 텍스트를 입력할 때 도움이 되도록 입력란에 힌트 내용 표시할 수 있음 - 해당 필드를 클릭하면 힌트 내용이 사라지게 할 수 있음 redonly 해당 필드를 읽기 전용으로 바꿈(입력 불가) required 필수 필드 지정 min 해당 필드의 최솟값 지정(value값) max 해당 필드의 최댓값 지정(value값) step 허용된 범위 내의 숫자의 ..

1. 개발 환경 구분 내용 사용 언어 HTML5, CSS3 개발환경 Visual Studio Code 참고 도서 [Do it] HTML5 + CSS3 웹 표준의 정석 웹브라우저 Chrome 2. 주요 문법 1) 태그 - 사용자가 입력하는 부분 만들 때 사용 2) id 속성 사용하기 - 최소한 1개 이상의 문자여야 하고 공백이 없어야 사용 가능 - 3) input 태그의 type 속성 유형 설명 hidden 사용자에게는 보이지 않지만 서버로 넘겨지는 값을 가짐 text 한 줄짜리 텍스트를 입력할 수 있는 텍스트 상자를 넣음 search 검색 상자를 넣음 tel 전화번호 입력 필드를 넣음 url URL 주소를 입력할 수 있는 필드를 넣음 email 메일 주소를 입력할 수 있는 필드를 넣음 password 비..

1. 개발 환경 구분 내용 사용 언어 HTML5, CSS3 개발환경 Visual Studio Code 참고 도서 [Do it] HTML5 + CSS3 웹 표준의 정석 웹브라우저 Chrome 2. 주요 문법 1) 태그 - 폼을 만드는 가장 기본적인 태그 - 태그와 태그 사이에 여러 폼 요소와 관련된 태그를 넣음. 2) form 태그의 속성 속성 설명 method 사용자가 입력한 내용들을 서버 쪽 프로그램으로 어떻게 넘겨줄지 지정 속성 값 get - 주소 표시줄에 사용자가 입력한 내용이 그대로 드러나며 256byte~4096byte까지의 데이터만 서버로 넘길 수 있음 post - 대부분 post 방식을 사용하며 사용자의 입력을 표준 입력으로 넘겨주기 때문에 입력 내용의 길이에 제한을 받지 않고 사용자가 입력..

1. 개발 환경 구분 내용 사용 언어 HTML5, JS 개발환경 Visual Studio Code 참고 도서 [Do it] HTML5 + CSS3 웹 표준의 정석 웹브라우저 Chrome 2. 주요 문법 1) SVG 이미지 - 이미지를 확대하거나 축소해도 원래의 깨끗한 상태를 유지하는 이미지(=벡터 이미지) - 로고나 아이콘에서 많이 사용되며 데이터 시각화에서 차트나 다이어그램, 지도 등 구현할 때도 많이 사용 3. 소스 코드 및 실행 화면 - insert-svg.html SVG 이미지 삽입하기 - check-svg.html SVG 이미지 삽입하기