본문 바로가기

Study/Web8

[HTML5 웹 프로그래밍 입문 4판 Chapter 08] 연습 문제 정답 ✨08장 연습문제✨ [연습문제 01] 다음 문장에 O X를 표시하시오. (1) 미디어 쿼리는 link 태그의 media 속성 또는 style 태그 내부의 @media 규칙에 입력할 수 있습니다. (O) (2) 미디어 쿼리를 사용하면 웹 브라우저에서 인쇄할 때만 적용할 스타일을 지정할 수 있습니다. (O) (3) 미디어 속성 사용해 방향을 지정할 때는 어떤 모서리가 아래에 있는지에 따라 네 가지 나누어 지정할 수 있습니다. (X) [연습문제 02] 반응형 웹 디자인의 목적은 무엇인가? ① 웹 사이트의 로딩 속도를 높인다. ② 웹 사이트에 더 많은 멀티미디어 콘텐츠를 추가한다. ③ 웹 사이트의 보안을 강화한다. ④ 다양한 디바이스와 화면 크기에 적응하는 웹 사이트를 제작한다. [연습문제 03] 다음 중 반응.. 2023. 12. 24.
[HTML5 웹 프로그래밍 입문 4판 Chapter 07] 연습 문제 정답 ✨07장 연습문제✨ [연습문제 01] 다음 문장에 O X를 표시하시오. (1) 어떤 요소를 수평으로 정렬할 때는 자손에게 float 속성을 지정하고, 부모의 overflow 속성은 hidden으로 적용한다. (O) (2) 어떤 요소를 화면 중앙에 정렬하고 싶을 때는 {margin: auto}를 사용한다. (X) (3) 절대 위치로 요소를 배치할 때는 {position: absolute}를 사용한다. (O) (4) 요소를 고정 위치에 배치할 때는 {position: fixed}를 사용한다. (O) [연습문제 02] 다음과 같은 포털 사이트 메인 페이지의 기본 형태를 단계별로 구현하시오. (1) 다음 코드에 스타일을 적용해 그림과 같이 레이아웃을 구성한다. (2) 다음 코드에 스타일을 적용해 그림과 같이 레.. 2023. 12. 23.
[HTML5 웹 프로그래밍 입문 4판 Chapter 06] 연습 문제 정답 ✨06장 연습문제✨ [연습문제 01] 다음 문장에 O X를 표시하시오. (1) inline 형식의 태그에는 width 속성과 height 속성이 적용되지 않으며, margin 속성과 padding 속성은 좌우로만 적용됩니다. (O) (2) inline-block 형식의 태그는 width 속성과 ehight 속성이 지정되며, amrgin 속성과 padding 속성이 상하좌우로 적용됩니다. (O) (3) block 형식의 태그는 width 속성과 height 속성이 지정되며, margin 속성과 padding 속성이 상하좌우로 적용됩니다. (O) (4) background-image 속성에는 이미지를 하나만 지정할 수 있습니다. (X) (5) font-family 속성에 글꼴을 여러 개 지정하는 것은 아무런.. 2023. 12. 22.
[HTML5 웹 프로그래밍 입문 4판 Chapter 04 연습 문제 포함] 04 HTML 입력 양식 태그와 구조화 태그 ✨입력 양식 태그✨ 입력 양식이란 사용자에게 정보를 입력받는 요소이다. ① 입력 양식 개요 - form 태그로 영역을 생성하고, form 태그 내부에 input 태그를 추가한다. 데이터를 입력하고 버튼을 누르면 지정된 방식으로 지정된 장소에 데이터를 전달한다. method 속성: 입력 양식에 입력한 데이터를 전달하는 방식 action 속성: 입력 양식에 입력한 데이터를 전달하는 장소 - 전송 방식으로 GET 방식, POST 방식을 가장 많이 사용한다. GET 방식: 주소에 데이터를 입력해서 전달하며 크기가 한정된다. POST 방식: 주소를 변경하지 않고 비밀스럽게 데이터를 전달하며 용량에 제한이 없다. ② 입력 양식 종류 - form - input - text.. 2023. 10. 24.
[HTML5 웹 프로그래밍 입문 4판 Chapter 05 연습 문제 포함] 05 CSS3 기초: 선택자와 단위 ✨선택자의 용도와 사용법✨ 스타일시트: style 태그 내부에 CSS 블록을 입력해서 작성한 코드 - CSS3에서 특정 HTML 태그를 선택할 때는 선택자를 사용한다. - 아래 예시는 선택자를 사용해 h1 태그를 선택하고, 선택한 h1 태그의 color 스타일 속성에 red 값을 적용한 CSS 블록이다. h1 { color: red; } CSS3 선택자 종류 종류 형태 사용 예 전체 선택자 * * 태그 선택자 태그 h1 아이디 선택자 #아이디 #id 클래스 선택자 .클래스 .header 속성 선택자 선택자[속성 = 값] input[type = text] 선택자[속성 ~= 값] div[data-role ~= row] 선택자[속성 |= 값] div[data-role |= .. 2023. 10. 23.
[HTML5 웹 프로그래밍 입문 4판 Chapter 03 연습 문제 포함] Chapter 03 HTML 기본 태그 ✨ 글자 태그 ✨ 웹 페이지는 글자 태그의 비중이 매우 크다. 1. 제목과 본문 글자 태그 태그는 다른 글자 태그 내부에 삽입할 수 있지만 은 불가능하다. 공백, 괄호 같은 특수 문자를 표기하려면 아래에 표를 참고하면 된다. HTML 태그 내부에 공백 3개를 연속으로 입력하면 제대로 표시되지 않고 를 사용하면 모든 공백을 표시할 수 있다. ✨ 앵커 태그 ✨ 하이퍼 텍스트는 사용자 선택에 따라 관련한 특정 정보로 이동할 수 있도록 조직된 문서이다. a태그는 anchor를 의미한다. 다른 웹 페이지나 웹 페이지 내부의 특정 위치로 이동할 때 사용한다. href 속성은 hyper reference를 의미한다. 웹 페이지나 파일의 위치를 나타내는 경로를 입력해 웹 브라우저.. 2023. 9. 30.