홍가의 코딩공부

안녕하세요 홍 가 입니다. 오늘은 비쥬얼스튜디오와 터미널로 깃허브 파일을 생성하는 것을 알려드리려고 합니다. 깃허브 Repository에 들어가시면 New라는 초록색 버튼을 클릭 Repository name 부분은 저장소 이름이 되는 부분이에요 이름을 적으신 다음 Create repository를 클릭하시면 이렇게 생성이 되신 걸 보실 수 있으세요 저는 리드미 파일을 만드는 걸 체크해서 바로 README.md가 생성되어있어요 리드미는 프로젝트를 소개하는 부분인데요 작성을 해보려고 해요. 리드미를 작성하는 문법을 살짝 알려드릴게요 파일에서 작업을 하면 Preview로 어떻게 나오는지 확인을 할 수 있어서 매우 편하답니다. 아니면 비주얼 코드를 사용하시는 분이면 이렇게 할 수 도 있어요 이렇게 README ..

깃허브 사용법 2022. 9. 19. 10:00

안녕하세요 홍 가 입니다. 오늘은 프로젝트 소개글을 적는 README.md 사용법을 알려 드리려고 합니다. 깃허브 Repository에 들어가시면 New라는 초록색 버튼을 클릭 Repository name 부분은 저장소 이름이 되는 부분이에요 이름을 적으신 다음 Create repository를 클릭하시면 이렇게 생성이 되신 걸 보실 수 있으세요 저는 리드미 파일을 만드는 걸 체크해서 바로 README.md가 생성되어있어요 리드미는 프로젝트를 소개하는 부분인데요 작성을 해보려고 해요. 리드미를 작성하는 문법을 살짝 알려드릴게요 파일에서 작업을 하면 Preview로 어떻게 나오는지 확인을 할 수 있어서 매우 편하답니다. 아니면 비쥬얼코드를 사용하시는 분이면 이렇게 할 수 도 있어요 #은 글머리 기호입니다...

깃허브 사용법 2022. 9. 6. 10:00

안녕하세요 홍 가 입니다. 웹페이지 응용하기 2편입니다. 오늘은 전에 넣어준 아이콘을 클릭하면 모달 창이 나오게 해서 그 부분에 지도 이미지를 넣어주려고 합니다. button은 id : modal_btn으로 주고 wrap로 크기로 모달창 사이즈를 지정해주고 close로 닫기 버튼을 만들어 줬습니다. 지도 이미지를 넣었으니 마우스를 올렸을 때 지역 이름과 클릭 시 페이지로 이동하게 끔 만들겠습니다. Free Online Image Map Generator Easy free online html image map generator. Select an image, click to create your areas and generate html your output! www.image-map.net 하나하나 수..

Html, Css, JavaScript 기초공부 2022. 7. 15. 10:00

안녕하세요 홍 가 입니다. 오늘은 웹 페이지를 응용해서 만들어 보려고 합니다. header부분으로 전체를 잡아주고 main_nav부분을 스태틱으로 상단 고정을 해주고 top_nav로 box-dhadow를 사용해 선을 만들어주고 inner을 통해 사이트 이름 및 검색바를 넣어줍니다. input부분에 돋보기랑 지도 맵 아이콘을 넣었습니다. overflow: hidden; text-indent: -9999px; 텍스트 가리기 position: absolute; 고정을 해주고 background: url(); 로 이미지를 주었습니다. header 부분을 완성했으니 section부분과 footer부분을 정해놨습니다. Swiper Demos Swiper is the most modern free mobile tou..

Html, Css, JavaScript 기초공부 2022. 7. 1. 14:17

