본문 바로가기

개인 스터디

 (18)
Do it 웹사이트 따라 만들기 - 구글 API로 Contact Us 폼 처리하기 # 10-1. 구글 앱스 메일로 가상 서버 만들기 구글에서 제공하며, 우리가 만든 폼을 처리해주기 위한 API이다. HTML 파일 안에서 태그에 mailto 속성으로 메일을 보낼 수 있다. 자신의 구글 계정으로 로그인한 후 docs.google.com/spreadsheets/u/1/d/1Bn4m6iA_Xch1zzhNvo_6CoQWqOAgwwkOWJKC-phHx2Q/copy 를 복사해 브라우저 창에 붙여 넣고 이동한다. 엑셀 시트 상단 메뉴에서 도구 -> 스크립트 편집기를 선택한다.(지금은 확장 프로그램 -> add script로 변경) 스크립트 파일이 나오면 주석을 삭제하고 박스로 메일 자리에 본인 메일 주소를 입력한다. 상단 메뉴의 파일 -> 버전 관리를 선택하여 텍스트 입력창에 사용할 스크립트의 제목..
Do it 웹사이트 따라 만들기 -Contact Us 페이지 만들기 # 9-1. 폼 요소 살펴보기 폼 태그 form : 서버와의 상호작용을 위한 콘텐츠로, 사용자의 요청을 받고 서버에서 그에 따른 처리를 진행한다. 동작 과정 폼 내용을 입력 한 후 폼 안에 있는 모든 데이터를 웹 서버로 보낸다. 웹 서버는 폼 데이터를 처리하기 위해 폼 안에 있는 데이터를 웹 프로그램으로 보낸다. 웹 프로그램은 데이터를 처리한 후 결과를 웹 서버로 보낸다. 웹 서버에서 받은 결과를 브라우저에 보내 사용자가 볼 수 있게 된다. 폼 태그 속성 action : 폼을 통해 전송한 정보를 처리하는 웹 페이지의 URL을 나타낸다. method(default = get) : 브라우저가 폼을 전송하기 위해 사용하는 HTTP의 방식을 지정한다. 이 속성값은 get 또는 post 중 한 개를 갖는다. au..
Do it 웹사이트 따라 만들기 - FAQ 페이지 만들기 # 8-1. 사용자 인터페이스 이해하기 사용자 인터페이스란? 사용자와 시스템이 정보를 주고받기 위해 상호작용을 하는 의사소통 시스템 사용자를 위해 편의성을 고려하고, 시맨틱 마크업을 통해 시스템 배려를 고려한다. 좋은 사용자 인터페이스 만들기 간결하고 직관적으로 표현하기 일관성 있게 구현하기 명확하게 구현하기 # 8-2. 아코디언 형태로 FAQ 만들기 html 파일의 태그에서 으로 제목을 작성하고 .tit_faq 클래스를 지정한다. 제목과 제목 설명이 다른 스타일이 적용되도록 다른 태그를 사용한다. 제목은 , 설명은 태그로 작성한다. css파일에서 .tit_faq의 선택자로 작성한 후 공통인 폰트 색상은 상속을 받아 지정한다. 태그에 font-size와 padding-right 속성값을 지정한다. 태그 ..
Do it 웹사이트 따라 만들기 - 도서소개 페이지 추가하기 # 7-1. Ajax 사용하기 내용이 많아지고 하나의 태그 안에 많은 내용을 표현할 경우 페이리 로딩 속도가 느려질 수 있다. 따라서 도서별 상세 페이지를 따로 만들고, Ajax를 사용해 패당 페이지가 표시되는 동적화면을 만드는 것이 좋다. 대부분의 브라우저에서는 XSS를 막기 위해 요청한 페이지의 도메인과 HTTP 응답의 도메인이 상이할 경우 응답을 거부하는 보안 정책이 적용한다. 이런 경우 Ajax가 동작하지 않는데, 브라우저의 속성 - 대상에서 한 칸을 띄고 --allow-file-access-from-files 옵션을 추가하면 Ajax가 로컬에서 동작이 가능한 상태가 된다. class="detail_content"로 그룹화한 도서 상세 내용 페이지를 별도의 페이지로 만든다. Ajax로 불러오는 내..
Do it 웹사이트 따라 만들기 - 도서소개 페이지 만들기 # 6-1. 콘텐츠 다루는 방법 많은 양의 정보를 담고 있는 콘텐츠는 한눈에 파악할 수 있도록 시각적으로 잘 정리되어 있어야 한다. 기술적으로 HTML 코드 또한 시맨틱한 태그로 잘 작성되어 있어야 한다. 퍼블리싱할 때 태그의 구조가 해당 정보별로 그룹화되어 있어야 한다. # 6-2. 도서 상세 내용 만들기 section id="menu2" 태그가 있는 곳으로 이동 후 section class="content_wrap" 태그의 콘텐츠 제목으로 태그를 작성한다. 제목은 실제 화면에 나타나지는 않도록 css로 font-size를 0으로 지정한다. 책상이미지를 background 속성으로 지정한다. .conbox는 공통으로 사용하느 클래스이므로 도서소개 페이지에만 이미지가 지정될 수 있도록 부모 태그에 상속시..
Do it 웹사이트 따라 만들기 - 회사소개 페이지 만들기 # 5-1. 사용자와 콘텐츠 좋은 웹 사이트와 콘텐츠란? 검색 엔진이 검색에 대한 답을 잘 찾을 수 있도록 웹 사이트를 만들어야 한다. 사용자가 흥미를 느낄 수 있도록 CSS로 디자인하고 JS로 동적인 내용을 전달하여 사용자가 오래 사이트에 머물 수 있도록 정보를 제공해야 한다. # 5-2. 회사소개 페이지 본문 채우기 section class = "content_wrap" 태그의 제목을 태그로 작성한다. 전체 내용의 제목이 되는 태그의 클래스를 pargrph_tit로 지정한다. css를 열어 .pargrph_tit 클래스에 margin-bottom의 속성값, 폰트 크기, 색상을 지정한다. 제목과 본문을 나누는 디자인 요소는 특별한 정보를 전달하지 않으므로 태그를 사용하지 않고 css의 가상요소인 aft..
Do it 웹사이트 따라 만들기 - 페이지 이동 효과 만들기 # 4-1. 동적인 웹 사이트를 위한 자바스크립트 자바스크립트와 제이쿼리 자바스크립트는 웹 페이지와의 상호작용을 가능하게 하는 프로그래밍 언어이다. 서버를 구현하고 읽고 쓰게 하거나(Node.js) 크롤링(JSDom)도 가능하다. jQuery는 자바스크립트를 이용한 라이브러리 중 하나로, 자바스크립트를 매우 간결하고 쉽게 사용할 수 있게 도와준다. # 4-2. 콘텐츠 영역의 이동 형태 살펴보기 class = menu# 영역을 클릭하면 그 메뉴를 기준으로 다른 메뉴들이 왼쪽 혹은 오른쪽으로 슬라이드 하도록 만든다. 이를 위해 현재 영역은 this, 왼쪽으로 이동된 영역은 prev, 오른쪽 영역은 next로 클래스 스타일을 지정한다. this의 left값은 0, prev는-100%, next는 100%로 설..
Do it 웹사이트 따라 만들기 - 전체 레이아웃 만들기 # 3-1 HTML과 레이아웃 시맨틱 마크업이란? 각 태그를 문서의 의미에 맞게 작성하는 것 HTML SECTIONING 태그를 이용해 구조적으로 HTML을 이해할 수 있다. : 하나의 콘텐츠. 즉, 제목으로 시작하는 콘텐츠. ~ 와 같이 제목 태크가 있어야 한다. 검색엔진이 제목 테그와 내용을 수집 가능하다. : 레이아웃을 나누는 용도로, 의미상 관계없는 내용으로 영역을 나눈다. # 3-2. HTML 구조화 레이아웃은 큰 구조로 볼 떄 헤더 영역, 각각의 콘텐츠 영역, 페이지의 푸터 영역으로 나뉜다. 실습에서 사용한 코드와 페이지 모습이다. 이지스퍼블리싱 회사소개 도서소개 FAQ Contact Us 회사소개 도서소개 FAQ Contact Us (04003)서울특별시 마포구 잔다리로 109 TEL (02..

티스토리툴바