Arkeiyou

용어체크 1. 블로그 웹 게시판과 개인 홈페이지가 결합된 형태의 사이트로 관심사에 따라 일기, 컬럼, 기사 등의 게시 가능 2. 파워블로거 문화, 예술 분야에서 요리, 인테리어까지 다양한 분야에 다양한 주제를 가지고 사용자들에게 유익한 정보와 다양한 노하우를 제공하는 매우 우수하고 가입자가 많은 블로그 운영자 3. GitHub 컴퓨터 프로그램 소스를 공유하고 협업하여 개발할 수 있는 버전 관리 시스템인 깃(Git)에 프로젝트 관리 지원 기능을 확장하여 제공하는 웹 호스팅 서비스 학습내용 1. 블로그/카페 2. GitHub를 이용한 페이지 등록 블로그/카페 개설하기 GitHub 개설하기 학습목표 1. 블로그/카페를 개설하는 방법을 설명할 수 있다. 2. GitHub를 이용하여 작성한 웹페이지 호스팅 하는 ..

용어체크 1. FTP 파일 송수신을 위해 고안된 프로그램 2. 유비쿼터스 사용자가 컴퓨터나 네트워크를 의식하지 않고 장소에 상관없이 자유롭게 네트워크에 접속할 수 있는 환경 3. 클라우드 유비쿼터스 컴퓨팅을 구현하기 위해 클라우드 개념 등장 클라우드 컴퓨팅은 하드웨어나 소프트웨어와 같은 컴퓨터 자산을 빌려 쓰는 개념 학습내용 1. 파일 전송 및 네이버 클라우드 서비스 2. 클라우드를 이용한 오피스 사용 FTP서비스 및 네이버 클라우드 서비스 이용하기 클라우드를 이용하여 엑셀 및 설문조사 등 서비스 이용하기 학습목표 1. 파일 전송 서비스에 대해서 설명할 수 있다. 2. 클라우스 서비스에 대해서 설명 할 수 있다. 클라우드 서비스 플랫폼에는 어떤 것이 있을까요?네트워크를 통해 소프트웨어를 온라인으로 이용하..

용어체크 1. 템플릿 웹 페이지 제작하는 태그를 모르더라도 회원 가입 후 메뉴만 선택하여 쉽게 홈페이지를 만들 수 있음 2. Wix 페이지와 앱 페이지 템플릿을 제공 3. Modoo 간단한 홍보용 모바일 앱 페이지 템플릿을 제공 학습내용 1. WIX 사이트에 접속하기 2. 템플릿 이용하여 변형하기 WIX 사이트에서 제공해주는 템플릿을 이용하여 주제에 맞는 페이지 제작하기 학습목표 1. 템플릿을 이용하여 웹페이지를 제작할 수 있다. 템플릿을 이용하면 어떤 점이 편리할까요?HTML, CSS, Jquery 의 문법을 모르는 초보자들도 쉽게 역동적인 웹페이지를 제작할 수 있습니다. 이번 시간 살펴본 템플릿 제공 사이트를 통해 나만의 멋진 홈페이지를 제작해보시기 바랍니다. Quiz 01웹 페이지를 제작하는 태그를..

용어체크 1. 반응형 웹 디자인 웹 사이트의 내용을 그대로 유지하면서 다양한 화면 크기에 맞게 웹 사이트를 표시하는 방법 2. 미디어 쿼리 사이트에 접속하는 기기별로 적용할 CSS 파일을 다르게 지정해 주는 기술 각 기기마다 서로 다른 레이아웃을 표시할 수 있음 3. 뷰포트 PC 화면과 모바일 화면의 픽셀 표시 방법이 다르기 때문에 모바일 화면에서 의도한대로 표시되지 않으므로, 뷰포트를 지정하면 기기 화면에 맞춰 확대/축소해서 내용을 표시할 수 있음 학습내용 1. 반응형 웹의 개념 2. 뷰 포인트 3. 미디어 쿼리 뷰포인트와 미디어 쿼리를 이용하여 테스트 기기별 페이지 크기 변경하기 학습목표 1. 반응형 웹에 대해서 설명 할 수 있다. 2. 뷰 포인트와 미디어 쿼리에 대해서 설명할 수 있다. 반응형 웹 ..

용어체크 1. border 속성 border-collapse: 표 테두리와 셀 테두리를 합칠 것인지 설정 border-spacing: 테두리의 간격 등을 설정 2. Column 속성 Column-width: 단의 너비를 고정해 놓고 화면 분할/화면이 커지면 단의 개수가 많아짐 Columun-count: 단의 개수를 먼저 정해 놓고 화면에 해당 개수 만큼 분할 Column-span: 여러 단을 하나로 합칠 수 있음 3. 페이지 레이아웃 웹페이지에서 HTML 요소의 위치, 크기 등을 결정하는 것 학습내용 1. 표 꾸미기 2. 페이지 레이아웃 작성 다양한 표 모양으로 꾸미기 시맨틱 태그로 페이지 구조 만들기 학습목표 1. 표의 테두리, 셀 여백, 정렬 등의 설정방법에 대해서 설명할 수 있다. 2. 시맨틱 태그..

