Developer

font-family : 폰트패밀리란 웹 문서 전체에 'Nanum Gothic'을 적용하는데, 만일 해당 글꼴이 없으면 다음 글꼴인 'sans-serif'를 적용하고 그 글꼴도 없다면 '굴림' 글꼴로 적용하라는 뜻 font-family: 'Nanum Gothic', sans-serif; ex. font-family : 글꼴지정 브라우저 기본 글꼴 사용 Nanum Pen Script 웹 폰트 사용 Nanum Pen Script 웹 폰트 사용 출력화면 font-size : 글자 크기 지정 font-size: 절대크기 | 상대크기 | 크기 | 백분율 사용할 수 있는 값 : 절대크기, 상대크기, 숫자, 백분율 기본값은 상대크기인 medium이다 font-size 속성은 상속이 된다 px 단위 px 단위를 사용하..

@font-face 속성 웹폰트(web-font) : 웹 문서 안에 글꼴정보도 함께 저장하고 있다가 사용자가 웹문서에 접속하면 글꼴을 사용자 시스템으로 다운로드시켜 사용하는 글꼴 사용자 시스템에 없는 글꼴이더라도 웹 제작자가 의도한 대로 텍스트를 표시할 수 있다 구글 웹폰트 사용하기 1. https://fonts.google.com/earlyaccess 2. 한글 폰트 검색 3. Link 항목에 있는 소스 복사 & 글꼴 이름 기억 4. 웹 문서의 style 태그 안에 붙여넣기 5. font-family 속성을 이용하여 웹 폰트 글꼴 이름 사용 항목 내의 내용을 복사해 사용하면 된다 import속성을 사용할 수도 있음

스타일 태그 스타일 형식 선택자 {스타일속성 : 속성값; ... } 내부 스타일시트 : head태그 안에서 정의 인라인스타일 : 태그 안에 style속성을 통해 외부 스타일시트 : .css파일로 정의한 후 link태그를 이용해 불러온다 주요 선택자들 * : 전체 선택자 페이지 내부에 있는 모든 요소들을 대상으로 적용할 때 사용 웹브라우저마다 기본 마진, 패딩값이 있다 브라우저마다 그 값이 같지 않기 때문에 일반적으로 패딩과 마진값을 0으로 리셋한다 * { margin: 0; padding: 0; } 태그 선택자 태그명 { 스타일 } 특정 태그에 적용 클래스 선택자 문서 안에서 여러 번 반복할 스타일을 지정할 때 사용한다 .스타일명 { 스타일 } 태그에서 class를 통해 불러온다 태그명.스타일명 { 스타..

회원 가입 양식 회원 기본 정보 아이디 : 4~12자의 영문 대소문자와 숫자로만 입력 비밀번호 : 4~12자의 영문 대소문자와 숫자로만 입력 비밀번호확인 : 메일주소 : 예) id@domain.com 이름 : 개인 신상 정보 우편번호 도로명주소 상세주소 주민등록번호 : 생일 : 년 1 2 3 4 5 6 7 8 9 10 11 12 월 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 일 관심분야 : 컴퓨터 인터넷 여행 영화감상 음악감상 자기소개

style select, optgroup, option , , 여러 옵션 중에서 선택 – 드롭다운 목록 공간을 최소한으로 사용하면서 여러 옵션 표시 가능 select 태그 속성 size - 화면에 표시될 드롭다운 메뉴의 개수 multiple - 여러개 항목 선택 가능. option 태그의 속성 value - 값 selected - 기본 선택옵션 지정. optgroup 태그 여러 항목을 그룹을 묶을 때 사용 label 속성을 사용해 그룹 제목을 붙임 optgroup의 속성 value : 값 label : 브라우저에 표시할 레이블 select, optgroup,option 건축공학과 기계공학과 산업공학과 전기전자공학과 컴퓨터공학과 화학공학과 건축공학과 기계공학과 산업공학과 전기전자공학과 컴퓨터공학과 화학공학..

