햄스타69

목차 태그의 다양한 속성 1) 입력 커서 표시하기 autofocus 속성 ① 페이지 로딩 후 바로 폼 요소 중 원하는 요소에 마우스 커서 표시 ② HTML5 이전에는 javascript 문법으로 처리했지만 HTML5에서 autofocus라는 속성으로 간단하게 구현 2) 힌트 표시하기 placeholder 속성 ① 사용자가 텍스트를 입력할 때 도움이 되도록 적당한 힌트 내용 표시 3) 읽기 전용 필드 만들기 readonly 속성 ① 입력란에 텍스트를 표시하고 사용자가 입력 불가능하도록 만듬 ② 읽기 전용으로 만들 때 readonly=“true“, readonly=“readonly“, readonly 로 설정. 기본 값은 false ③ 읽기 전용 해제 시에는 readonly 속성을 삭제하거나 readonly..

목차 폼 만들기 1) 폼이란? ① 회원가입, 로그인, 쇼핑몰의 주문화면 등 웹 사이트로 정보를 보낼 수 있는 요소들을 폼(form)이라고 함 2) 폼의 동작 방식 ① 사용자가 아이디와 비밀번호 입력 후 로그인 버튼 클릭 ② 사용자가 입력한 아이디와 비밀번호가 웹 서버로 전송 ③ 서버에서 사용자 데이터베이스를 검색해서 사용자가 전송한 아이디와 비밀번호가 서로 일치하는 정보 인지 확인 후 결과를 브라우저로 리턴 ④ 일치하는 정보가 사용자 데이터베이스에 있을 경우 로그인 성공, 아니면 로그인 실패 화면으로 이동 3) 폼 만들기 ① 은 폼을 만드는 가장 기본적인 태그 ② ~ 사이에 여러 폼 요소 관련 태그 주입 ③ 기본형 여러 폼 요소 4) 사용 속성 속성 설명 method 사용자가 입력한 정보를 서버로 전송할..

목차 이미지 1) 웹에서 사용하는 이미지 형식 파일 형식 설명 GIF(Graphic Interchange Form) 표시 가능한 최대 색상 수 256가지. 다른 이미지 형식에 비해 파일크기가 작아서 아이콘이나 불릿 등 작은 이미지에 주로 사용. 움직이는 이미지 제작 가능 JPG/JPEG (Joint Photographic Experts Group) GIF보다 다양한 색상과 명암 표현 가능. 저장을 여러 번 반복 시 화질 저하. PNG(Portable Network Graphics) 투명 배경을 만들면서 다양한 색상 표현 가능. 네트워크용으로 개발되었기 때문에 최근에 많이 사용. SVG(Scalable Vector Graphics) ① gif, jpg/jpeg, png 파일을 축소하거나 확대하면 이미지가 ..

목차 1) 기본적인 표 만들기 , , , 태그 ① : 표의 자리를 지정해 주는 태그 ② : 테이블에 행(row)를 추가해주는 태그 ③ : 내에서 행의 제목이 되는 태그 ④ : 내에서 행의 내용이 되는 태그 2) 행 또는 열 합치기 colspan, rowspan 속성 ① colspan : 지정한 셀 개수만큼 가로로 합치기 ② rowspan : 지정한 셀 개수만큼 세로로 합치기 3) 여러 열을 묶어 스타일 지정하기 , 태그 ① : 컬럼 그룹 생성, 태그 뒤 , 태그 전에 사용 ② : 내에서 컬럼에 적용할 스타일 미리 지정 ※ 행을 묶는 태그는 없다!! 의 개수와 테이블의 열 개수는 동일해야 한다. 4) 표에 제목 붙이기 - 중앙 태그 ① 태그 뒤에 바로 사용, 표 위쪽 중앙에 표시, 안에 다른 태그를 사용해..

W3C HTML 검사기 https://validator.w3.org/ 접속 validate by URL : url을 입력하여 해당페이지를 검사한다. validate by File Upload : 파일로 업로드해서 검사한다. validate by Direct input : 바로 코드를 웹페이지 안에 적어 검사한다 에러가 나는 코드를 확인해 볼 수 있다.

목차 1) 순서 없는 목록 만들기 , 태그 ① 순서가 필요하지 않은 목록(unorder list)을 만들 때 사용 ② 안에 각 항목을 표시할 때 사용 ③ 사용 시 각 항목 앞에 작은 원이나 사각형 같은 불릿(bullet)이 붙음 ※ HTML4 태그의 type 속성을 이용하여 불릿 수정했지만 HTML5에서는 CSS의 list-style-type 속성을 이용하여 불릿 수정 2) 순서 목록 , 태그 ① 순서가 필요한 목록(order list)을 만들 때 사용 ② 안에 각 항목을 표시할 때 사용 ③ 에서는 목록의 숫자 표기 방법이나 시작하는 숫자 지정 가능 3) 숫자와 순서 바꾸기 ① type 속성 : 숫자의 종류를 선택 ② start 속성 : 시작되는 숫자 선택 ③ reversed 속성 : 항목 역순 표시 ※..

목차 기본태그 hn 태그 제목 표시하기 ① 제목 텍스트 크고 진하게 표시됨 ② 제목 크기에 따라 ~ 태그까지 사용가능. 이 가장 크게 표시 이 가장 작게 표시 ③ HTML 특성상 space바를 여러 번 입력해도 공백 한 칸으로 인식하므로 특수기호를 사용하여 공백 추가 태그 단락 만들기 ① 텍스트 표시할 때 가장 많이 사용하는 태그 ② 텍스트 단락을 만들어 주는 태그, 단락이란 앞 뒤에 줄 바꿈이 있는 텍스트 덩어리를 의미 ③ 태그를 만날 때까지 텍스트를 한 줄로 표시하고 브라우저 사이즈에 따라 자동 줄바꿈 태그 줄 바꾸기 ① 텍스트 단락에 엔터(Enter)값을 입력해도 웹브라우저에서는 한 줄로 표시되기 때문에 줄 바꿀 때 사용 태그 수평 줄 넣기 ① 텍스트 단락의 주제가 바뀌거나 분위기 전환용으로 사용되..

목차 HTML이란 1. 컴퓨터에서 사용하는 파일에는 각각 고유형식이 존재하는데 웹사이트에서 사용할 파일의 형식은 *.html 확장자로 구성된 HTML 문서 2. HTML은 Hyper Text Markup Language의 줄임말로 하이퍼텍스트를 마크업하는 언어 3. 하이퍼텍스트 : 웹 사이트에서 링크를 클릭해서 다른 문서나 사이트로 즉시 이동할 수 있는 기능 4. 마크업: 태그를 사용해 문서의 부분별 우리가 방문하는 모든 사이트 접속 후 우클릭or F12 -> 페이지 소스 보기로 HTML, CSS소스가 확인가능하다. 웹 표준이란 1) 웹 표준 ① 월드 와이드의 측면을 서술하고 있는 공식 표준 ② 한 웹 페이지가 어느 부라우저를 사용하는 지 여부에 상관 없이 그 웹 페이지가 정상적으로 작동해야 함을 의미 ..