컴공과 컴맹숙 🐾

1. 여러 줄을 입력하는 textarea 태그 폼에서 텍스트를 여러 줄 입력하는 영역을 만들 수 있다. 너비 크기를 지정하는 cols 속성과 화면에 텍스트를 몇 줄 표시할지 지정하는 rows 속성을 사용한다. 메모 2. 드롭다운 목록을 만드는 select, option 태그 select 태그로 드롭다운 목록의 시작과 끝을 표시 option 태그로 원하는 항목을 추가한다. option 태그의 selected 속성을 사용하면 기본으로 선택해 보여 줄 항목을 지정한다. 3. 데이터 목록을 만드는 datalist, option 태그 datalist 태그로 데이터 목록의 시작과 끝을 표시 option 태그로 각 데이터의 옵션을 표시 여러 데이터 나열하기 상품 선택 선물용 3kg 선물용 5kg 가정용 3kg 가정용..

1. 자동으로 입력 커서를 갖다 놓는 autofocus 속성 페이지를 불러오자마자 폼에서 원하는 요소에 마우스 포인터를 표시 2. 힌트를 표시하는 placeholder 속성 입력란에 적당한 힌트 내용을 표시한다. 3. 읽기 전용 필드를 만드는 readonly 속성 입력은 못하고 읽게만 하는 읽기 전용 필드를 만든다. 4. 필수 입력 필드를 지정하는 required 속성 반드시 입력해야하는 곳을 필수 필드로 만든다. 배송 정보 주문 상품 이름 배송 주소 이메일 연락처 배송 지정 (주문일로부터 최소 3일 이후) 더보기 Do it! HTML+CSS+자바스크립트 웹 표준의 정석 교재를 참고하여 작성했다.

4. 숫자 입력 필드를 나타내는 number, range input 태그의 type 속성 중 number는 숫자를 조절할 수 있는 스핀 박스 range는 숫자를 조절할 수 있는 슬라이드 막대를 넣는다. 레드향 주문하기 상품 선택 주문할 상품을 선택해 주세요. 선물용 3kg 개 (최대 5개) 선물용 5kg 개 (최대 3개) 상품 선택 주문할 상품을 선택해주세요 가정용 3kg 개 (최대 5개) 가정용 5kg 개 최대(3개) 5. 날짜 입력을 나타내는 date, month, week input 태그의 type 속성 중 date는 사용자 지역을 기준으로 연, 월, 일 month는 연, 월 week는 연, 주를 넣는다. 날짜 지정하기 6. 시간 입력을 나타내는 time, datetime, datetime-loca..

input 태그는 사용자가 입력한 정보를 받을 때 사용한다. 1. 텍스트와 비밀번호를 나타내는 text, password input 태그의 type 속성 중 text는 한 줄짜리 텍스트를 입력할 수 있는 텍스트 박스 password는 비밀번호를 입력할 수 있는 필드를 넣는다. 아이디 : 비밀번호 : 2. 용도에 맞게 입력하는 search, url, email input 태그의 type 속성 중 search는 검색할 때 입력하는 필드 url은 URL 주소를 입력하는 필드 email은 이메일 주소를 입력하는 필드를 넣어준다. 배송 정보 이름 배송 주소 이메일 주소 연락처 3. 체크박스와 라디오버튼을 나타내는 checkbox, radio input 태그의 type 속성 중 checkbox는 여러 항목 중 여러..

폼은 아이디, 비밀번호 입력이나 로그인 버튼, 회원가입 등 사용자가 웹 사이트로 정보를 보낼 수 있는 요소를 의미한다. 1. 폼을 만드는 form 태그 action 속성은 form 태그 안의 내용을 처리해 줄 서버 프로그램을 지정한다. autocomplete 속성은 폼에서 내용을 입력할 때 예전에 입력한 내용을 자동으로 표시하는 자동완성 기능이다. 기본 속성값은 "on" 이다. 2. 폼 요소를 그룹으로 묶는 fieldset, legend 태그 fieldset 태그는 하나의 폼 안에서 여러 구역을 나누어 표시할 때 legend 태그는 fieldset 태그로 묶은 그룹에 제목을 붙인다. 레드향 주문하기 상품 선택 배송 정보 3. 폼 요소에 레이블을 붙이는 label 태그 레이블이란 입력란 가까이에 "아이디"..

