dalc3154 님의 블로그

input 태그 외에 폼에서 사용하는 태그들 textarea 태그여러줄을 입력하는 텍스트 영역 태그내용 textarea의 속성cols: 텍스트 영역의 가로 너비를 문자 단위로 지정rows: 텍스트 영역의 세로 길이를 줄 단위로 지정. 지정한 숫자보다 줄이 많아지면 스크롤 막대 생성>>cols에서 지정하는 글자 수는 영어 소문자를 기준으로 함. 한글 1글자는 영문 2글자 취급이므로 cols에 지정한 숫자의 절반이 1줄에 들어가게 됨 CSS를 사용해 텍스트 영역의 크기를 정의 가능 select, option 태그드롭다운 목록을 만들어 주는 태그사용자가 내용을 직접 입력하지 않고 여러 옵션 중에서 선택함 select 태그: 드롭다운 목록>> 클릭 시 옵션이 요소 아래쪽으로 펼쳐짐 option 태그: 데이터 목..

태그의 주요 속성인풋 태그를 활용하여 단순 내용 입력 뿐 아니라 여러가지 기능을 사용ex) 입력란에 커서를 맞추거나 힌트 표시 가능, 반드시 입력해야 하는 필드 지정 >>자바스크립트로 실행한 것을 인풋태그의 속성만으로도 처리할 수 있음autofocus 속성페이지를 불러오면 해당 속성을 가진 요소에 자동으로 입력 커서를 가져다 놓는 속성 placeholder 속성입력란에 힌트를 표시하는 속성입력란에 있는 힌트는 클릭하면 내용이 사라짐 readonly 속성사용자 입력이 안되는 읽기 전용 필드 required 속성필수 입력 필드를 지정하는 속성폼을 서버로 전송할때 필수 필드의 내용이 모두 채워졌는지 검사함 name 속성입력 필드를 송신할때 사용하는 속성name 속성이 없으면 해당 입력 값이 전송되지 않음송신한..

태그사용자로부터 입력을 받을 수 있는 입력 필드를 정의사용자가 데이터를 입력할 수 있는 입력 필드를 선언하기 위해 요소 내부에서 사용인풋 요소 자체는 빈 태그이며 속성만을 포함함라벨 요소를 사용하면 인풋 태그의 라벨 정의가 가능입력 필드의 기본 너비는 20자  태그 type 속성 정리표종류설명text한 줄짜리 텍스트를 입력할 수 있는 텍스트 박스password비밀번호 입력할 수 잇는 필드search검색할 때 입력하는 필드urlURL 주소를 입력할 수 잇는 필드email이메일 주소를 입력할 수 있는 필드tel전화번호를 입력할 수 있는 필드checkbox주어진 여러 항목에서 2개 이상 선택할 수 있는 체크 박스radio주어진 여러 항목에서 1개만 선택할 수 있는 라디오 버튼number숫자를 조절할 수 있는 ..

Form 사용자가 웹 사이트로 정보를 보낼 수 있는 요소텍스트필드, 체크박스, 라디오 버튼, 송신 버튼 등 다양한 유형의 입력 요소를 위한 컨테이너폼 자체는 표시되지 않는다 폼의 동작 방식사용자가 아이디/비밀번호 입력 후 로그인 버튼을 클릭하면입력한 정보가 웹 서버로 전송되고서버가 자신이 가진 데이터베이스에서 입력받은 아이디와 비밀번호가 일치하는지 확인한 후그 결과를 웹 브라우저에 전송함 form태그폼을 만드는 태그여러 폼 요소폼 태그는 속성을 사용해서 입력받은 자료를 어떤 방식으로 서버에 전송하고 이를 서버에서 어떤 프로그램을 이용해 처리할지를 지정한다get : 데이터를 256 ~ 4,096byte 까지만 서버로 전송 가능 / 주소 표시줄에 사용자가 입력한 내용이 그대로 드러남(보안성이 낮다.)post..

embed태그HTML초기 버전부터 사용>>대부분의 브라우저에서 사용 가능오디오, 비디오, 이미지 등 다양한 멀티미디어 파일 삽입 가능 ,태그오디오와 비디오 파일을 삽입audio태그: 배경음악이나 효과음 등 오디오 파일 삽입video태그: 비디오 파일 삽입controls는 , 태그에서 모두 사용 가능→ controls 속 : 오디오나 비디오 파일을 시작하거나 종료할 수 있는 컨트롤 바 속성controls플레이어 화면에 컨트롤 바를 표시autoplay오디오나 비디오를 자동으로 실행loop오디오나 비디오를 반복 재생muted오디오나 비디오의 소리를 제거preload페이지를 불러올 때 오디오나 비디오 파일을 어떻게 로딩할 것인지 지정사용할 수 있는 값 : auto, metadata, none 기본값 prelo..

