* 간단한 프로토타이핑 (prototyping)
* 가이드라인
1. 웹사이트의 정체성을 드러내는 문구와 설명을 헤딩태그(h1~h6)로 지정한다.
2. 사진을 검색할 수 있도록 input 태그를 사용한다.
3. 사진 리스트를 ul, li 태그 또는 div 태그로 나열한다. (굳이 ul, li 태그 사용하지 않아도 된다.)
4. 사진 리스트는 스크롤 내릴 수 있도록 6~9개 정도 만든다.
5. 블로그 하단의 반응형 웹 적용한 캡쳐화면을 참고해서 GalaxyS5, 아이폰 5/SE, 아이폰 6/7/8, 아이폰 6/7/8 plus 에서 반응형 웹을 적용해본다.
6. 네비게이션 바를 만들어본다.
7. 네비게이션 바 안에 프로필 사진을 넣을수 있도록 한다. (flexbox 사용하기, 네비게이션 오른쪽에 정렬하기)
8. 네비게이션 바 안에 다크모드를 사용할 수 있는 토글 버튼을 만들어본다. (flexbox 사용하기, 네비게이션 오른쪽에 정렬하기)
9. 햄버거 메뉴를 만들어본다. (마우스 hover 일때 간단한 애니메이션 적용하기, 네비게이션 왼쪽에 정렬하기)
10. 웹페이지 정중앙에 위치함 모달창(팝업창)을 만든다. (웹화면이 스크롤되어도 항상 정중앙에 고정되어 있어야 한다. 모바일에서는 body 의 height 값을 고정하고 자식요소가 벗어나면 scroll 될 수 있도록 한다.)
* 주의사항 : 위 가이드라인에 따라 HTML 문서만 작성하면 위와 같이 나오지 않는다. 프로토타이핑 화면은 CSS로 스타일링이 적용된 모습이다. 또한, HTML의 특정 요소들을 공통적으로 스타일링하기 위하여 div 태그로 그룹핑해야 할수도 있다. 그러므로 추후 스타일링을 위하여 숨겨진 div 태그도 고려해야 한다.
* 깃허브에 웹페이지 업로드하기
[8장_] GitHub로 웹 호스팅 이용하기
웹 호스팅(web hosting) 그리고 깃허브(GitHub) 안녕하세요. 저번시간에는 서버와 클라이언트가 무엇인지에 대해 알아봤습니다. 이번 시간에는 '깃허브'에서 지원하는 '웹 호스팅'을 이용하여 서버를
kwiskey.tistory.com
1. 깃허브 회원가입
2. 저장소(repository 생성)
3. Upload files 버튼 클릭
4. choose your files 클릭
5. index.html, style.css, 기타 리소스 파일(사진, 영상, 음악) 선택 및 업로드
6. Commit changes 클릭
7. Settings 클릭
8. Pages 항목 선택
9. Source 에서 None 항목을 main 으로 변경
10. 생성된 웹사이트 주소 확인 및 접속
주의사항 : 깃허브 서버는 성능이 좋지 않으므로 웹사이트가 제대로 보여지는데 시간이 걸릴수 있고 404 페이지가 잠시동안 보여질수도 있다. 깃허브에 코드 변경사항을 적용한 다음에도 웹페이지가 변경사항을 적용하는데 시간이 걸릴수 있다.
(GitHub)깃허브 페이지 404 에러 해결법 총 정리/깃허브 호스팅 404에러
깃허브 페이지 404에러 해결법 총 정리 *깃허브 404 에러가 뜬다면 아래 방법들을 보며 차근차근 문제점을 해결해 보세요. 문제: 1. 호스팅한지 시간이 별로 안지났을때 2. 메인 html 이름이 잘못됐
eunhee-programming.tistory.com
1. 호스팅한 다음 시간이 얼마 안 지난 경우
2. html 파일 이름을 index.html 로 변경하기
3. git commit --allow-empty -m "empty commit" 이라는 빈 커밋을 푸쉬하기
사진 갤러리 앱
sssssqew.github.io
* 깃허브 웹페이지 지속적으로 업데이트하기
할일목록(TODO) 앱 1 - 서버 셋팅 및 Mongo DB 연동
* Node.js 설치 설치 사이트 다운로드 | Node.js Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. nodejs.org LTS버전 Windows Installer (.msi) 64bit 다운로드 * 프로젝트 구조 -..
syleemomo.tistory.com
로컬 PC에 git 을 설치하고 코드 변경사항을 깃허브에 업로드하면 깃허브 페이지도 변경사항이 적용된다.
모바일에서 깃허브 페이지 주소에 접속해서 어떻게 보여지는지 확인하자!
깃허브 커밋이 안되고 user.name user.email 설정하라고 해서 git config --global 로 설정했는데도 안되는 경우
[user]
name = Pavan Kumar Sunkara
email = pavan.sss1991@gmail.com
username = pksunkara윈도우에서는 파일탐색기의 보기 탭을 클릭하고 숨긴 항목을 체크해서 .git 폴더 내부로 들어간다. config 파일을 열어서 맨 하단에 위와 같이 name, email, username 을 직접 작성하고 저장한다. 다시 커밋하면 동작할 것이다.
깃허브 push 할때 권한 문제가 생기는 경우 해결방법 1
GitHub 그룹(organization) PUSH 권한 오류
팀 프로젝트를 위해 만들어진 그룹에 초대되었고 그룹 안에서 저장소를 만들었다. 그리고 로컬에서 작업을 한 뒤 테스트를 해보려던 중 갑자기 권한이 없다고 새빨간 오류 메시지가 떴다. 처음
data-jj.tistory.com
깃허브 push 할때 권한 문제가 생기는 경우 해결방법 2
git push에서 Permission denied 해결
물려받은 PC, 포트 제한 많은 환경. 현재 일하는 곳에서의 환경입니다. 역시 개발 관련 업무하기에 편치 않습니다. 회사계정, 개인계정이 뒤죽박죽 섞여있던 곳에서 git 을 사용하는데 어느 순간 h
rudalson.tistory.com
* 반응형 웹 적용한 모습
