본문 바로가기

💻 1. 웹개발_Front end/1-2 HTML16

[HTML] 04-5 기타 다양한 폼 요소들 1. 태그 – 버튼 넣기 ① 를 사용해도 , 과 동일한 기능의 버튼 추가 가능 ② 에서 사용 가능한 type 전송하기 2. 태그 – 계산 결과 ① 입력하는 값이 계산 결과라는 것을 브라우저에 전달 ② 으로 묶인 값은 일반 텍스트가 아니고 계산의 결과 값으로 인식 + = 3. 태그 – 진행 상태 보여주기 ① 작업 진행 상태를 표시할 때 사용 ② 작업 시작을 0, 최종 완료를 최대 값(max)으로 지정하여 진척도를 숫자(value)로 표현 ③ 에서 사용 가능한 속성 10초 남음 진행률 30% 다운로드 시작 4. 태그 – 값이 차지하는 크기 표시하기 ① 전체 크기 중에서 얼마나 차지하는지를 표현할 때 사용 ② 디스크 사용량이라던지 투표율 같은 지정된 범위 내에서 해당 값이 어느 정도 차지하는지 표현 ③ 에서 .. 2021. 9. 5.

[HTML] 04-4 여러 데이터 나열해 보여 주기 1. , , 태그 – 드롭다운 목록 만들기 ① 사용자가 직접 내용을 입력하지 않고 여러가지 옵션 중 선택할 때 드롭다운 목록 사용 ② 드롭다운 목록은 와 를 이용해 표시 ③ : 드롭다운 목록의 시작과 끝 표시 ④ : 선택 항목 추가 ⑤ 드롭다운 목록에서 항목을 선택하고 를 submit 하면 선택된 value 값이 서버로 전달 ⑥ 내용1 내용2 내용3 ... 여름방학 특강 신청 신청자 이름 학번 학과 건축공학과 기계공학과 산업공학과 전기전자공학과 컴퓨터공학과 화학공학과 2. 태그의 속성 3. 태그의 속성 여름방학 특강 신청 신청자 이름 학번 학과 건축공학과 기계공학과 산업공학과 전기전자공학과 컴퓨터공학과 화학공학과 4. 태그 – 옵션끼리 묶기 ① 드롭다운 목록에서 항목들을 몇 가지 그룹으로 묶어서 표출할 .. 2021. 9. 5.

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

[HTML] 04-2 사용자 입력을 위한 <input> 태그 1. 태그 입력 항목 만들기 ① 폼태그 요소 중 사용자 입력 부분은 주로 태그 사용 ② 웹에서 폼은 사용자가 입력하는 부분과 입력한 내용을 서버로 보내는 버튼 부분으로 나눔 ③ 태그로 입력할 수 있는 항목은 아이디나 비밀번호, 이메일 주소, 전화번호, 날짜, 시간, 이미지, 버튼 등 다양하고 태그의 type 속성을 이용해 지정 ③ 형태 : 2. id 속성 사용하기 ① type이 동일한 폼 요소가 여러 번 사용될 때 폼 요소를 구분하기 위해 사용 3. name 속성 사용하기 ① id 속성과 동일하게 사용됨 ① type이 동일한 폼 요소가 여러 번 사용될 때 폼 요소를 구분하기 위해 사용 4. id속성과 name속성의 차이점 ① id와 name 모두 페이지 내에서 element를 식별하기위해 사용 ② id는.. 2021. 9. 5.

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

