✨08장 연습문제✨ [연습문제 01] 다음 문장에 O X를 표시하시오. (1) 미디어 쿼리는 link 태그의 media 속성 또는 style 태그 내부의 @media 규칙에 입력할 수 있습니다. (O) (2) 미디어 쿼리를 사용하면 웹 브라우저에서 인쇄할 때만 적용할 스타일을 지정할 수 있습니다. (O) (3) 미디어 속성 사용해 방향을 지정할 때는 어떤 모서리가 아래에 있는지에 따라 네 가지 나누어 지정할 수 있습니다. (X) [연습문제 02] 반응형 웹 디자인의 목적은 무엇인가? ① 웹 사이트의 로딩 속도를 높인다. ② 웹 사이트에 더 많은 멀티미디어 콘텐츠를 추가한다. ③ 웹 사이트의 보안을 강화한다. ④ 다양한 디바이스와 화면 크기에 적응하는 웹 사이트를 제작한다. [연습문제 03] 다음 중 반응..
✨07장 연습문제✨ [연습문제 01] 다음 문장에 O X를 표시하시오. (1) 어떤 요소를 수평으로 정렬할 때는 자손에게 float 속성을 지정하고, 부모의 overflow 속성은 hidden으로 적용한다. (O) (2) 어떤 요소를 화면 중앙에 정렬하고 싶을 때는 {margin: auto}를 사용한다. (X) (3) 절대 위치로 요소를 배치할 때는 {position: absolute}를 사용한다. (O) (4) 요소를 고정 위치에 배치할 때는 {position: fixed}를 사용한다. (O) [연습문제 02] 다음과 같은 포털 사이트 메인 페이지의 기본 형태를 단계별로 구현하시오. (1) 다음 코드에 스타일을 적용해 그림과 같이 레이아웃을 구성한다. (2) 다음 코드에 스타일을 적용해 그림과 같이 레..
✨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 속성에 글꼴을 여러 개 지정하는 것은 아무런..
04 HTML 입력 양식 태그와 구조화 태그 ✨입력 양식 태그✨ 입력 양식이란 사용자에게 정보를 입력받는 요소이다. ① 입력 양식 개요 - form 태그로 영역을 생성하고, form 태그 내부에 input 태그를 추가한다. 데이터를 입력하고 버튼을 누르면 지정된 방식으로 지정된 장소에 데이터를 전달한다. method 속성: 입력 양식에 입력한 데이터를 전달하는 방식 action 속성: 입력 양식에 입력한 데이터를 전달하는 장소 - 전송 방식으로 GET 방식, POST 방식을 가장 많이 사용한다. GET 방식: 주소에 데이터를 입력해서 전달하며 크기가 한정된다. POST 방식: 주소를 변경하지 않고 비밀스럽게 데이터를 전달하며 용량에 제한이 없다. ② 입력 양식 종류 - form - input - text..
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 |= ..
Chapter 03 HTML 기본 태그 ✨ 글자 태그 ✨ 웹 페이지는 글자 태그의 비중이 매우 크다. 1. 제목과 본문 글자 태그 태그는 다른 글자 태그 내부에 삽입할 수 있지만 은 불가능하다. 공백, 괄호 같은 특수 문자를 표기하려면 아래에 표를 참고하면 된다. HTML 태그 내부에 공백 3개를 연속으로 입력하면 제대로 표시되지 않고 를 사용하면 모든 공백을 표시할 수 있다. ✨ 앵커 태그 ✨ 하이퍼 텍스트는 사용자 선택에 따라 관련한 특정 정보로 이동할 수 있도록 조직된 문서이다. a태그는 anchor를 의미한다. 다른 웹 페이지나 웹 페이지 내부의 특정 위치로 이동할 때 사용한다. href 속성은 hyper reference를 의미한다. 웹 페이지나 파일의 위치를 나타내는 경로를 입력해 웹 브라우저..
✨PHP의 개념✨ PHP는 Personal Home Page의 약어이며 정식 명칭은 PHP: Hyertext Preprocessor이다. PHP는 1994년 라스무스 레도르프가 개발한 웹 프로그래밍 언어로 HTML/CSS/자바스크립트와 함께 사용하여 다양한 형태의 웹 사이트를 제작할 수 있다. HTML/CSS로만 작성된 웹 페이지는 웹 서버 컴퓨터를 통해 단방향의 일방적인 정보만 제공할 수 있다. 그러나 PHP를 사용하면 웹 사이트의 게시판, 인터넷 뱅킹, 온라인 예약, 장바구니, 배송 조회 등 다양한 양방향의 기능을 구현할 수 있다. ✨PHP의 특징✨ 1. 대부분의 운영체제에서 구현가능 PHP는 윈도우, 매킨토시, 유닉스, 리눅스 등 대부분의 운영체제에서 잘 동작한다. 그 중에서도 리눅스 운영체제는 중..
Chapter 02 웹 페이지 기본 구조와 작성 방법 ✨HTML5 기본 용어✨ 1. 태그와 요소 요소는 HTML 페이지를 구성하는 각 부품으로 제목, 본문, 이미지 등이 모두 요소이다. 자바스크립트 개발에서는 요소를 객체(object)라고도 한다. 태그는 요소를 만들 때 사용하는 작성 방법이다. 흔히 요소와 태그를 구분하지 않고 사용한다. 내용을 가질 수 있는 요소와 내용을 가질 수 없는 요소 내용을 가질 수 있는 요소를 생성할 때는 시작 태그, 끝 태그를 사용한다. ** HTML 표기법은 만으로 요소를 생성하기 때문에 내용을 가질 수 있는 태그의 시작 태그로 오해할 수 있다. XHTML 표기법은 명확하게 내용을 가질 수 없는 태그라고 표기할 수 있다. 2. 속성 속성은 태그에 추가 정보를 부여하는 것이..
Chapter 01 웹 개요와 실습 환경 구축 ✨인터넷과 웹 시작✨ 인터넷(Internet)은 전 세계를 연결하는 국제 정보 통신망으로 컴퓨터나 스마트폰 같은 디지털 기기로 연결되어 정보를 공유하는 공간이다. 웹은 인터넷 공간에서 제공하는 서비스이다. 미국 국방성에서 ARPA(Advanced Research Projects Agency) 부서를 창설했다. 1969년 아파넷(ARPANET)을 개발하고 1995년 인터넷이 전 세계에 연결되고 일반인이 사용할 수 있게 되었다. 월드 와이드 웹은 1991년 팀 버너스리가 발표했다. 1993년에 소스 코드를 오픈했다. 웹 브라우저는 웹에 공개된 정보를 탐색할 수 있게 하는 프로그램이다. W3C(World Wide Web Consortium)는 국제 웹 표준화 단체..