코밍이의 하루

1. 개발 환경 구분 내용 사용 언어 HTML5, CSS3 개발환경 Visual Studio Code 참고 도서 [Do it] HTML5 + CSS3 웹 표준의 정석 웹브라우저 Chrome 2. 주요 문법 1) 전체 선택자 - 말 그대로 스타일을 모든 요소에 적용할 때 사용 - 전체 선택자로는 *(별표) 사용 기본형 * { 속성 : 속성 값; 속성: 속성 값; ...} 2) 태그 선택자 - 특정 태그가 쓰인 모든 요소에 스타일 적용 기본형 예제 태그 { 스타일} p { font-size: 12px; font-family: 돋움; } - 태그 VS 요소 ① 태그 : 말 그대로 태그 자체를 가리키는 말 ② 요소 : 태그가 적용된 것 3) 클래스 선택자 - 특정 부분에 스타일 적용 - 클래스 이름 앞에 마침표..

1. 개발 환경 구분 내용 사용 언어 HTML5, CSS3 개발환경 Visual Studio Code 참고 도서 [Do it] HTML5 + CSS3 웹 표준의 정석 웹브라우저 Chrome 2. 스타일과 스타일 시트 1) 스타일(style) - HTML 문서에서 자주 사용하는 글꼴이나 색상, 정렬, 각 요소들의 방법 등 문서의 겉모습을 결정짓는 내용들 2) 웹 문서 구성 - HTML : 웹 사이트의 내용 나열 - CSS : 웹 문서의 디자인 구성 3) 스타일 형식 기본형 ①p { ②text-align : ③center; } /* 텍스트 단락을 중앙에 정렬하는 스타일 규칙 */ ① 선택자 : 앞으로 만들 스타일 규칙을 어디에 적용할 것인지 나타냄, 셀렉터라고도 불림 ② 스타일 속성 ③ 속성 값 4) 스타일..

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, JS, jQuery 개발환경 Visual Studio Code 참고 도서 [Do it] 자바스크립트 + 제이쿼리 입문 웹브라우저 Chrome 2. 주요 문법 1) $.fn.extend() 메소드 - 개발자가 직접 제작한 함수를 jQuery에 확장시켜 주는 역할 기본형 $.fn.extend({ 확장 함수명: function(매개변수1, 매개변수2,...){ $(this); 자바스크립트 코드; } }); $("요소 선택").확장 함수명(인자값1, 인자값2); $.fn.확장 함수명 = function(매개변수1, 매개변수2, ...) { ... } 3. 소스 코드 및 실행 결과 1) jquery_plugin_5_test.html - 이벤트와 경고 창..