안녕하세요 홍 가 입니다. 요즘 프로젝트를 하다 보니까 지도를 넣으려고 하는데 찾아보니까 다들 API를 사용해서 지도를 만드시더라고요! 찾아보고 알아낸 좋은 꿀팁을 알려드리려고 포스팅을 작성했습니다. 우선 요즘 애용하는 카카오 맵 저는 네이버 지도보다 카카오 맵이 더 좋더라고요! 개인적인 의견입니다..ㅎ 사진처럼 따라 해 주세요 깃발 모양을 클릭 이런 화면이 뜨는데 뭐 pc 모바일 등등 아이콘도 변경이 되고요 메모를 추가할 수 도 있습니다. 이제 일반지도랑 이미지 지도가 있는데 차이점은 이미지 지도는 확대 축소가 안되고 저 부분만 나타내 줍니다. 일반지도는 확대 축소가 되며 다른 부분도 확인을 할 수 있습니다. 구글 지도도 한 번 해보았는데요 사진처럼 따라 해 주세요 지도 퍼가기에 HTML복사를 누르시고..

Html, Css, JavaScript 기초공부 2022. 6. 3. 10:00

안녕하세요 홍가 입니다. 오늘은 메뉴바 서브메뉴 만들기를 해보려고 합니다. 많이 사용하는 방법인데요 li*3>a 이렇게 작성하면 li가 3개 생성되고 거기에 a태그가 자동으로 들어가요! ul > li*3 > a로 작성하면 ul li에 a가 포함된 채로 3개가 나오게 됩니다. 우선 서브 메뉴를 만들려면 대표 메뉴 안에 넣어야 하기 때문에 리스트를 계속 만들어 주셔야 합니다. 저런 식으로 틀을 잡아주고 저는 항상 초기화를 해놓고 작업을 하는데 요즘은 reset파일을 사용해서 작성하고 있어요 저는 큰 틀을 menu로 작성을 하였고 메뉴바만 만들기로 해서 body는 블랙으로 색상을 주었고 menu는 흰 바탕으로 차이를 두었습니다. 작업하기 쉽게 absolute를 사용했고 left top transform: tr..

Html, Css, JavaScript 기초공부 2022. 5. 4. 14:00

안녕하세요 홍 가 입니다. 오늘은 로그인 로그 기록을 남기게 해보려고 합니다. 로그인 창을 만들었으니 자바스크립트로 입력 정보를 가져오게 하고싶다. 저는 div class를 login-form으로 정해놔서 저렇게 사용을 했고 첫번째도 가능하지만 두번째도 가능합니다. html과 js소스코드 인데요. querySelector은 클래스명 아이디 등등 다 사용할 수 있어요 저는 클래스를 사용했으니 . 반면 id를 사용했다면 #으로 하시면됩니다. 이렇게 하면 value의 값을 얻을 수 있어요! 저는 이제 사람들의 이름만으로 로그인이 되게끔 만들어 보려고해요 우선 글자수를 정해주시고 문제점은 HTML이 확인 작업을 안해주는데요 JS에 있는 input의 유효성 검사를 하려면 form을 사용 해야 합니다. 이벤트를 사..

Html, Css, JavaScript 기초공부 2022. 4. 1. 10:00

안녕하세요 홍 가 입니다. 오늘은 자바스크립트 기초를 배워보려고 해요 const는 변하지 않는 값 let은 변할 수 있는 값입니다. 변수는 문자 숫자 $ _ 만 사용 가능 첫 글자는 숫자 X 예약어 사용 X 상수는 가급적 대문자로 변수명은 쉽고 이해할 수 있게 문자형은 "", '', ``로 나타 낼 수 있습니다. 요번에는 새로운 것을 배우려고 하는데요 제가 홍가라고 써놓은 저 단어를 블로그라는 단어로 바꾸어 보겠습니다. 영어를 해석하면 문서의 html의 id인 name의 내부 글자를 블로그로 바꿔달라 이 뜻입니다. 저기 innerHTML부분 보이시나요? 저부분에 여러 가지가 사용되기 때문에 구글에 검색하셔서 찾으시면 됩니다. 저는 블로그로 이름을 바꾸었고 색상, 글자크기, 마진 등을 바꾸어 봤습니다. f..

Html, Css, JavaScript 기초공부 2022. 3. 12. 10:56