링크를 삽입하는 a 태그와 href 속성 링크는 a 태그로 만든다. 이 때 텍스트를 사용하면 텍스트 링크, 이미지를 사용하면 이미지 링크가 된다. 1. 텍스트 링크 만들기 a 태그 사이에 링크로 만들 텍스트를 입력하고 href 속성에는 연결할 문서의 경로와 파일명을 입력한다. 네이버로 이동하기 '네이버로 이동하기'를 클릭하면 입력한 주소로 이동한다. 2. 이미지 링크 만들기 a 태그 사이에 img 태그를 사용하여 이미지 링크를 만든다. 3. 링크를 새 탭에서 열어주는 target 속성 1, 2번 같은 방식으로 하이퍼링크를 삽입하면 현재의 웹 브라우저 창에서 연결된 문서로 바뀐다. target 속성에 _blank를 지정하면 새 탭에서 연결된 문서가 열린다. 구글 더보기 Do it! HTML+CSS+자바스크..

1. 멀티미디어 파일을 삽입할 때 쓰는 object 태그 object 태그는 오디오, 비디오, PDF 등 다양한 멀티미디어 파일을 삽입할 수 있다. width와 height 속성으로 크기를 지정하고 data 속성에 멀티미디어 파일을 지정한다. 2. 오디오, 비디오 파일을 삽입하는 audio, video 태그 audio 태그와 video 태그를 사용할 때는 음악이나 영상을 재생하거나 멈출 수 있도록 컨트롤 바를 나타내는 controls 속성을 함께 사용한다. (video 태그를 사용할 때 비디오 파일의 너비를 지정해주는 것이 좋다.) 3. audio, video 태그의 속성 controls 컨트롤 바 표시 autoplay 오디오나 비디오를 자동으로 실행 loop 오디오나 비디오를 반복 재생 muted 오디..

이미지를 삽입하는 img 태그 img 태그는 src 속성과 alt 속성이 반드시 필요하다. src 속성은 이미지 파일의 경로를 지정하고 alt 속성은 텍스트로 대신 설명한다. (->인터넷 연결이 불안정하거나 이미지 파일 경로를 잘못 넣었을 경우) src 속성은 현재 내가 작성한 파일의 위치를 기준으로 정해진다. 현재 html 파일과 이미지 파일(pig.jpg)이 같은 폴더에 있다면 현재 html 파일이 있는 폴더에 하위폴더(images) 안에 이미지 파일(pig.jpg)이 있다면 아기돼지 + 이미지 크기를 조절하는 width, height 속성 이미지 파일의 크기가 너무 커서 크기를 조절하고 싶다면 width와 height를 이용하면 된다. width는 너비, height는 높이 이다. %로 속성을 적용..

표는 행(가로줄)과 열(세로줄), 그리고 셀로 이루어진다. 셀은 표의 내용이 들어가는 한 칸을 의미한다. 1. 표를 만드는 table, caption 태그 & 행을 만드는 tr 태그와 셀을 만드는 td, th 태그 table 태그는 표의 시작과 끝을 알려준다. caption 태그는 표에 제목을 붙여준다. (table 태그만으로는 표가 만들어지지 않는다.) tr 태그는 표의 행을 만든다. td 태그는 행 안의 셀을 만든다. 따라서 table 태그 안에 tr, td 태그가 모두 있어야 하나의 셀을 만든다. 1행 1열 1행 2열 2행 1열 2행 2열 위의 코드를 표로 그리면 아래와 같다. 1행 1열 1행 2열 2행 1열 2행 2열 th 태그는 표의 제목 행에 셀을 만들 때에 td 태그 대신 사용한다. th 태..

1. 순서 있는 목록을 만드는 ol과 li 태그 어떤 과정을 순서대로 설명할 때 과 태그를 사용해서 만든다. 레드향 샐러드 레시피 재료 : 레드향 1개, 아보카도 1개, 토마토 1개, 샐러드 채소 30g 드레싱 : 올리브유 1큰술, 레몬즙 2큰술, 꿀 1큰술, 소금 약간 샐러드 채소를 씻어 물기를 제거한 후 먹기 좋게 썰어서 준비합니다. 레드향과 아보카도, 토마토도 먹기 좋은 크기로 썰어둡니다. 드레싱 재료를 믹서에 한꺼번에 넣고 갈아줍니다. 볼에 샐러드 채소와 레드향, 아보카도, 토마토를 넣고 드레싱을 뿌리면 끝! + ol 태그의 type 속성 type 속성을 사용해서 영문자나 로마 숫자로 순서를 나타낼 수 있다. (type = "a", type = "A", type = "i", type = "I") ..