코딩공부

• HTML - Hyper Text Markup Language • 웹페이지를 만들기 위한 컴퓨터 언어 • 웹페이지의 구조 정의 • 컨텐츠를 표시하는 방법을 브라우저에 알려주는 것 • 각 컨텐츠의 레이블을 지정 !DOCTYPE html // HTML5 문서임을 알림 html // html 페이지의 루트 head // 페이지에 대한 meta 정보를 포함 title // 브라우저의 제목 표시줄, 탭에 표시되는 이름 body // html 문서의 본문이 들어가는 컨테이너 h1 // 큰 제목, h6 제일 작은 제목 p // 문단 태그는 시작을 알리고 /로 종료한다. br 같이 종료를 알리는 태그가 없는 건 '빈요소'다.

5px = 0.3125em = 31.25% 6px = 0.3750em = 37.50% 7px = 0.4375em = 43.75% 8px = 0.5000em = 50.00% 9px = 0.5625em = 56.25% 10px = 0.6250em = 62.50% 11px = 0.6875em = 68.75% 12px = 0.7500em = 75.00% 13px = 0.8125em = 81.25% 14px = 0.8750em = 87.50% 15px = 0.9375em = 93.75% 16px = 1.0000em = 100.00% 17px = 1.0625em = 106.25% 18px = 1.1250em = 112.50% 19px = 1.1875em = 118.75% 20px = 1.2500em = 125.00..

• controls 재생, 일시줄지, 볼륨 등의 비디오 컨트롤 표시 • width, height 크기 지정 • autoplay 자동 재생 • muted 재생시 음소거

• value : 입력필드 초기 값 이름 나이 • readonly : 읽기전용. 입력할 수 없는 필드 값 이름 나이 • disabled : 입력필드 비활성화 이름 나이 • size : 입력필드 사이즈 - 기본 20 주소 나이 • maxlength : 입력 가능 글자수 지정 주소 비번 • min, max : 날짜나 시간, 수량의 범위를 지정 1990-01-01 이전 날짜를 입력하세요 2021-0-01 이후 날짜를 입력하세요 수량을 입력하세요.[1~10] • multiple : 다중선택 파일을 선택하세요. • pattern : 입력값 검사 국가 코드를 입력하시오. • placeholder : 입력값 예시를 표시 연락처를 남겨주세요. • required : 필수 입력 값 연락처를 남겨주세요. • step : ..

• input type="text" : 텍스트 입력 이름 별명 • input type="password" : 패스워드 사용자 ID 비밀번호 • input type="reset" : 입력값 초기화 이름 별명 • input type="color" : 색 선택 클릭하고 원하는 색을 선택 • input type="date" : 날짜 선택 생일 • max, min : 날짜 최대, 최소값 1980-01-01 이전 입력 2000-01-01 이후 입력 • input type="datetime-local" : 날짜 시간 입력 생일 (시간) • input type="month" : 날짜 월 선택 생일 (년/월): • input type="email" : 이메일 입력 사용할 메일 입력 • input type="file" :..

• input • label • select size="" multiple 드롭다운 메뉴 size는 드롭 칸수 / multiple 다중선택 - option selected - 메뉴 / selected는 미리 선택된 메뉴 • textarea name="" rows="" cols="" 여러 줄의 입력 필드 textarea name="" style="width: px; height: px;" css로 크기 지정 • button 버튼 만들기 • fieldset 양식 그룹화 - legend fieldset의 캡션 • datalist 미리 정의 된 옵션 리스트 - option 리스트 • output 계산 결과 표시 • select:드롭메뉴/option:메뉴 다음 목록중 하나를 선택하세요. Food 메뉴 라면 공기밥..

• form action="/action.php" action은 양식을 제출 했을 때 수행하는 작업을 정의하고 서버에 정보를 보낸다. • form action="/action.php" target="_blank" target은 양식을 제출 했을 때 응답하는 페이지를 어디에 표시할지 정의. _blank, _self, _parent, _top, framename • form action="/action.php" method="get" 데이터를 이름, 값이 URL에 추가된다. 민감한 데이터는 GET으로 보내지마. 데이터가 URL에 표시 된다. URL 길이는 2048자로 제한된다. 비보안 데이터 전송에 적합하다. • form action="/action.php" method="post" URL에 양식 데이트가 ..

