🔻HTML5의 새로운 기능②🔻 HTML5로 버전업하면서 기존에는 코드로 구현하던 기능들이 속성이나 옵션으로 생겨 간단하게 구현 가능해졌다. 1. progress (진행율) 진행 중인 작업의 진행 상태를 시각적으로 나타낸다. value: 0부터 1까지의 값으로, 백분율을 나타낸다. 최대값 설정을 통해 진행의 범위를 조절할 수 있다. 진행 상태를 나타내므로 최소값 설정은 필요하지 않다. 디자인 커스터마이징이 어려우며, 일반적으로 외부 라이브러리의 품질이 더 높다. 2. meter 숫자를 막대 그래프 형태로 나타낸다. 속성 min : 최소값을 설정할 수 있다. high : 미터의 값이 특정 상한값을 넘었을 때 시각적으로 강조한다. low : 미터의 값이 특정 하한값 이하일 때 시각적으로 강조한다. value ..
🔻HTML5의 새로운 기능①🔻 HTML5로 버전업하면서 기존에는 코드로 구현하던 기능들이 속성이나 옵션으로 생겨 간단하게 구현 가능해졌다. 1. placeholder (플레이스홀더) 안내메시지 사용자에게 입력 예시나 설명을 제공한다. 예를 들어, 입력 필드에 "이름을 입력해주세요"라는 안내메시지가 있다면 사용자는 그 곳에 자신의 이름을 입력하게 된다. 이름 : 비밀번호 : 2. required 필수로 입력을 받아야 하는 필드에 사용되는 속성이다. 이 속성이 설정된 경우, 사용자는 해당 필드에 값을 반드시 입력해야 한다. 값이 입력하지 않고 버튼을 눌렀을 경우, 에러메시지를 표시한다. 아이콘 및 에러메시지 수정이 복잡하다. 로그인(필수입력) 아이디: 암호: 3. email, url 요소의 type 값으로 ..
폼, Form 입력 양식, 입력 컨트롤을 담당한다. 클라이언트(사용자)로부터 입력장치(키보드, 마우스,, )을 통해서 데이터를 입력받는 역할을 한다. 입력데이터는 서버로 전송되어 업무에 활용되거나 데이터베이스에 저장된다. 🔻 태그🔻 모든 입력 컨트롤을 감싸는 컨테이너 스스로는 랜더링 결과가 없다. 입력한 값을 서버로 전송하는 역할을 한다.(***) 🔻 속성🔻 1. form.method 데이터를 전송하는 방식 1. POST 데이터를 상자 안에 담아서 전송하는 방식 전송하는 데이터의 최대 길이의 제한이 없다. 2. GET 데이터를 송장에 붙여서 전송하는 방식이다. 주소창 뒤에 전송되는 데이터가 노출되어 전달된다. 보안 상 좋지않다. 전송하는 데이터의 최대 길이가 256자(8000 바이트)로 제한되어 있다. ..
표, table 🔻표 생성 순서 이해하기🔻 [2행 2열 상자 만드는 순서] 1. 큰 틀 하나를 만든다. 2. 가로 길이가 전체 길이와 같고 세로길이는 전체 길이의 1/2인 틀 2개를 만든다. 3. 2에서 만든 틀의 가로길이 1/2, 세로길이는 전체 길이의 1/2인 틀 4개를 만든다. 🔻구성요소🔻 1. 전체 컨테이너 2. table row의 약자 행 역할 3. table data의 약자 셀 역할 4. table header의 약자 표제목을 출력하는 전용 셀 🔻테이블 생성🔻 2행2열 테이블 1 2 3 4 🔻테이블의 크기 조절🔻 width, height 속성으로 조절한다. 2행2열 테이블 1 2 3 4 Q. 전체 너비가 200일 때, 한 셀의 너비를 100으로 설정한다면 사이즈가 반반으로 나눠질까? A. 그렇..
인라인 태그 vs 블럭 태그 모든 태그는 위의 두 분류 중 하나에 속한다. 랜더링의 결과가 다르다. 반드시, 인라인 태그인지 블럭 태그인지 구분하여 사용해야한다. 랜더링(Rendering) 이란 태그를 화면에 출력하는 작업 h1 태그에 속하면 큰 글씨와 굵은 폰트로 출력하는 것 🔻인라인 태그, Inline Tag🔻 자신의 내용물과 주변 태그의 내용물을 같은 라인에 출력한다. 자바의 print()와 같다. PCDATA(텍스트)도 인라인 태그에 속하는 성질을 가진다. 내용물의 크기가 태그의 영역이다.(***) 네이버 구글 다음 문자열 🔻블럭 태그, Block Tag🔻 자신의 내용물과 주변 태그의 내용물을 다른 라인에 출력한다. 자바의 println()과 같다. 내용물의 크기와 상관없이 자신이 속한 라인을 독..
🔻이미지, Image🔻 단독태그 *저작권 없는 이미지 공개 사이트 https://pixabay.com/ 🔻img 속성🔻 1. img.src source의 약자 이미지 파일 url을 넣는다. 이미지 2. img.alt alternate text의 약자 이미지가 에러나서 출력이 안될경우, 이미지를 대신해서 출력할 문자열을 의미한다. 스크린 리더에서 사진을 읽는 역할로 사용된다. 이미지 3. img.width 이미지 너비 설정 ⁉웹 이미지의 크기를 확인하는 방법 이미지 우클릭 후 검사 클릭 오른쪽 검사 창에 사이즈가 나타난다. 4. img.height 이미지 높이 설정 이미지 크기는 파일 크기와 상관이 없다. 5. img.border 테두리 설정 🔻html 속성🔻 1. 필수 속성, Required 반드시 작성..
🔻링크, Link🔻 , anchor(닻), link href가 있으면 링크라고 부른다. - 링크 속성 a.href : 클릭하면 이동할 URL . reference a hyperlink. a.target : 열거형. _self / _blank / _parent / _top _self 내부 링크용으로 사용한다. 현재 창에서 페이지가 이동된다. _blank 외부 링크용으로 사용한다. 새 창에서 페이지가 열린다. 링크 내부 링크(같은 사이트내의 이동) 10번 예제 외부 링크 네이버로 이동합니다. 구글로 이동합니다. - 앵커 href가 없으면 앵커라고 부른다. 문서 내에서 다른 위치로 이동하는 링크를 생성하는 요소이다. 스크롤 이동이 된다. 다른 링크와 구분하기 위해 #를 붙인다. 이동할 위치의 태그에 name ..
🔻HTML 서식 태그🔻 HTML은 골격 구성 + 데이터 표현 + 서식 기능을 가지고 있다. 서식 기능 및 디자인은 CSS에서 담당하기에 HTML에서 잘 사용하지 않지만, 아래 기능들은 HTML에서 적용하는게 간편하여 잘 사용되고 있는 서식들이다. 1. : 볼드체, 굵은 글씨 2. : 이태릭체, 텍스트 기울기 3. : 말그대로 다른 글씨보다 작은 폰트로 출력한다. 4. : 밑첨자 5. : 윗첨자 6. : 다른 글씨보다 큰 폰트로 출력한다. 7. : 밑줄 8. : 취소선 9. : 타자기 폰트로 출력한다. 물리적인 모양을 지정하는 태그 볼드체 이태릭체 작은글자 H20 MC2 큰글자 밑줄 취소선 타자기 글자 여기서부터는 서식 뿐 아니라 코드의 의미를 담고 있는 서식들이다. 시멘틱 웹이라고도 하는데 웹에서 정보를..
🔻, heading🔻 제목 태그 문서 내의 제목을 출력하는 태그 n에 1~6이 들어간다. h1, h2, h3, h4, h5, h6 >> 제목의 중요도를 나타낸다. 1번부터 사용하면서 하위로 내려간다. 구글에서 크롤링할 때, body 중 h1만 가져가기에 h1부터 사용하도록 한다. 쌍태그와 혼합형에 들어간다. 화면은 CSS로 재정의하기에 html로 출력하는 화면(스타일)은 그다지 중요하지 않다. 제목입니다. 제목입니다. 제목입니다. 제목입니다. 제목입니다. 제목입니다. 제목입니다. 내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다. 🔻, Horizontal Rule🔻 수평바, 구분자 문단과 문단을 구분하는 역할 콘텐츠와 콘텐츠를 구분하는 ..
🔻head 태그🔻 1. 페이지에 대한 여러가지 정보를 기술한다. 2. 문서 제목 탭에 있는 제목 표시줄에 나타난다. 문서의 제목으로 사용된다. 검색 엔진의 수집 대상이 되어 검색 결과의 제목으로 사용된다. 즐겨찾기 시 북마크의 제목으로도 사용된다. 🔻body 태그🔻 문서의 본문 역할 사람에게 전달할 내용(출력할 내용)을 작성한다. 출력정보 속성 1. bgcolor background color 문서 배경색 - HTML 색상 표현 방법 1. 색상명 - Named Color - Well-known Color - 미리 약속된 140가지 색상명을 사용한다.(웹 색상) - https://www.w3schools.com/tags/ref_colornames.asp 2. RGB - RED + GREEN + BLUE -..
