본문 바로가기

토이 프로젝트

HTML로 만드는 홈페이지, 누구든 쉽고 빠르고 간단하게 - 8(홈페이지 주소, web hosting, 깃허브 홈페이지생성) 안녕하십니까~ 인포돈 입니다! 지금까지 html, css를 다루면서 여기까지 달려오셨다면, 정말 고생하셨습니다. 오늘은 학습보다는 자신이 만든 결과물을 보고 뿌듯함을 느꼈으면 좋겠습니다. HTML로 만드는 홈페이지, 누구든 쉽고 빠르고 간단하게 시리즈의 마지막 단계인 홈페이지의 주소를 달아주어 주변 지인 또는 친구들에게 내 결과물을 보여줄 수 있다는 것입니다. 주소를 다는 방법은 무수히 많지만, 저희는 아주 간단하고 쉽고 빠르게~ 우선 주소를 달기 전에 간단한 지식을 먼저 배워보고 주소를 달아보도록 하겠습니다. 우리가 흔히 쓰는 naver.com 이런 주소들은 어떻게 만들까?라는 의문이 듭니다. 바로 client와 server로 나누어서 관리하고 있기 때문입니다. 우리가 만든 결과물을 우리만 볼 수 있게.. 더보기
HTML로 만드는 홈페이지, 누구든 쉽고 빠르고 간단하게 - 7(홈페이지제작) 안녕하세요 ~ 인포돈 입니다. 오늘부터는 이전에 배웠던 css, html을 활용하여 원하는 홈페이지를 제작해보도록 하겠습니다. 대부분의 사람들은 발표를 맡게 될 때 ppt를 작성하게 됩니다. 저 같은 경우에는 ppt를 작성할 때 겉표지, 예쁜 템플릿을 먼저 찾게 됩니다. 홈페이지도 똑같습니다. 예쁜 템플릿을 찾아봐야 합니다. 물론, 그 템플릿을 직접 만들어 볼 수도 있습니다. 그러나 저희는 누구든 쉽고 빠르고 간단하게! 더 깊숙이 css와 html을 학습하고 싶으신 분들은 직접 템플릿을 만들어보시는 것도 추천드립니다. 그럼 무료로 템플릿을 다운로드할 수 있는 곳을 몇 곳 추천해드리겠습니다. 1. free-css www.free-css.com/free-css-templates Download 3166 Fr.. 더보기
HTML로 만드는 홈페이지, 누구든 쉽고 빠르고 간단하게 - 6(CSS) 안녕하세요 ~ 인포돈 입니다~!! 이번 시간으로 CSS를 마무리하려고 합니다. 이전까지 배운 것들로 충분히 저의 홈페이지를 만들 수 있다는 생각이 들고 있기 때문입니다. 이전까지 CSS의 기본을 배웠다면, 이제는 CSS에서 저희가 가장 원하는 바로 배치에 대해서 알아볼 겁니다. 이전에 배웠었던 CSS의 속성들을 잊지 않고 있다면, 머지않아 저희가 목표로 한 홈페이지를 각자의 힘으로 제작하실 수 있을 것입니다. 1. grid 이번에 알아볼 문법은 바로 grid!! 이 grid는 앞서 배웠던 속성과 태그와는 다르게 바로 값에 해당하는 문법입니다. 왜 이것만 따로 빼와서 배우냐?? 바로 엄청 중요하고 유용한 값이기 때문이죠. 우선 grid를 배우기 앞서서 와 태그에 대해서 배워야 합니다. 앞서 배운 태그들은 .. 더보기
HTML로 만드는 홈페이지, 누구든 쉽고 빠르고 간단하게 - 5(CSS) 안녕하세요 인포돈입니다. 저번 시간에 이어서 css에 대해서 알아보겠습니다. 이전 시간에 css속성과 id, class에 대해서 알아보았습니다. 이번에는 본격적으로 꾸미기 위한 css 코드들을 알려드리겠습니다. 1. border 해당 아래 코드에는 border라는 속성이 사용되었습니다. 해당 코드는 무엇을 의미할지 고민해 보세요 본 코드의 결과는 아래와 같습니다. 보시면 css의 경우 큰 박스가 생성되고 "css is good code"라는 텍스트는 작은 박스가 생성되는 것을 알 수 있습니다. 이러한 이유는 바로 box model 때문입니다. h1태그의 경우 화면 전체를 사용하는 block 형태이고 a 태그의 경우는 자기 자신 주위만 사용하는 inline형태이기 때문입니다. * 여기서 프로그래머들은 항상.. 더보기
HTML로 만드는 홈페이지, 누구든 쉽고 빠르고 간단하게 - 4(CSS) 안녕하세요 인포돈 입니다. 이전 시간까지 HTML 문법에 대해 알아보았습니다. 이번 시간에는 HTML과 상호보완적으로 많이 쓰이는 CSS에 대해서 알아보도록 하겠습니다. 물론 HTML만으로도 홈페이지를 만들 수 있지만 저희는 좀 더 이쁘게 만들고 싶지 않으신가요??? 그렇다면 CSS의 일부분을 배우면 저희가 보는 이런 웹사이트들처럼 저희도 엔지니어가 될 수 있습니다. 이전에 HTML 태그를 연습했던 1.html 파일로 그대로 연습해보셔도 되고, 새롭게 파일을 만들어서 진행하셔도 무방합니다 바로 본론으로 들어가 css에 대해서 알아보겠습니다. HTML에서는 가운데 정렬, 배경 이미지 등 예쁘게 꾸미기 위해서 만들어진 게 CSS라는 문법입니다. 하나의 예시를 보여드리겠습니다. HTML 해당 코드는 css가 .. 더보기
HTML로 만드는 홈페이지, 누구든 쉽고 빠르고 간단하게 - 3(태그, 속성) 안녕하세요 인포돈 입니다. 이번 시간부터는 본격적은 HTML에 대해서 알아볼 수 있는 기회입니다. HTML 관련 자료를 찾아보던 중 '생활코딩'이라는 분의 영상을 보게 되었는데, 보다 쉽고 재미있게 가르쳐 주시더라고요. 그분의 강의를 따라가면 보다 쉽게 이번 프로젝트를 완성시킬 수 있다는 생각이 들어서 바로 실행에 옮겼습니다. 해당 개발 환경을 따라 구축한 뒤 하루 만에 HTML의 전반적인 내용을 다 훑어보았습니다! 그 내용을 토대로 이번 학습을 진행해보겠습니다. 내용은 방대하지만 현재 우리 HTML로 만드는 홈페이지 프로젝트에 적합한 내용만 추려보았습니다! * Atom 이외의 개발 환경을 구축하고 싶으신 분들은 'best html editor 2021' 이런 식의 검색을 통해서 가장 최신 에디터들을 접.. 더보기
HTML로 만드는 홈페이지, 누구든 쉽고 빠르고 간단하게 - 2(개발환경구축,atom) 안녕하세요 인포돈 입니다. 이전 단계에서 목표와 계획을 설정했죠 그러면 이제 바로 HTML 학습을 시작해보겠습니다~ HTML로 만드는 홈페이지, 누구든 쉽고 빠르고 간단하게 - 2(기본 다지기) 모든 분들이 코딩을 배우시는 학생일 수도 있으며, 배우지 않으시는 일반적인 분들일 수도 있습니다. 그러나 지금 이 순간부터는 남의 문제를 해결하는 마인드보다는 나의 문제를 코딩으로 해결하려는 엔지니어의 마인드가 되어야 합니다! 10일 동안 엔지니어가 돼보면서 거대한 탐험을 시작해 보겠습니다. 엔지니어는 기본적으로 작은 문제대 최대한 과장하고 크게 보아야 합니다! 자! 이제 제가 1일 차에 배운 코딩에 대해 학습해 보도록 해요 개발 환경 무언가를 개발 하기 위해서는 개발에 필요한 환경이 필요합니다. 벌써 우리들의 .. 더보기
HTML로 만드는 홈페이지, 누구든 쉽고 빠르고 간단하게 - 1(계획) 안녕하세요 인포돈 입니다. 처음 블로그의 글을 올려보네요. 여러 번의 수정이 있겠지만, 최선의 노력으로 열심히 올려보겠습니다! 저의 첫 포스팅은 바로 HTML로 만드는 홈페이지!! 저도 HTML을 처음 접해 보기 때문에 같이 배우면서 제작까지 도전해 보려 합니다. 대신!! 모두가 이번 HTML로 만드는 홈페이지 시리즈를 따라 하신다면 시리즈를 완독 했을 때는 반드시 자신만의 홈페이지를 직접 제작했다는 성취감을 드리겠습니다. 우선 우리 모두가 처음이거나 익숙지 못한 것을 공부할 때 가장 중요한 것이 무엇인지 아시나요?? 저는 바로 목표입니다! 무엇이든 처음 시작은 의욕이 넘칩니다. 그러나 시간이 지나면 지날수록, 그 열정을 빠르게 식어가죠 그럴 때마다 저희는 되새겨야 됩니다. 저희의 목표를요 작은 팁은 처.. 더보기

티스토리툴바