홍가의 코딩공부

안녕하세요 홍 가입니다. 벌써 2021년도가 끝이 났습니다. 다들 한 해 동안 고생 많으셨습니다. 2022년도에는 더욱더 행복한 한 해 보내시면 좋겠습니다. 오늘은 웹 페이지 헤더를 만들어 보려고 해요 저는 제가 여행 간 곳으로 웹페이지 헤더를 만들려고 해요 웹페이지는 항상 기본 작업을 해놔야 해요 여백공간 없애고 리스트 목록 없애고 하이퍼링크 글자 밑줄 없애고 선 안 생기게 하고 검은색 글씨로 한다. 라는 것을 전체로 주고서 디자인을 시작합니다. 요번은 다른 방법으로 하려고 합니다. h1> a를 하시면 저런 식으로 바로 나와요 ul부분에 li는 5개를 만들고 a태그를 넣어준다 라는 뜻이며 저렇게 하면 코딩할 때 빠르게 만들 수 있습니다. 마음에 드는 사진을 배경 이미지로 두고 space-between ..

Html, Css, JavaScript 기초공부 2021. 12. 31. 10:00

안녕하세요 홍 가입니다. 오늘은 섹션 꾸미기 2탄을 진행을 하려고 합니다. 여기까지 했었는데 오늘은 이 밑에 부분을 채워보려고 해요 이런 식으로 사진과 사진 옆에 글을 넣어서 여기에 대해 소개를 하는 식으로 만들어 보았습니다. 저는 카페 블루 레이크 충청수영 객사 보령 우유 창고 이 3개를 넣을 거기 때문에 이제 섹션은 다 만들었으니까 밑에 부분과 마무리 작업을 해보려고 해요. 저는 background-image를 사용하여 만들어 봤어요 이런 식으로 글자 넣고 색도 넣어주고 하니 좀 나아진 거 같아요 한 개는 사진 사이에 글을 넣어봤고요 다른 한 개는 이미지에 글자를 넣어봤어요. 이게 최종인데 여러분은 어떤 게 더 나은가요? footer부분은 맨 마지막 부분을 뜻하며 flex는 평소 1로 주지만 저렇게 ..

Html, Css, JavaScript 기초공부 2021. 12. 14. 10:00

안녕하세요 홍가 입니다. 오늘은 전에 했던 웹페이지 만들기를 이어서 하려고 합니다. 저는 보령을 소개하는 웹 페이지를 만들어 보려고 해요. 보령에 어디를 다녀왔는데 사진을 첨부하고 싶지만 저는 먼저 목차처럼 보여드리려고 작업 중입니다. 항상 디자인을 할 때 색을 넣어서 하면 편리하다는 장점이 있습니다. 글자를 밑으로 내렸고요 흰 박스로 만들고 조금 나누어 주기 위해 안에 선도 나타내 주고 그림자도 살짝 첨부했어요. 바다이다 보니까 갯벌 색을 넣어 보고 싶어서 직접 찾아서 넣어봤어요. 갯벌색을 넣었으니 ABOUT부분을 생성해보려고 해요 main_text라는 클래스를 만들어서 사용했습니다. 저는 그림을 살짝 첨부해서 꾸미려고 하기 때문에 작업을 하고 있습니다. 이런 식으로 나누어 가지고 그림을 첨부해주려고 ..

Html, Css, JavaScript 기초공부 2021. 11. 29. 10:00

안녕하세요 홍가 입니다. 오늘은 홈페이지를 만들어보려고 합니다. 우선 폴더를 만든 다음에 저는 요즘 영어타자 치는 연습을 하고 있어요 ! + TAP을 하던 Enter을 눌러도 되지만 처음 을 만들어줘요. 이렇게 항상 치고 있어요 컴퓨터 용어는 직접 해보는 게 좋으니까 습관을 들이고 있습니다. 디자인할 때 모든 값을 초기화시켜놓고 디자인을 하고 있어요. https://fonts.google.com/ Google Fonts Making the web more beautiful, fast, and open through great typography fonts.google.com 여기는 이제 폰트를 가져오는 곳인데 아주 많은 폰트가 있습니다. 저는 구글 폰트인 noto sans를 사용했어요 korean으로 적..