태그를 활용해 이미지 삽입하기##이미지는 기술적으로 웹 페이지에 삽입되는게 아니라 링크됨 src속성: 이미지 파일의 경로를 지정1)  웹 문서 파일과 이미지 파일의 경로가 동일2) 하위 폴더에 이미지 파일이 있는 경우3) 다른 웹사이트에 이미지 파일이 있는 경우https://www.w3schools.com/images/w3schools_green.jpg" alt="W3Schools.com"> alt 속성: 대체 텍스트화면 낭독기에서 이미지를 대신해서 읽어 줄 텍스트/ 이미지가 로딩되지 않았을 경우 표시할 텍스트 width, height 속성이미지의 크기를 조절width: 이미지의 너비 지정height : 이미지의 높이 지정둘 중 하나만 지절해도 나머지 속성의 비율을 자동으로 계산함>>스타일은 외부 CSS..

태그 & href 속성텍스트 또는 이미지웹 사이트에서 링크 기능은 중요함입력값에 따라 텍스트 또는 이미지 링크로 사용된다href 속성을 이용해 파일이나 주소를 연결한다 텍스트 링크: 와 사이에 링크로 만들 텍스트를 입력이미지 링크: 외 사이에 링크로 만들 이미지를 삽입 target 속성연결된 문서를 열 위치를 지정_self (디폴트): 누른 곳과 동일한 창/탭에서 문서를 연다_blank: 새 창 또는 탭에서 문서를 연다_parent: 상위 프레임에서 문서를 연다_top: 창 전체의 본문에서 문서를 연다 로컬 경로(같은 웹사이트 내의 페이지에 대한 링크)는 상대 URL로 지정ex)HTML ImagesCSS Tutorial

List의 하위요소 태그: 각 항목들을 나열태그: 순서가 있는 목록목록의 순서를 나타내는 숫자는 type를 사용하여 다음 값으로 전환 가능type = “1”숫자(기본값)type = “a”영문(소문자)type = “A”영문(대문자)type = “i”로마 숫자 소문자type = “I”로마 숫자 대문자 태그: 순서가 없는 목록목록 앞에 붙은 작은 원을 '불릿'이라고함 , , 태그Definition List, Title, Data이름과 값의 형태로 된 목록dt: 이름 지정dd: 값 지정dl: 한 쌍의 dt와 dd를 지정>>dl 하나에 여러 dd태그를 사용할 수 있음  , 태그표를 만드는 태그table: 표를 생성caption: 표의 제목을 삽입 , , 태그행과 셀을 만드는 태그tr태그: 행 생성td, th 태..

태그: 제목을 나타내는 태그n 자리에 1 ~ 6의 숫자 입력브라우저는 제목 앞뒤에 공백을 자동으로 추가h1이 가장 큰 제목(가장 중요함) ~ h6이 가장 작은 제목(중요도가 낮음)닫는 태그반드시 사용 , 태그p태그: 텍스트 단락을 만드는 태그단락은 항상 새 줄에서 시작, 브라우저는 단락 앞뒤에 공백을 자동추가닫는 태그 반드시 사용br태그: 줄을 바꾸는 태그강제 줄바꿈. 새 단락을 시작하지 않고 줄 바꿈이 필요할때 사용 요소span 요소는 텍스트의 일부 또는 문서의 일부를 표시하기 위해 사용되는 컨테이너span 요소에는 필수 속성이 없음CSS를 사용하면 span을 사용하여 텍스트의 일부를 스타일링 가능 태그blockquote 태그는 인용할 때 사용하는 태그태그 안의 내용을 들여쓰기 함 ,태그strong태그..

">charset: 사용할 문자 집합을 정의: 검색 엔진의 키워드를 정의: 웹페이지에 대한 설명을 정의: 페이지 작성자를 정의:content 속성에 명시된 값에 대한 HTTP헤더를 제공:뷰포트의 크기 정의 클라이언트 측 JavaScript정의에 사용