1. 블록 라벨 요소, 인라인 라벨 요소 1️⃣ 블록 라벨 요소 : 태그를 사용해 요소를 삽입했을 때 혼자 한 줄을 차지하는 것을 가리킨다. 즉, 너비가 100%라는 뜻!으로 왼쪽이나 오른쪽에 다른 요소가 올 수 없다. , , 2️⃣ 인라인 라벨 요소 : 블록 라벨 요소와는 다르게 한 줄을 차지하지 않는다. 콘텐츠만큼만 영역을 차지하고 나머지 공간에는 다른 요소가 올 수 있어, 한 줄에 인라인 레벨 요소를 여러개 표시할 수 있다. , , 2. 박스 모델⭐⭐ 박스 모델은 콘텐츠 영역, 박스와 콘텐츠 영역 사이의 여백인 패딩 padding, 박스의 테두리 그리고 여러 박스 모델 사이의 여백인 마진 margin 등의 요소로 구성된다. 마진과 패딩은 다른 콘텐츠 사이의 간격이나 배치 등을 고려할 때도 중요한 개..

연습문제 1 최신 웹 디자인 트렌드 반응형 웹 디자인 - 다양한 화면 크기에 최적화하다 플랫 디자인 - 입체에서 평면으로 풀스크린 배경 - 콘텐츠에 집중 원 페이지 사이트 - 한 페이지에 모든 내용을 담다 패럴랙스 스크롤링 - 동적인 효과로 강한 인상을! 웹 폰트 - 웹 타이포그래피를 받쳐주는 기술 연습문제 2 웹 개발 기초 연습문제 3 2019 국민 독서실태 구분 성인 독서자 종이책 6.1권 11.8권 전자책 1.2권 7.1권 오디오북 0.2권 5.5권 연습문제 4 확인하세요 주문 및 배송 오후 2시 이전 주문건은 당일 발송합니다 2시 이후 주문건은 다음날 발송합니다(주말 제외) 교환 및 환불 불만족시 100% 환불해 드립니다 고객센터로 전화주세요 고객센터 0000-0000 상담시간 : 오전 9시 ~ ..

1. .. : 텍스트를 여러 줄 입력하는 영역을 만든다. 속성 1️⃣ cols : 텍스트 영역의 가로 너비를 문자 단위로 지정한다. 2️⃣ rows : 텍스트 영역의 세로 길이를 줄 단위로 지정한다. 2. .., .. 사용자가 내용을 직접 입력하는 것이 아니라 여러 옵션 중 하나를 선택하는 것이다. .. 속성 1️⃣ size : 화면에 표시할 드롭다운 항목의 개수를 지정한다. 2️⃣ multiple : 드롭다운 목록에서 둘 이상의 항목을 선택할 때 사용한다. 속성 1️⃣ value : 해당 항목을 선택할 때 서버로 넘겨줄 값을 지정한다. 2️⃣ selected : 드롭다운 메뉴를 삽입할 때 기본적으로 선택해서 보여줄 항목을 지정한다. * 연습 문제 1 예약 정보 이 름 휴대폰 이메일 * 연습문제 2 프런..

1. autofocus autofocus를 사용하면 페이지를 불러오자마자 폼에서 원하는 요소에 마우스 포인터를 표시할 수 있다. 2. placeholder 사용자가 텍스트를 입력할 때 입력란에 적당한 힌트 내용을 표시해서 그 필드를 클릭하면 내용이 사라지도록 만들 수 있다. 3. readonly 사용자가 입력하지 못하고, 읽게만 하는 읽기 전용 필드를 만들 때 사용하는 속성이다. 4. required 필수로 입력해야하는 필드를 지정하는 속성이다.

input type들의 속성들 1. type ="text", type = "password" password를 지정하면 *로 표시된다. 텍스트, 비밀번호 필드에서 사용하는 주요 속성 1️⃣ size : 텍스트와 비밀번호 필드의 길이를 지정한다. 2️⃣ value : 텍스트 필드 요소가 화면에 표시될 때 텍스트 필드 부분에 보여주는 내용이다. 3️⃣ maxlength : 텍스트 필드와 비밀번호 필드에 입력할 수 있는 최대 문자 수를 지정한다. 2. type = "search", type = "url", type = "email", type ="tel" type = "search" : 웹 브라우저 화면으로 볼 때는 텍스트 필드와 똑같지만 웹 브라우저에서는 검색을 위한 텍스트 필드로 인식한다. type = "..

1. .. form은 대표적으로 아이디와 비밀번호를 입력하는 form을 예로 들수있다. form에는 다양한 속성들이 존재한다. 1️⃣ method: 사용자가 입력한 내용을 서버 쪽 프로그램으로 어떻게 넘겨줄 것인지 지정하는것이다. -> get과 post가 있다. - get : 데이터를 256 ~ 4096 byte 까지만 서버로 넘길 수 있으며, 주소 표시줄에 사용자가 입력한 내용이 그대로 드러나는 단점이 존재한다. - post : 입력한 내용의 길이에 제한받지 않고 사용자가 입력한 내용도 드러나지 않는다. 2️⃣ name : 자바 스크립트로 폼을 제어할 때 사용할 폼의 이름을 지정한다. 3️⃣ action : 태그 안의 내용을 처리해 줄 서버 프로그램을 지정한다. 4️⃣ target : action 속서..