autofocus, placeholder autofocus 페이지를 불러오자마자 원하는 폼 요소에 마우스 커서 표시 placeholder 입력란에 표시하는 힌트로, 필드를 클릭하면 사라짐 autofocus , placeholder 이름 학번 readonly : 내용을 보기만 하고 입력하지 못하게 함 속성 값 없이 readonly 라고만 쓴다 readonly=“readonly”, readonly=“true”로 표시하기도 함 readonly 영어회화(초급) required 필수 필드 체크 속성 값 없이 required 라고만 입력 (required=“required”라고 해도 됨) 필수 필드는 브라우저에서 직접 체크하는 것이므로 오류 메시지 내용은 브라우저들마다 다르게 나타남 required 이름 min, ..

input 태그 사용자가 입력하는 부분은 거의 태그를 이용해 처리 입력하는 내용의 종류는 태그의 type 속성을 통해 지정 type 속성 값에 따라 함께 사용할 수 있는 속성들도 달라진다 태그를 이용해 캡션을 붙일 수 있다 CSS를 이용해 각 요소마다 다른 형태로 꾸밀 수 있다 type 속성값 type = “hidden” 화면 상의 폼에는 보이지 않는다 폼을 서버로 전송할 때 서버로 함께 전송되는 요소 type = “text” 한 줄짜리 텍스트 입력 필드 주로 아이디나 이름, 주소 등 텍스트 입력 type = “password” 비밀번호 입력란 사용자가 입력하는 내용이 ‘ * ’나 ‘•’로 표시된다 type = “search” 검색 필드 검색 창에 x 표시가 되어 검색어 삭제 쉬움 type = “url”..

form 태그 : 폼을 만드는 기본 태그 과 사이에 여러 폼 요소 삽입 form태그의 속성 method : 사용자가 입력한 내용을 서버쪽으로 어떻게 넘겨줄지 지정 get : 주소 표시줄에 사용자가 입력한 내용이 넘어간다 ; 256byte ~ 4096byte까지 넘길 수 있다 post : 대부분 이 방식 사용자가 입력한내용을 header를 통해 넘겨준다 입력길이 제한을 받지않는다 입력내용이 눈에 보이지 않는다 name : 폼의 이름 action : 태그 안의 내용을 처리해줄 서버상의 대상을 지정한다. target : 지정한 스크립트 파일을 현재 창이 아닌 다른 위치에 열도록 지정. 검색어 입력 label 태그 : 폼 요소에 레이블(텍스트)을 붙이는 태그 라디오 버튼이나 체크 박스에서 텍스트 부분을 클릭해도..

하이퍼링크 : 다른 문서, 혹은 다른 사이트로 바로 연결해 주는 기능 외부 사이트나 외부 페이지로도 연결 메뉴 뿐만 아니라 원하는 곳에 링크를 만들 수 있다 태그 - 하이퍼링크 - 반드시 href속성을 함께 사용해서 어떤 대상으로 연결하는지 알려주어야 한다. 속성 - href - 링크한 문서나 사이트의 주소를 입력 - target - 링크한 내용이 표시될 위치를 지정. - download - 링크한 내용을 보여주는것이 아니라 다운로드함. - rel - 현재 문서와 링크한 문서의 관계를 알려줌. - hreflang - 링크한 문서의 언어를 지정. - type - 링크한 문서의 파일 유형을 알려줌. target 속성 – 새 탭에서 링크 열기 다른 사이트로 링크하거나 현재 페이지를 유지한 상태에서 링크 페이지..

: 표를 만드는 태그 서브 태그 표의 이름 - 분류 - 칸추가 - 줄추가 : 표 속성 : BORDER : 표의 테두리 두께 BORDERCOLOR : 표의 테두리 색상 BACKGROUND : 표 전체의 배경 색상 CELLSPACING : 셀과 셀 사이의 간격 CELLPADDING : 셀과 셀 내용 사이의 간격 WIDTH : 표 전체의 가로 넓이 HEIGHT : 표 전체의 세로 넓이 ALIGN : 표 전체의 왼쪽/가운데/오른쪽 정렬 : 주소록 속성 : ALIGN : TOP, BOTTOM : 행(ROW) 추가 속성 : ALIGN : LEFT, CENTER, RIGHT VALIGN : TOP, MIDDLE, BOTTOM : 행/열의 제목 (table header) 속성 : ALIGN : LEFT, CENTER,..