Html, Css, JavaScript 기초공부 2021. 11. 11. 10:00

안녕하세요 홍가 입니다. 오늘은 JS라 불리는 JavaScript 기초를 다져보려고 합니다. 처음 틀을 만들어 주시고 경고 창부터 뜨게 해 볼게요 body부분에 input type을 button으로 해서 버튼을 만들어주고 value는 버튼 이름 여기까지는 일반 버튼 만드는 코드예요. 이제 저희가 이벤트를 만들으려고 하는데 input 안에다가 onclick 클릭을 하면 alert가 경고창을 만들어주고 그렇게 해서 저 버튼을 누르게 되면 경고창이 나오게 됩니다. 이제 제대로 사용해봐야죠? 우선 head부분에 script를 만들어 주시고 script는 $(document).ready(function){}); / document가 준비가 되면 function(내용) 실행시킨다.라는 것이에요. css로 입력을 시..

Html, Css, JavaScript 기초공부 2021. 10. 24. 14:00

안녕하세요 홍가 입니다. 오늘은 HTML로 테이블을 만들고 CSS로 꾸며주는 공부를 해보려고 합니다. HTML기초를 보고 싶으신 분들은 ↓↓↓↓↓↓ https://honggacoding.tistory.com/6 HTML 기초 공부하기 (기본틀 짜기, 주석처리, inline block태그, 제목태그, 입력태그 - form / input, 테이 안녕하세요 홍 가 입니다. 오늘은 HTML기초를 공부하려고 합니다. 저도 배워가는 과정이라 제가 아는 선에서 알려드리도록 하겠습니다. 저는 항상 웹 사이트를 만들 때 폴더를 하나 만들어 놓고 honggacoding.tistory.com 전 시간에 이렇게 만들어 봤어요 Preview랑 웹 페이지로 보는 거랑 차이가 없죠? 초반 마크업 할 때 정말 편하답니다. 우선 CS..

Html, Css, JavaScript 기초공부 2021. 10. 9. 10:00

안녕하세요 홍 가 입니다. 오늘은 HTML기초를 공부하려고 합니다. 저도 배워가는 과정이라 제가 아는 선에서 알려드리도록 하겠습니다. 저는 항상 웹 사이트를 만들 때 폴더를 하나 만들어 놓고 시작을 합니다. 맨 위 상단바에 File - Open Folder을 누르시고 생성해 놓은 파일을 클릭하시면 이런 창이 나옵니다 저는 웰컴 페이지를 지운 거예요 이 폴더에 파일을 만들어야지 웹사이트가 나오겠지요? 화면과 똑같이 마우스를 가져가시면 뉴 파일이라고 뜹니다. 클릭하셔서 index.html과 style.css를 만들었습니다. 그러면 창이 이렇게 두 개가 뜨는데 html은 이제 웹사이트를 나타내 주고 css는 html을 꾸며주는 역할을 합니다. html은 사람 얼굴이고 css는 화장품 같은 개념이죠. 이게 기초..

Html, Css, JavaScript 기초공부 2021. 9. 26. 16:46

안녕하세요 홍가 입니다. 오늘은 제가 만든 웹 사이트를 네이버에 검색되게 만들어 보려고 합니다. https://searchadvisor.naver.com/ 네이버 서치어드바이저 네이버 서치어드바이저와 함께 당신의 웹사이트를 성장시켜보세요 searchadvisor.naver.com 원래는 웹 마스터도구 였는데 서치어드바이저로 이름이 바뀌었네요. 조금 밑에 가시면 웹마스터 도구 사용하기를 눌러주세요 여기에 제가 만든 사이트를 넣어볼게요 넣으시면 이렇게 사이트 소유확인이 나오게 되는데 저는 HTML 태그로 해볼게요! 저기 있는 태그를 복사해서 head부분에 넣으면 끝입니다. 헤드 사이 아무 곳에다 넣어 주시면 되요 저장을 하고 전에 사용했던 netlify에 가서 Deploys 눌러 파일을 재업로드 해주세요 조..

Html, Css, JavaScript 기초공부 2021. 9. 13. 22:28