1. html 태그 속성 연습문제 똑같이 만들기! 답: 수습 국원 모집 방송에 관심 있는 새내기 여러분 환영합니다. 교내 방송국에서 신입생을 대상으로 수습 국원을 모집합니다. 학부나 전공에 상관없습니다. 평소 방송에 관심있었던 여러 학우들의 지원바랍니다. 모집 기간: 3월 2일 ~ 3월 11일 모집 분야: 아나운서, PD, 엔지니어 지원 방법: 양식 작성 후 이메일 접수 지원서 양식은 교내 방송국 홈페이지 공지 게시판에 있습니다. 혜택 수습기자 활동 중 소정의 활동비 지급 정기자로 진급하면 장학금 지급 2. 테이블 연습 문제 이렇게 만드시오! 답: 수습 국원 지원 양식 개인정보 이름 학과/학번 연락처 지원분야

웹사이트에서 링크 연결은 가장 많이 사용하는 기능 중 하나이다. 이때 링크 연결은 .. 태그로 만든다. 태그에서 img 를 지정해주면 이미지 링크가 되고, 텍스트로 지정해주면 텍스트 링크가 된다. href 속성을 사용해서 경로를 지정해준다. 1. 텍스트 링크 2. 이미지 링크 이때 기본 설정은 이 하이퍼링크를 누르면 기존페이지에서 지정한 페이지로 이동하게 되는데, 원래 페이지로 돌아가고싶으면 뒤로가기 버튼을 눌러야하는 다소 불편한 점이 존재한다. 따라서 target = "_blank"를 추가해주면 새로운 페이지에서 웹 문서가 열리게 된다!

1. 태그 태그는 오디오 파일뿐만 아니라 비디오, 자바 애플릿, pdf 등 다양한 멀티미디어 파일을 삽입할 때 사용한다. 태그를 사용하면 이런식으로 pdf 도 웹 브라우저에 추가해줄 수 있다. 2. 태그 embed 태그는 대부분의 브라우저에서 적용할 수 있는 태그로 와 비슷하게 오디오, 비디오, 이미지 등 다양한 멀티 미디어 파일을 삽입할 수 있다. 3. , 태그 이 두 태그는 사용법과 속성 모두 비슷하다. 태그에서는 html에서 배경음악이나 효과음 등 오디오 파일을 삽입할 때 사용한다. 태그에서는 비디오 파일을 삽입할 때 사용한다. 이때 controls 속성을 지정해주면 삽입한 파일에 사용자가 재생을 멈출 수 있도록 해준다. * , 속성 controls : 삽입한 파일에 컨트롤 바를 표시해 사용자가 재..

웹 문서에 이미지를 추가하고 싶을때는 태그를 사용한다. 1. src 속성 태그의 src 속성은 이미지 파일의 경로를 지정하는 속성으로 반드시 지정해줘야한다. 이미지나 음악, 동영상 등을 웹 문서에 저장할 때는 경로를 주의해서 지정해줘야한다. 경로가 정확하지 않으면 웹 브라우저 화면에 이미지가 나타나지 않는다. 이미지 경로는 웹 문서의 위치를 기준으로 정한다. 2. alt 속성 는 이미지를 대신해서 읽어 줄 텍스트를 입력하는 것이다. 3. width, height 속성 태그에 별다른 속성을 지정해주지 않으면 원본 이미지 크기 그대로 나타나게 된다. width와 height 속성은 각각 이미지의 너비와 높이를 지정해주는 속성이다. 단위는 %와 px인데 기본이 px이라 px 단위는 작성하지 않아도 된다. ex..

우선 표를 만들기 위해서는 표의 시작과 끝을 알려주는 ... 태그를 표시한 후에 표와 관련된 태그를 모두 넣어준다. 1. ... 표에 제목을 추가하고 싶을 때 사용하는 태그이다. 2. .., .. 태그는 행을 만들고, 태그는 행 안에 있는 셀을 만든다. 이 두 태그는 모두 사용해야 하나의 셀을 만들 수 있다. 3. .. 표의 제목 행에 셀을 만들 때는 태그 대신 태그를 사용한다. 4. , , 표에 제목과 본문, 요약이 있는 부분으로 표의 구조를 나눌 수 있다. 5. rowspan, colspan rowspan은 행을 합칠 때 사용하는 속성이다. colspan은 열을 합칠 때 사용하는 속성이다. 6. , 특정 열에 배경색을 넣거나 너비를 바꾸려는 등 원하는 열을 선택해서 지정해줘야하는데, 이럴때 과 태그를..

1. 순서가 있는 목록 태그 태그를 사용해서 만든다. 사진과 같이 type 과 start를 지정해줄 수 있다. type = "1" : 숫자 type = "a" : 영문 소문자 type = "A" : 영문 대문자 type = "i" : 로마 숫자 소문자 type = "I" : 로마 숫자 대문자 그리고 start를 3으로 지정하면 3부터 숫자를 시작한다는 뜻이다. 2. 순서가 없는 목록 태그 , 태그를 사용한다. 3. 설명 목록을 만드는 태그 태그 안에 , 태그를 넣어주는데 태그는 이름 부분을 지정하는 태그 태그는 설명 부분을 지정하는 태그이다.