HTML5, CSS3를 이용한 웹사이트 제작 실습

인터넷 서점 사이트 기능과 페이지 구상 ■ 인터넷 서점 사이트의 기능 기능 설명 구현 페이지 메인 화면 인터넷 서점 웹사이트의 첫 화면이다. 로고, 메뉴 및 로그인/회원가입 메뉴 등이 보여진다. main.html 로그인 로그인 화면은 새로운 화면으로 이동하지 않고 메인화면의 중간에 보여진다. login.html 회원 가입 폼 위젯을 이용하여 제작된 회원가입 양식을 보인다. 새로운 화면으로 이동하여 보여준다. signup.html 메뉴/국내도서 국내도서 서적 리스트를 이미지와 함께 보여준다. 새로운 화면으로 이동하지 않고 메인 화면 중간에 보인다. domestic_books.html 메뉴/해외번역도서 해외번역 서적 리스트를 이미지와 함께 보여준다. 새로운 화면으로 이동하지 않고 메인 화면의 중간에 보인다...

2020.04.06

고급 표현을 위한 CSS3 활용

목록의 스타일 설정 ■ 목록의 글머리 기호 설정 : list-style-type 구분 속성값 (설명) 순서없는 목록 (unordered list) disc (● 속이 찬 둥근 기호) circle (○ 속이 빈 둥근 기호) square (■ 속이 찬 네모 기호) 순서있는 목록 (ordered list0 decimal (정수 글머리 기호) lower-roman (소문자 로마자 글머리 기호) upper-roman (대문자 로마자 글머리 기호) lower-alpha (소문자 알파벳 글머리 기호) upper-alpha (대문자 알파벳 글머리 기호) 예제 6-1) 과목별 추천도서 목록 멀티미디어 이해 최윤철, 임순범 공저, 멀티미디어배움터 2.0 T.Vaughan, Multimedia: Making It Work,..

2020.04.04

CSS3 스타일시트 기초

CSS3 시작하기 ■ 스타일시트란? HTML에서 부족했던 외형의 세세한 부분이 스타일시트를 이용하면 제어가 가능하다. 또한 콘텐츠 내용과 디자인의 분리가 가능해진다는 장점이 있다. ■ CSS의 특징 CSS3의 가장 큰 차이점은 모듈 기반으로 개발되고 있다는 점이다. 이는 각종 디바이스에 따라 CSS3에서 원하는 모듈만을 탑재하거나 필요한 모듈만을 빠르게 업데이트 가능하게 한다. 또한 화려하고 동적인 스타일을 작성할 수 있도록 기존의 플래시나 그래픽 디자인 도구에 의존하던 부분을 CSS3 스타일시트 만을 이용하여 가능하게 되었다. ■ CSS 시작 예제(1) : 스타일 지정이 없는 문서 설명은 두 개의 요소로 구성되어 있으며 CSS 글자에 요소를 지정하였다. 스타일시트 이해하기 이 예제는 CSS의 개념을 설..

2020.04.03

다양한 입력 폼

폼 이해하기 회원가입, 상품구매, 키워드 검색과 같이 사용자로부터 정보를 받을 때 을 사용한다. 내용을 입력하고 전송버튼을 통해 데이터를 보낸다. 그 데이터는 앱으로 전달이 되어 작업처리 ■ 내의 사용자 입력 요소 사용자의 정보 입력 양식은 안에 , , , 등을 이용한다. ■ 다양한 입력 폼 예제 을 삽입하여 텍스트를 입력하는 문자열 입력 필드, 한 개만 선택 가능한 라디오 버튼 입력, 여러 개 선택하는 체크박스 입력 필드를 만들었다. 그리고 긴 문장 입력하는 요소와 선택목록 중에 하나를 선택하는 요소도 사용. 마지막으로 작성한 폼을 서버로 전송하기 위해 사용하여 신청 버튼과 취소 버튼 삽입하였다. 다양한 입력 폼 성명: 성별: 남성 여성 직업: 학생 회사원 공무원 기타 구입희망분야(복수선택 가능) - ..

2020.03.05

링크와 멀티미디어

문서간 이동 링크의 시작점 앵커 표현 : 이동하고자 하는 목적지 문서 : href 사용 ex) 다른 문서로 이동하려면 요소의 href 속성에 이동 파일의 URL 입력 -> 링크 텍스트 ■ href 속성 절대 주소를 이용한 위치 지정 W3C 사무국(kor) 방문 상대 주소를 이용한 위치 지정 책 목록 ■ title 속성 하이퍼링크에 대한 설명에 사용 ■ 링크 예제(1) : 문서간 이동하기 html 문서 내에서 요소를 사용해 도서의 정보가 포함된 사이트로 이동하는 예를 작성하자. 문서 내 특정 위치로 이동 책갈피 링크라고 생각하면 된다. 목적지 앵커와 시작점 앵커를 다음과 같이 설정 문서 내 이동할 목적지 시작점 - 링크가 설정된 '고유아이디'의 위치로 이동 ■ 링크의 목적지 앵커 지점 : id 속성은 문서..

2020.02.17

HTML5 문서 기본

HTML 기본구조 알아보기 웹 문서는 문서의 종류를 알려주는 으로 시작한다. 문서에 대한 정보 = 가장 높은 단계 제목 가장 높은 단계 제목 가장 높은 단계 제목 가장 높은 단계 제목 가장 높은 단계 제목 가장 높은 단계 제목 단락과 줄 단락 : - 웹 문서에 단락을 만들기 위해 사용. 웹브라우저는 단락과 단락 사이에 약간의 공백 추가하여 표시 줄 바꿈 : 요소 - 요소는 단일 태그 형태로 사용되며 줄을 바꾸고자 하는 위치에 사용 가로줄 : 요소 - 요소는 웹 문서에서 가로줄을 표시하여 앞뒤로 글의 주제가 바뀐 것을 나타낼 때 사용 형식 유지 : 요소 - 요소 내용을 웹브라우저 화면에 그대로 보이고자 할 때 사용 - 웹 문서에서는 빈칸, 탭, 줄바꿈 문자와 같은 공백문자를 하나의 공백으로 하기 때문에 그..

2020.02.15