[HTML] 03-3 SVG 이미지와 Modernizr 1. SVG(Scalable Vector Graphics) 파일 형식이란 ① gif, jpg/jpeg, png 파일을 확대/축소하면 이미지가 깨지는데 이런 이미지들을 비트맵 이미지(bitmap image)라고 함 ② 이미지를 확대/축소해도 원본 상태가 유지되는 이미지를 벡터 이미지(vector image)라 하고 SVG 이미지는 벡터 이미지의 한 종류 (SVG, AI, EPS 등) ③ 로고나 아이콘, 지도 또는 데이터 시각화(차트나 다이어그램) 등에 많이 사용 ex) d3.js(http://d3js.org/), Raphael.js(http://dmitrybaranovskiy.github.io/raphael/) 등 시각화 라이브러리 ④ 비주얼 스튜디오 코드에서 svg 이미지 파일 열어서 확인 SVG PNG.. 2021. 9. 5.

[HTML] 03-2 링크 만들기 1. 태그, href 속성 – 링크 만들기 ① 웹 사이트 내에서 클릭했을 때 다른 페이지로 넘어갈 때 사용 ② 형태 : 텍스트/이미지 ③ 안에서 사용할 수 있는 속성들 ④ CSS를 이용해서 텍스트 링크의 색상과 밑줄을 없앨 수 있음 텍스트 링크 만들기 네이버 이미지 링크 만들기 2. target 속성 – 새 탭에서 링크 열기 ① target 속성을 이용하면 링크를 띄울 페이지를 지정할 수 있음 텍스트 링크 만들기 네이버(현재 화면) 네이버(새 창 또는 새 탭) 3. 아이프레임과 target – 부모창에 링크 띄우기 ① 아이프레임은 프레임의 일종으로 문서 본문에 액자를 주입하는 것을 말함 ② 을 이용해 현재 문서에 다른 문서를 포함시키거나 자바스크립트를 이용해 팝업 창을 열면 현재 문서는 부모 문서가 되고.. 2021. 9. 5.

[HTML] 03-1 이미지 1. 웹에서 사용하는 이미지 형식 2. 태그 – 이미지 삽입하기 ① 웹 문서에 이미지 삽입할 때 사용 ② src 속성 : 이미지 파일 경로 지정 ③ 이미지 경로는 웹 문서 위치 기준으로 정해짐. ④ alt 속성 : 이미지를 설명해 주는 대체 텍스트로, 시각장애인을 위한 화면 낭독기에서 이미지는 읽을 수 없기 때문에 대체 텍스트 첨부 ⑤ width, height 속성 : 이미지 크기 조정하기 * 이미지 파일 경로 이해하기 ① ‘/’는 하위 폴더 표시 ② 같은 레벨의 다른 폴더는 폴더명을 입력 ex) ③ ‘..’은 한 레벨위의 폴더 표시 ex) ④ 웹 상의 이미지 경로 지정 : 웹 상의 이미지 우클릭 후 이미지 주소복사 하여 img 태그 src 속성에 입력 사려니 숲길 3. , 태그 – 이미지에 설명 글 붙.. 2021. 9. 5.

[HTML] 02-5 표를 만드는 태그 1. , , , 태그 – 기본적인 표 만들기 ① : 표의 자리를 지정해 주는 태그 ② : 테이블에 행(row)를 추가해주는 태그 ③ : 내에서 행의 제목이 되는 태그 ④ : 내에서 행의 내용이 되는 태그 제목 셀 1행 2열 1행 3열 제목 셀 2행 2열 2행 3열 2. colspan, rowspan 속성 – 행 또는 열 합치기 ① colspan : 지정한 셀 개수만큼 가로로 합치기 ② rowspan : 지정한 셀 개수만큼 세로로 합치기 3. , 태그 – 여러 열을 묶어 스타일 지정하기 ① : 컬럼 그룹 생성, 태그 뒤 , 태그 전에 사용 ② : 내에서 컬럼에 적용할 스타일 미리 지정 ※ 행을 묶는 태그는 없다!! 의 개수와 테이블의 열 개수는 동일해야 한다. 이름 연락처 주소 자기소개 4. 태그 – 표에.. 2021. 9. 5.

[HTML] 02-4 W3C HTML 검사기 1. 웹 표준 검사하기 ① https://validator.w3.org/ 접속 ① validate by File Upload 클릭 ② 파일 선택 클릭 ③ index-001.html 파일 선택 ④ 열기 클릭 ⑤ check 버튼 클릭 ⑥ error 확인 후 문서 수정 ⑦ error 수정한 문서를 다시 check 2021. 9. 5.

[HTML] 02-3 목록을 만드는 태그 1. , 태그 – 순서 없는 목록 만들기 ① 순서가 필요하지 않은 목록(unorder list)을 만들 때 사용 ② 안에 각 항목을 표시할 때 사용 ③ 사용 시 각 항목 앞에 작은 원이나 사각형 같은 불릿(bullet)이 붙음 * HTML4 에서는 태그의 type 속성으로 불릿을 수정했지만 HTML5에서는 CSS의 list-style-type 속성으로 불릿 수정 관광 안내 전화 한국관광공사에서는 전국의 관광안내소와 공동으로 여러분의 여행편의를 위해 관광안내전화 1330 서비스를 연중무휴 실시하고 있습니다. 1330에는 해당 지역의 지도와 관광 가이드북, 관광안내소를 대신할 수 있을 정도의 다양한 정보가 있습니다. 원하는 관광지는 물론이며 숙박, 교통, 음식점 등의 자세한 정보를 한국어를 비롯한 영어, 중.. 2021. 9. 5.

