웹코딩 공부&공유12 [#2 JavaScript] 자바스크립트를 활용한 구글 검색엔진 사용하기 오늘은 HTML & CSS & Javascript를 활용해서 구글 검색엔진을 사용하는 방법을 알려드리겠습니다 사실, 엄청나게 간단하기 때문에 별다른 코드사용은 없으며, 오늘의 핵심은 URL 주소창 입니다 모습이 전체적으로 똑같지는 않지만, 검색엔진을 빌려와서 구현한다는것에 초첨이 맞춰져 있으므로, 검색창 이외에는 작동을 하지 않습니다 접근방법 옛날 사이트들을 보면 우측 상단에 검색기능을 만들어 놓고, 검색을 하게 되면 검색 사이트로 바로 넘어가는 모습을 볼 수 있었습니다 아마, 이런 방식으로 진행이 되었지 싶습니다 우선, 구글을 기준으로 하겠으며 주소창을 먼저 보도록 하겠습니다 구글에 제 블로그 이름 "솔하라이프"를 검색하고 난 후, URL 주소창을 보게되면 https://www.google.com/se.. 웹코딩 공부&공유/javascript 2021. 6. 6. 더보기 ›› [HTML/CSS] 초간단 로그인폼 만들기 - LoginForm 안녕하세요 오늘은 간단한 로그인 폼을 만들어보도록 하겠습니다 기능적인 부분은 하나도 없이 HTML과 CSS만 사용하였기 때문에 디자인만 참고해보시면 좋을것 같습니다 따로 크기를 정해놓지 않은 % 방식으로 하였기 때문에 사이즈를 너무 줄이는 모습까지는 신경쓰지 못하였습니다 중요한 부분 - 위치선정 - display: flex; align-items: center; justify-content: center; flex-direction : column; -디자인 - outline : none; background : linear-gradient() border-radius : --px; box-shadow : -px -px -px color; letter-spacing : -px; SNS 버튼부에서 봐야할 .. 웹코딩 공부&공유/내 작품 2021. 1. 14. 더보기 ›› [Javascript] 자바스크립트 토글 버튼 - 메뉴 버튼 구현 안녕하세요 오늘은 간단하게 자바스크립트로 토글버튼 구현 하는 방법 입니다 제가 사용할 방법은 메뉴 아이콘 이미지를 통하여 메뉴 버튼을 켜고 끄고 하는 방법을 알아보도록 하겠습니다 코드는 정말 간단하기 때문에, 긴 글이 아닌점 참고해주시면 감사하겠습니다 일단 아이콘을 미리 준비해주도록 합시다 버튼을 바꾸는 방법부터 소개해드리겠습니다 우선, 미리보기로 모습을 보자면 !! 이런 모습이 됩니다. 저는 항상 transition 으로 약간 자연스럽게 변화를 좋아하는 타입이라.. 이제 코드를 소개해드리도록 하겠습니다 HTML 코드 이렇게 그냥 div 하나와 함수 하나만 더 추가해주시면 됩니다 물론, 함수 이름은 여러분께서 정해주시면 됩니다. 꼭 따라하실 필요 없습니다 !! CSS 코드 .menu { backgroun.. 웹코딩 공부&공유/javascript 2021. 1. 5. 더보기 ›› [HTML] 버튼(button)과 버튼에 사용하는 CSS에 대해 알아보자 안녕하세요 가운데 정렬로 항상 글을 써내려 갔었는데 아무래도.. 좌측 정렬이 가장 깔끔한거 같습니다 오늘은 HTML의 버튼에 관해서 알아보겠습니다 으로 사용이 되고 있습니다 버튼이란?? 버튼을 사용함으로써 클릭이 가능하게 하고 간단한 표준 버튼 기능이 필요한 곳이라면 어디에나 배치할 수 있다는 장점이 있습니다 기본적인 버튼의 모양은 이쁘지 않지만 CSS를 통하여 디테일하게 모양을 바꿀 수 있습니다 기본 적으로 특성을 좀 알려드리겠습니다 위 와 같이 클래스 이름 뒤에 빨간색에 추가하여 사용 할 수 있습니다 번호 이름 설명 1 disabled 클릭을 막습니다 2 name 버튼의 이름, 제출 할 때 3 type 버튼의 행동 방식 4 value 버튼의 초기값 기본 적으로 버튼은 어떠한 행동을 취할때 하기 때문에.. 웹코딩 공부&공유/HTML 2020. 12. 31. 더보기 ›› [웹 개발]나만 알고싶은 웹 개발 시 유용한 사이트 엄선 10선 공유&모음(폰트, 배경, 아이콘 등..) 안녕하세요 오늘은 웹 개발 시 유용한 사이트 공유를 해보려고 합니다 미리 소개했던 부분도 있고 유용할 만한 사이트 몇가지 알려드리도록 하겠습니다 사이트 링크와 제가 포스팅했던 적있는 글들도 같이 링크 남기도록 하겠습니다 1. Google Font(구글 폰트) fonts.google.com/ Google Fonts Making the web more beautiful, fast, and open through great typography fonts.google.com 웹 상의 폰트를 바꾸거나 내 폰트를 바꿀 때 엄청 유용한 사이트입니다 워낙 유명해서 아마 대부분 아실거라고 생각이 됩니다 2020/12/23 - [웹코딩 공부&공유/css] - (공유) 나만 모르는 웹 폰트 사용법이 있다? - 혹시 구글폰트.. 웹코딩 공부&공유 2020. 12. 30. 더보기 ›› [html/css] 동영상을 활용한 웹 메인 홈페이지 제작하기 - 2편 안녕하세요 동영상을 활용한 웹 메인 홈페이지 제작하기 2편 시작하겠습니다 - 1편 - 레이아웃 및 미리보는 화면 동영상을 화면 사이즈에 맞게 넣는 방법이 있습니다 2020/12/27 - [웹코딩 공부&공유/내 작품] - [html/css] 동영상을 활용한 웹 메인 홈페이지 제작하기 - 1편 [html/css] 동영상을 활용한 웹 메인 홈페이지 제작하기 - 1편 안녕하세요 오늘은 동영상 파일을 활용한 웹 메인 홈페이지 제작을 해보았습니다 CSS까지 자세하게 하여서 2편 ~ 3편정도로 나눌까 생각중입니다 들어가기에 앞서 사이즈는 width : 100% height : 100vh homnay.tistory.com 동영상은 1편에 있습니다 2편에는 이미지만 나타내도록 하겠습니다 1. 설명란 또는 글자를 랜덤으로.. 웹코딩 공부&공유/내 작품 2020. 12. 28. 더보기 ›› [html/css] 동영상을 활용한 웹 메인 홈페이지 제작하기 - 1편 안녕하세요 오늘은 동영상 파일을 활용한 웹 메인 홈페이지 제작을 해보았습니다 CSS까지 자세하게 하여서 2편 ~ 3편정도로 나눌까 생각중입니다 들어가기에 앞서 사이즈는 width : 100% height : 100vh 이며 레이아웃 엄청 간단합니다 ㅎㅎ 미리보기 화면 동영상 웹 페이지 1. 배경에 동영상 넣는 방법 & 화면 꽉 채우는 방법 video HTML 코드 HTML 에 video Tag를 가져와서 src에 경로를 입력해 줍니다 video 태그 안에도 수많은 것들이 있지만 그 중에 사용된 3개를 먼저 설명 드리겠습니다 muted 소리가 있는 동영상은 소리가 안나오게 만들어 준다 autoplay 홈페이지가 로딩 되자마자 동영상 자동 재생 loop 동영상이 끝나면 처음으로 돌아가서 다시 재생 경로에 관.. 웹코딩 공부&공유/내 작품 2020. 12. 27. 더보기 ›› 이전 1 2 다음
