개발 프로세스/Front-end
-
[JavaScript] 자바스크립트 기본 문법 : 코드 위치, 출력, 변수개발 프로세스/Front-end 2021. 6. 6. 21:27
1. 자바스크립트 코드는 HTML 파일 내에 포함되어 있어야 한다. 웹 문서(html) 내장 방식 외부 파일 참조 방식 2. 출력 document.write("Hello, world") var title1 = "컴퓨터와 IT기술의 이해" var title2 = "소셜미디어의 이해와 활용" var title3 = "멀티미디어 배움터 2.0" document.write("1" + title1 + "") document.write("2" + title2 + "") document.write("3" + title3 + "") 3. 기본 변수 타입 Number : 모든 숫자를 실수로 저장함 String Boolean undefined Null 4. 변수 선언 var 변수명 = 변수값; var a = 0; var ..
-
[CSS] 고급활용개발 프로세스/Front-end 2021. 4. 20. 20:01
1. 박스모델 content 콘텐츠 padding 내부 여백 border 테두리/경계선 margin 외부 공백 콘텐츠 패딩 테두리 여백 크기 관련 프로퍼티 width height padding-top padding-right padding-bottom padding-left border-top-width border-right-width border-bottom-width border-left-width margin-top margin-right margin-bottom margin-left 크기 관련 단축 프로퍼티 padding border-width margin 스타일 관련 프로퍼티 border-top-style border-right-style border-bottom-style border-lef..
-
[CSS] 스타일 기초개발 프로세스/Front-end 2021. 4. 19. 16:04
1. 스타일시트 삽입 방법 내부 스타일시트 삽입 외부 스타일시트 불러오기 인라인 스타일시트 삽입 2. 셀렉터 선택 방법 태그 셀렉터 p { font-size:10pt; color:red} id 셀렉터 #red { font-size:10pt; color:red} class 셀렉터 .red { font-size:10pt; color:red} 가상 클래스 셀렉터 a:link { color: blue } a:visited { color: green } h3:hover { font-size: 16pt} input 태그 셀렉터 input[type=password] { background: yellow } 3. 폰트, 문자 관련 CSS 폰트 p { font-family: "Times New Roman" "바탕" "s..
-
[HTML] 하이퍼링크와 멀티미디어개발 프로세스/Front-end 2021. 4. 15. 15:50
1. 하이퍼 링크 텍스트 혹은 이미지 target 속성의 값은 다음 5가지 종류로 지정할 수 있다. _blank : 새로운 브라우저 윈도우(탭)에 열기 _self : 현재 윈도우(탭)에서 열기 _parent : 부모 윈도우(탭) _top : 최상위 브라우저 윈도우 윈도우 이름 : 해당 이름의 윈도우 download : 링크가 클릭되면 href에 지정된 파일이 다운로드 됨. 1-1. 텍스트에 링크 만들기 학생 등록 페이지로 이동합니다. student/register.html : 상대주소 target="_blank" : 새 윈도우(탭)에 출력 1-2.이미지에 링크 만들기 http:// 절대주소 1-3. 같은 웹페이지 내에서 연결하기 (책갈피) 서론으로 가기 ... 1장 서론 3. 비디오 삽입 이 태그를 지원..
-
[HTML] 시맨틱 웹 Semantic Web : 문서구조화개발 프로세스/Front-end 2021. 4. 14. 17:55
페이지나 섹션의 머리말. 페이지 제목, 페이지를 소개하는 간단한 설명이 들어간다. navigation. 하이퍼링크들을 모아 놓은 섹션. 페이지 내 목차를 만들기 위해 주로 사용한다. 문서의 장(chapter, section) 혹은 절을 구성하는 역할. 본문과 연관되어 있지만, 독립적인 콘텐츠를 담는 영역 본문 흐름에서 약간 벗어난 노트나 팁, 관련 기사. 주로 페이지의 오른쪽이나 왼쪽에 배치된다. 페이지나 섹션 내에 꼬리말. 주로 저자나 저적권 정보 등을 표시한다.
-
[HTML] HTML 문서 기본개발 프로세스/Front-end 2021. 4. 13. 19:16
1. HTML 문서 구성 글자 크기 제일 큰 제목 제목 제목 제목 제목 글자 크기 제일 작은 제목 단락 구분선 줄바꿈 h1, h2 ...h6 : heading. 이 가장 큰 제목이고 가 가장 작은 제목이다. : 툴팁(tooltip). 객체 위에 마우스 커서 올려놨을 때 뜨는 문구. 모든 태그의 title 속성으로 들어감. : paragraph. 로 끝나는 문단 다음에는 자동으로 빈 줄이 생긴다. : horizontal. 종료 태그가 없다. 개발자 포맷 그대로 출력하기, 텍스트 꾸미기 진하게. 단순 텍스트 표시 진하게(강조). 브라우저에 중요하다고 알림. 웹 접근성에 기여. 기울임(강조). 브라우저에 중요하다고 알림. 웹 접근성에 기여. 이탤릭체 (기울임). 단순 텍스트 표시 작게 중앙선 밑줄 위첨자 아래..
-
[HTML] 웹폼 Webform : 색 입력, 시간 정보 입력, 숫자 입력, 파일 선택개발 프로세스/Front-end 2021. 4. 13. 16:43
5. 색 입력 컬러 다이얼로그를 출력하여 색을 입력받는다. 색 선택 value : 컬러 다이얼로그의 초기 색. 색 선택 6. 시간 정보 입력 type 속성값 입력 데이터 value(초기값) 형식 년/월 2021-04 년/몇 번째 주 2021-W15 년/월/일 2021-04-13 시/분 15:09 해당 나라의 시간 년/월/일/오전, 오후/시/분/초/100분의 1초 2021-04-13T15:09:10.32 month : week : date : time : local : 7. 숫자 입력 스핀 버튼으로 정교한 값 입력 제작권수 : 슬라이드바로 대략적인 값 입력 표지두께 : 1mm 5mm 제작권수 : 표지두께 : 1mm 5mm 9. 파일 선택하기
-
[HTML] 웹폼 Webform : <label>, <fieldset>개발 프로세스/Front-end 2021. 4. 13. 16:36
4. 로 폼 요소의 캡션 만들기 태그를 이용하면 캡션과 폼 요소를 한 단위로 묶어 많은 장점을 가진다. 대표적으로 캡션 문자열 위에 마우스를 클릭해도 폼 요소를 클릭한 것으로 처리된다. 을 사용하는 방법에는 다음 두 가지가 있다. 짜장면 짜장면 : 10. 폼 요소들의 그룹핑, 태그로 폼 요소들을 그룹으로 묶을 수 있으며, 그룹의 제목은 태그로 표현한다. 예약자 정보 예약자 : 휴대폰 : 예약인원 : 2명 3명 4명 5명 6명 7명 8명 예약자 정보 예약자 : 휴대폰 : 예약인원 : 2명 3명 4명 5명 6명 7명 8명