용어체크 1. Position position : static(디폴트) -정적 배치 position : relative - 상대적으로 기준으로 배치 position : absolute - 절대기준으로 배치 position : fixed - 항상 고정 위치에 배치 2. Float 유동적 배치로 브라우저의 요소를 왼쪽이나 오른쪽에 떠 있게 만드는 속성으로 브라우저의 크기에 따라 위치가 유동적으로 변경됨 3. Z-index 요소가 겹치는 현상이 발생할 때 겹치는 순서를 변경 학습내용 1. 선택한 요소들의 배치 방법 2. float 속성을 이용한 유동 배치 3. z-index를 이용하여 겹치는 순서 변경 선택 요소의 상대, 절대 기준으로 배치 요소를 float 속성을 이용하여 왼쪽, 오른쪽 배치 z-index를..

용어체크 1. 박스모델의 구성요소 콘텐츠, 패딩, 테두리, 여백 2. 여백조절속성 margin: 요소와 요소 사이의 간격 여백을 조절 padding: 테두리와 안쪽 콘텐츠 내용과의 간격을 조절 3. 리스트를 이용한 속성 , 태그를 이용하여 표현된 리스트를 list-style-type과 display 속성을 이용하여 내비게이션 메뉴를 만들 때 이용 학습내용 1. 박스 모델 표 2. 여백, 크기, 테두리 다루기 3. 리스트 꾸미기 박스 모델 다루기 여백, 테두리 표현 리스트 위치, 머커 바꾸기 학습목표 1. 박스 구성 및 박스를 표현하는 과정을 설명할 수 있다. 2. 요소들의 테두리와 여백을 조절할 수 있다. 3. 리스트 위치, 마커 바꾸는 방법에 대해서 설명할 수 있다. 태그는 모두 박스 모델인가요? 태그..

용어체크 1.Color 글자 색상을 변경할 때 사용하는 속성 2. Font 글자 크기를 변경할 때에는 font-size, 글꼴 속성은 font-family, 글자 굵기는 font-weight 이용 3. Background 배경을 변경할 때 사용하는 속성 background-color는 단색으로, background-image는 이미지를 이용하여 배경을 변경하는 속성 학습내용 1. css의 표현 단위 2. 텍스트 꾸미기 속성 3. 배경 속성 실습 작성한 문서의 텍스트에 사용될 폰트 변경 및 꾸미기 해당 영역에 배경삽입 학습목표 1. css의 표현 단위를 설명할 수 있다. 2. 텍스트 요소의 꾸미는 방법을 설명할 수 있다. 3. 선택한 요소에 색상과 배경 등을 삽입할 수 있다. Quiz 01글꼴을 변경할 때..

용어체크 1. 클래스 선택자 여러 태그에 특정 스타일을 공통으로 적용하고자 할 때 사용 클래스 스타일은 “.”으로 정의하며, 아이디 스타일은 “#”으로 정의 2. 선택자 조합 선택자를 2개 이상 나열해서 사용 주로 서식을 구체적으로 접근하고자 할 때 사용 3. 가상 선택자 요소를 선택할 수 있는 특별한 상태를 표현 학습내용 1. 클래스 선택자, 아이디 선택자 2. 여러 선택자 조합 3. 가상 선택자 클래스 선택자와 아이디 선택자 정의 및 사용법 자식, 후손 선택자 사용법 하이퍼링크의 가상 선택자 학습목표 1. 클래스 선택자, 아이디 선택자에 대해서 설명할 수 있다. 2. 자식, 후선 선택자의 사용법 및 차이점을 설명할 수 있다. 3. 가상 클래스 선택자에 대해서 설명 할 수 있다. 1. 클래스 선택자, ..

용어체크 1. CSS Html 언어로 작성된 문서 내용을 기준으로 다양한 서식을 제작할 수 있는 언어 2. CSS 삽입 내부 스타일,외부 스타일, 인라인 스타일 3가지가 있음 3. CSS 선택자 서식을 변경할 대상 학습내용 1. CSS3 스타일 시트 개요 2. CSS3 스타일 시트 삽입방법 3. 전체, 태그 선택자 CSS3 스파일 시트 삽입방법 3가지 태그 선택자를 이용한 CSS3 사용법 학습목표 1. CSS3 스타일 시트의 구성에 대해서 설명할 수 있다. 2. CSS3 스타일 시트 삽입방법에 대해서 설명 할 수 있다. 3. 태그 선택자에 대해서 설명할 수 있다. 1. CSS3 스타일 시트 개요 1) 스타일시트란? 웹 문서의 출력될 외형 스타일 HTML태그로는 세세한 부분까지 모두 다 지정하기에는 부족하..