home
📢 공지사항
/////
home
/////
🛳️

4주차 웹 실습 숙제

태그
html&css
javascript
종류
실습
아래 두 개의 강의를 보면서 실습 진행 후 github pages로 배포하여 링크를 첨부해주시면 됩니다 !!
아래 링크 포스팅의 하단 내용 참조, 하나의 프로젝트로 배포하셔도 ok입니다 ~~
사실 동아리에서 1학기 동안 공부하는 내용을 하나의 프로젝트에 담아두는 것을 … 추천드려요 ^^…
Github : Github Pages (Github로 web hosting하기)
github에서는 github pages라는 web hosting service를 제공합니다. 이를 이용하면 내가 작성한 html 파일들을 hosting할 수 있습니다. 이번에는 그 방법을 알아봅시다. 먼저 github 계정은 반드시 있어야합니다. github 계정은 있다고 가정하고 진행하겠습니다. github에 로그인한 후 해야할 것은 먼저 repository를 만드는 것입니다. html 파일들을 deploy하려면 어쨌든 호스팅할 html 파일이 있어야하고, 이 파일들은 github repository에 저장됩니다. 먼저 저는 my_web이라는 이름의 repository를 만들었습니다. 일단 계정이 무료 계정이라는 가정 하에 github pages를 이용하려면 기본적으로 repository가 Publi..
https://cosmosproject.tistory.com/m/696
→ index.html에 모두 링크해두면 보기 편하겠져 ?!!?
프로젝트 하나로 배포하기 예시
2023-1 UDR FE 실습 예제 모음
https://isdiscodead.github.io/likelion-2023/
깃허브 코드 링크
GitHub - isdiscodead/likelion-2023
Contribute to isdiscodead/likelion-2023 development by creating an account on GitHub.
https://github.com/isdiscodead/likelion-2023

1. 사진 위주의 웹사이트 만들기

( 강의 하나하나는 길지 않아요 놀라지 마세요 … )
겁나 빠른 웹 레시피 - 사진 중심의 웹사이트 만들기 1 : 수업소개
생활코딩은 일반인에게 프로그래밍을 알려주는 활동입니다. 더 많은 정보를 원하시면 http://opentutorials.org/course/1를 방문해주세요.
https://www.youtube.com/watch?v=xYzowO0KR70
겁나 빠른 웹 레시피 - 사진 중심의 웹사이트 만들기 2 : 배경이미지
생활코딩은 일반인에게 프로그래밍을 알려주는 활동입니다. 더 많은 정보를 원하시면 http://opentutorials.org/course/1를 방문해주세요.
https://youtu.be/RsA4GRj1ElU
겁나 빠른 웹 레시피 - 사진 중심의 웹사이트 만들기 3 : header avatar
생활코딩은 일반인에게 프로그래밍을 알려주는 활동입니다. 더 많은 정보를 원하시면 http://opentutorials.org/course/1를 방문해주세요.
https://youtu.be/jwIBlxRCamQ
겁나 빠른 웹 레시피 - 사진 중심의 웹사이트 만들기 4 : header h1 웹폰트
생활코딩은 일반인에게 프로그래밍을 알려주는 활동입니다. 더 많은 정보를 원하시면 http://opentutorials.org/course/1를 방문해주세요.
https://youtu.be/Hg-Q78D0HXY
겁나 빠른 웹 레시피 - 사진 중심의 웹사이트 만들기 5 : header icons fontello
생활코딩은 일반인에게 프로그래밍을 알려주는 활동입니다. 더 많은 정보를 원하시면 http://opentutorials.org/course/1를 방문해주세요.
https://youtu.be/dzS97V33iJo
겁나 빠른 웹 레시피 - 사진 중심의 웹사이트 만들기 6 : header 정리
생활코딩은 일반인에게 프로그래밍을 알려주는 활동입니다. 더 많은 정보를 원하시면 http://opentutorials.org/course/1를 방문해주세요.
https://youtu.be/DS4M5o4Y9Cc
겁나 빠른 웹 레시피 - 사진 중심의 웹사이트 만들기 7 : main thumbnail, flex
생활코딩은 일반인에게 프로그래밍을 알려주는 활동입니다. 더 많은 정보를 원하시면 http://opentutorials.org/course/1를 방문해주세요.
https://youtu.be/dfnFveqp_Uo
겁나 빠른 웹 레시피 - 사진 중심의 웹사이트 만들기 8 : footer
생활코딩은 일반인에게 프로그래밍을 알려주는 활동입니다. 더 많은 정보를 원하시면 http://opentutorials.org/course/1를 방문해주세요.
https://youtu.be/AF5vRRIGQ-k
겁나 빠른 웹 레시피 - 사진 중심의 웹사이트 만들기 9 : 마무리 작업과 반응형 웹
생활코딩은 일반인에게 프로그래밍을 알려주는 활동입니다. 더 많은 정보를 원하시면 http://opentutorials.org/course/1를 방문해주세요.
https://youtu.be/yCjN6SIM5LY
실습 템플릿 코드 ( 아래 파일 다운 받으시고 적당히 … 따라하시면 돼요 ^^; )
templated-visualize ex.zip
2404.8KB

2. JavaScript 계산기 만들기

[HTML+CSS+JS] 계산기(calculator) 만들기(with grid) / 웹 코딩 / HTML 코딩
이번 시간에는 HTML과 CSS(feat. grid), 그리고 javaScript를 이용해서 계산기를 처음부터 끝까지 만들어보는 영상입니다. 🤥😜 간단하지만 최소한 동영상에서는 자세하게 모든 내용을 설명하지는 않기 때문에 HTML+CSS+JS을 한 번이라도 정주행해서 공부한 적이 있어야 이해가 가실 수도 있습니다.😢😢 하지만 그리드도 연습해 볼 수 있고 간단한 자바스크립트까지 구현해볼 수 있는 아주 꿀 같은 예제라는 건 확실합니다 😜😜 이번 영상이 수코딩을 운영하는 저의 새해 첫 영상인데, 제 영상을 시청해주시고 사랑해주시는 모든 분들의 소망이 반드시 이루어지는 좋은 2021년이 되었으면 좋겠습니다.😊🙏 많이 늦었지만, 구독자 여러분들 새해 복 많이 받으세요!!!🙌🙌 【🏠 수코딩 사이트】 https://www.sucoding.kr 【😉수코딩에게 문의하기】 sucoding@naver.com 【📙 HTML/CSS 무료 강의 】 https://www.youtube.com/playlist?list=PL-eeIUD86IjQuP9iDbQn_1eMHlPB_qdgY 【📕 Javascript 무료 강의 】 https://www.youtube.com/playlist?list=PL-eeIUD86IjRO4ELwjF8nUfUuLe3aWi6z 【📗 HTML/CSS/JS 미니프로젝트】 https://www.youtube.com/playlist?list=PL-eeIUD86IjSyxTbGT7wY3Hie_HA5bKvg ..................................................... 🌟 수코딩 🌟 코딩, 이제 누구나 쉽게 배울 수 있어요!🙌 저와 함께 즐거운 코딩 공부 같이 해볼까요? 구독과 좋아요 댓글은 제가 다음 영상을 만들때 큰 힘이 됩니다❤️ ..................................................... 🎶 BGM 정보 Music | With You by Declan DP Watch: https://youtu.be/Cr5RK_F5E84 License: http://www.declandp.info/license Download/Stream: https://hypeddit.com/link/gbhbv9 #계산기 #calculator #html
https://www.youtube.com/watch?v=rWFAR1mql8Q