form~/form은 사용자가 입력한 정보를 수집하는데 이용하며 입력한 정보는 서버에 전송된다. input type="text" name="" 텍스트 입력 input type="radio" name="" 라디오 버튼 - 한가지 선택 input type="checkbox" name="" 체크박스 - 0개 이상 선택 input type="submit" name="" 제출 버튼 - 양식 제출 input type="button" name="" 클릭 버튼 label for와 input name은 같은 이름을 써야 동기화 된다. input name값이 없으면 입력값은 서버에 전송되지 않는다. input type="text" 이름 성 라디오 버튼 남성 여성 기타 체크박스와 제출:submit 버튼 라면 돈가스 우동

▶ XHTML : EXtensible HyperText Markup Language ▶ XHTML은 XML을 기본으로한 더 엄격한 기준의 HTML이다. ▶ HTML과의 차이점 • ! DOCTYPE은 필수 • html, head, title, body필수 • 요소든 빈요소든 항상 닫는 '/'를 사용 : img src="" /, br / • 요소는 소문자 : BOBY X, body O • 속성 이름은 소문자 : div STYLE="" X, div style="" O • 속성 값은 항상 따옴표로 묶는다. • 속성 쓰는 방법은 최소화, 간략화 금지

• title을 꼭 사용하자. 페이지 제목은 검색 엔진 최적화 SEO)에 중요하다. • title은... 브라우저 도구 모음에서 제목을 정의한다. 즐겨 찾기에 추가 될 때 제목이다. 검색 결과에 페이지 제목을 표시한다. ★ 제목은 가능한 정확하고 의미있게 만들어라! HTML에서 빈 요소를 닫는 것은 선택 사항. meta charset="utf-8" meta charset="utf-8" / XML, XHTML이 페이지에 액세스 할 것을 대비해 닫는 슬래시 (/)를 사용하는게 좋다.

시멘틱 요소란 이름만으로 무엇을 의미하는지 알 수 있는 요소를 말한다. non-시멘틱 요소의 예 : div. span등이 있다. 이름만으로는 무슨 내용이 들어 있는지 알 수 없다. 시멘틱 요소의 예 : article, aside 등이 있다. 요소의 이름만으로 대충 어떤 내용이 들어 갈지 알 수 있다. article : 본문, 콘텐츠 자체로 독립적으로 배포가능한 내용 aside : 사이드바 정의 details figcaption figure footer : 저자, 저작권, 연락처, 사이트 맵 등의 정보를 담는다. header : 사이트의 이름,로고, 아이콘, 메뉴링크를 저장하는 컨테이너 main mark nav : 탐색링크, 방명록 등 section : 일반적으로 문서의 제목, 콘텐츠 그룹을 정의한다. s..

• 1vw = 화면 너비의 1% 반응형 텍스트 만들기 화면이 커지면 글자가 커진다 화면이 작아지면 글자도 작아진다 노반응형 일반 텍스트

• meta에 viewport로 반응형 페이지를 설정 반응형 이미지 • css로 이미지 가로 크기를 100%로 지정하면 화면 크기에 맞게 이미지 사이즈가 자동 적용된다. • max-width: 100%로 최대 이미지 크기를 지정한다. 화면 크기가 커져도 이미지는 원본 크기보다는 커지지 않는다. • 브라우저 크기에 따라 변하는 이미지. 브라우저 가로 크기가 700이상이면 하트, 699이하면 집이 나온다.

• header - 문서나 섹션의 헤더를 정의 • nav -탐색 링크 세트 • section - 문서의 섹션 • article - 콘텐츠 • aside - 콘텐츠 이외의 콘텐츠(사이드 바) • footer - 바닥 글 • details - 열고 닫을 수있는 정보를 정의 • summary - details요소의 제목

• iframe src="URL" style="height: 000px; width: 000px; border: 굵기 모양 색;" title="XX" name="XX" • 테두리 없음 • 테두리 꾸미기 • name으로 링크 iframe에서 열기 링크열기

• id는 class와 사용방법이 동일하다. • 그러나 id는 하나의 html 요소에 한번만 사용할 수 있다. 클래스 처럼 중복 사용 불가. • id는 css에서 이름앞에 '#'를 쓴다.(클래스는 '.'을 쓴다) • id는 대소문자를 구분한다. • id 이름에는 공백을 포함할 수 없다. 2021/02/10 - [> HTML] -클래스의 기본 2021/02/04 - [> HTML] - 책갈피 만들기, id