[HTML] 02-2 텍스트를 한 줄로 표시하는 태그 1. , 태그 – 굵게 표시하기 ① 경고나 주의사항처럼 중요한 내용은 사용 ② 키워드처럼 단순한 강조는 사용 2. , 태그 – 이탤릭체로 표시하기 ① 문장 흐름상 특정 부분을 강조할 때 사용, 즉 중요한 내용을 이탤릭체로 표시할 때 사용 ② 마음 속 생각, 꿈, 기술적 용어, 관용구 등 단순 이탤릭체로 표시하고 싶을 때 사용 제주 이색 여행지 - 이중섭 거리 주말마다 '서귀포문화예술디자인시장'이 열립니다. '아트마켓'이라고도 부르는데, 문화예술체험이나 공연관람을 할 수도 있고 작가들이 직접 만든 창작예술품 등을 판매하기도 합니다. 3. 태그 – 인용 내용 표시하기 ① 인용한 내용을 표시하기 위한 태그 ② 태그와 차이점 - 태그는 블록 레벨의 태그로 다른 단락과 줄 바꿈 및 들여쓰기 발생 - 태그는 다른 .. 2021. 9. 5.

[HTML] 02-1 텍스트를 덩어리로 묶어주는 태그 1. ~ 태그 – 제목 표시하기 ① 제목 텍스트로써 글자가 크고 진하게 표시됨 ② 제목 크기에 따라 ~ 태그까지 사용가능하며 숫자가 작을 수록 글씨가 커짐 ③ HTML 특성상 space바를 여러 번 입력해도 공백 한 칸으로 인식하므로 특수기호를 사용하여 공백 추가 2. 태그 – 단락 만들기 ① 텍스트 표시할 때 가장 많이 사용하는 태그 ② 텍스트 단락을 만들어 주는 태그, 단락이란 앞 뒤에 줄 바꿈이 있는 텍스트 덩어리를 의미 ③ 태그를 만날 때까지 텍스트를 한 줄로 표시하고 브라우저 사이즈에 따라 자동 줄바꿈 3. 태그 – 줄 바꾸기 ① 텍스트 단락에 Enter를 입력해도 웹 브라우저에서는 한 줄로 표시되기 때문에 줄 바꿀 때 사용 4. 태그 – 수평 줄 넣기 ① 텍스트 단락의 주제가 바뀌거나 분위기 .. 2021. 9. 5.

[HTML] 01-2 HTML 기본 HTML이란 ? - Hyper Text Markup Language의 줄임말로, 하이퍼텍스트를 마크업하는 언어이다. - 하이퍼텍스트 : 웹 사이트에서 링크를 클릭해서 다른 문서나 사이트로 즉시 이동할 수 있는 기능 - 마크업 언어 : 태그를 이용하여 문서나 데이터의 구조를 명시하는 언어 * 컴퓨터에서 사용하는 파일에는 각각 고유한 형식이 존재하는데 웹사이트에서 사용할 파일의 형식은 *.html 확장자로 구성된 HTML 문서 HTML5 와 CSS3 학습 이유 - 최신 웹 표준에 맞는 웹사이트 제작 가능 (PC, 스마트폰, 태블릿 외 IOT 기기에 맞는 웹 표준이 HTML5이며, CSS3로 다양한 레이아웃 제작 가능) - 앱 및 웹 화면 디자인의 기초 (Java나 C 같은 고급 언어를 사용하지 않아도 쉽게 .. 2021. 9. 5.

[HTML] 01-1 웹 개발 기본 웹 개발 구상도 1. 프론트엔드 - 업무 로직을 화면에서 표출해내는 역할 - HTML / CSS, JS(자바스크립트) -> JQuary + Ajax (비동기통신) 2. 백엔드 - 업무 로직 - JAVA, JSP, PHP - JSP (자바 서버 페이지의 약어로, 원래 백엔드 언어지만 지금은 프론트에서 쓰임) 3. Servlet - 프론트엔드와 백엔드의 모든 기술을 통합해서 웹개발을 도와주는 프레임워크 - JSP, Spring Framework, Spring boot - WEB / WAS 서버 (Tomcat 사용, JEUS / WebtoB) , - WEB / WAS 로 DB와 통신 연결 웹 표준이란 ? - 한 웹 페이지가 어느 브라우저를 사용하는지와 상관 없이 그 웹 페이지가 정상적으로 작동해야함을 의미 -.. 2021. 8. 30.

이전 1 2 다음

티스토리툴바