HTML 10

HTML Eclipse 태그 연습 예제 - 회원가입 양식

회원 가입 양식 회원 기본 정보 아이디 : 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 일 관심분야 : 컴퓨터 인터넷 여행 영화감상 음악감상 자기소개

Backend/HTML, CSS 2023.04.05

HTML Eclipse style, select, optgroup, option, datalist, option, textarea, button, output, progress, meter 태그

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

Backend/HTML, CSS 2023.04.03

HTML Eclipse input, radio, checkbox, color, date, submit, reset, image 태그

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

Backend/HTML, CSS 2023.04.03

HTML Eclipse form, label, fieldset & legend 태그

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

Backend/HTML, CSS 2023.04.03

HTML Eclipse 하이퍼링크, 앵커, area

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

Backend/HTML, CSS 2023.04.03

HTML Eclipse에서 웹 프로젝트 만들기 - table, img

: 표를 만드는 태그 서브 태그 표의 이름 - 분류 - 칸추가 - 줄추가 : 표 속성 : 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,..

Backend/HTML, CSS 2023.03.28

HTML Eclipse에서 웹 프로젝트 만들기 - HTML 기본 구조, 기본 태그

HTML 기본 구조 & 기본 태그 HTML 문서와 DOCTYPE : 웹 브라우저에게 '이제부터 처리할 문서는 HTML 문서이고 어떤 유형을 사용했으니 그 버전에 맞는 방법으로 해석하라'고 알려주는 것 또는 실제 문서 정보와 내용이 시작하고 끝나는 것을 표시하는 태그 lang 속성은 문서에서 사용한 언어를 지정하는 부분 ex. "en" : 영어, "ko" : 한국어 웹브라우저 화면에는 보이지 않지만, 웹브라우저가 알아두어야 할 정보들 또는 문서에서 사용할 외부 파일들 링크 입력(css, javascript, etc.) meta 태그 meta 태그 : 웹 브라우저가 알아두어야 할 정보들을 입력 등록하는 태그 현재 문서에서 문자를 인코딩 하는 방법을 등록한 속성 UTF-8 (유니코드), EUC-KR : 한글을..

Backend/HTML, CSS 2023.03.27

HTML Eclipse에서 웹 프로젝트 생성

Eclipse > Create a Dynamic Web Project 로 프로젝트 생성 New > HTML file HTML 파일 생성 HTML(Hyper Text Markup Language) : 웹페이지를 만드는 언어(문서) 문서 작업이 가능한 프로그램이라면 모두 구현 가능 HTML문서는 태그라는 명령어로 구성되어 있다 태그 기본형식 태그 내용 여는 태그와 닫는 태그로 구성 태그의 요소 블록 요소 : 줄바꿈 존재 ; 주로 태그 ; 그 블록 전체 인라인 요소 : 줄바꿈이 없다 ; 주로 텍스트 ; 내용만

Backend/HTML, CSS 2023.03.27

프론트엔드 HTML 시멘트 웹 태그, table, datelist, form, iframe

시멘틱 웹 태그 전 세계에 만들어진 웹 사이트가 증가함에 따라 검색 엔진이 사용자가 요구하는 정확하고 가치 있는 정보를 탐색하기 위해 요구하는 사항이 증가 따라서 검색 엔진이 해당 웹 사이트의 정보를 더 쉽게 알 수 있도록 태그에 해당 태그의 역할을 통해 이름을 지어주는 것 시멘틱 웹 태그의 장점 1. 웹 접근성 : 웹 사이트를 사용하는 어느 누구라도 불편함 없이 평등하게 이용할 수 있도록 접근성 자체를 높이는 행위 2. 검색 엔진 최적화 (SEO) : 검색 엔진이 해당 웹 사이트의 정보를 더 쉽게 알 수 있도록 태그에 해당 태그의 역할을 통해 이름을 지어주는 것 3. 가독성 ex. ... ... ... ------------------------------------------------- ... ....

Frontend/HTML 2023.02.04

HTML 기본 개념

HTML 까지는 기억이 날 듯 말듯 어릴 때 나모웹에디터로 홈페이지 만들던 세대라 그런지 이건 꽤나 익숙합니다 HTML 이란? Hyper Text Markup Language 보통 퍼블리셔들이 많이 배우는 언어이고 프로그래밍 언어는 아니라고 합니다 HTML과 CSS는 프로그래밍 언어가 아니다 ; html은 마크업 언어, CSS는 스타일 언어 Hyper Text (글, 이미지...) : 현재 페이지의 글 이미지를 초월하여 다른 웹 페이지의 자료들과 연결시켜준다 Markup Language : 웹페이지 상의 컨텐츠를 어떻게 표현할지 명령하는 언어 => 웹 페이지를 이동할 수 있게 해 주고, 다른 웹페이지에 이미지 등 컨텐츠에 접근 가능하고 웹 페이지 내 컨텐츠를 제작하는 언어 => 웹 페이지 때 기초 틀을 ..

Frontend/HTML 2023.01.15