CSS

오늘은 HTML & CSS & Javascript를 활용해서 구글 검색엔진을 사용하는 방법을 알려드리겠습니다 사실, 엄청나게 간단하기 때문에 별다른 코드사용은 없으며, 오늘의 핵심은 URL 주소창 입니다 모습이 전체적으로 똑같지는 않지만, 검색엔진을 빌려와서 구현한다는것에 초첨이 맞춰져 있으므로, 검색창 이외에는 작동을 하지 않습니다 접근방법 옛날 사이트들을 보면 우측 상단에 검색기능을 만들어 놓고, 검색을 하게 되면 검색 사이트로 바로 넘어가는 모습을 볼 수 있었습니다 아마, 이런 방식으로 진행이 되었지 싶습니다 우선, 구글을 기준으로 하겠으며 주소창을 먼저 보도록 하겠습니다 구글에 제 블로그 이름 "솔하라이프"를 검색하고 난 후, URL 주소창을 보게되면 https://www.google.com/se..

안녕하세요 오늘은 간단한 로그인 폼을 만들어보도록 하겠습니다 기능적인 부분은 하나도 없이 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 버튼부에서 봐야할 ..

안녕하세요 오늘은 간단하게 자바스크립트로 토글버튼 구현 하는 방법 입니다 제가 사용할 방법은 메뉴 아이콘 이미지를 통하여 메뉴 버튼을 켜고 끄고 하는 방법을 알아보도록 하겠습니다 코드는 정말 간단하기 때문에, 긴 글이 아닌점 참고해주시면 감사하겠습니다 일단 아이콘을 미리 준비해주도록 합시다 버튼을 바꾸는 방법부터 소개해드리겠습니다 우선, 미리보기로 모습을 보자면 !! 이런 모습이 됩니다. 저는 항상 transition 으로 약간 자연스럽게 변화를 좋아하는 타입이라.. 이제 코드를 소개해드리도록 하겠습니다 HTML 코드 이렇게 그냥 div 하나와 함수 하나만 더 추가해주시면 됩니다 물론, 함수 이름은 여러분께서 정해주시면 됩니다. 꼭 따라하실 필요 없습니다 !! CSS 코드 .menu { backgroun..

안녕하세요 가운데 정렬로 항상 글을 써내려 갔었는데 아무래도.. 좌측 정렬이 가장 깔끔한거 같습니다 오늘은 HTML의 버튼에 관해서 알아보겠습니다 으로 사용이 되고 있습니다 버튼이란?? 버튼을 사용함으로써 클릭이 가능하게 하고 간단한 표준 버튼 기능이 필요한 곳이라면 어디에나 배치할 수 있다는 장점이 있습니다 기본적인 버튼의 모양은 이쁘지 않지만 CSS를 통하여 디테일하게 모양을 바꿀 수 있습니다 기본 적으로 특성을 좀 알려드리겠습니다 위 와 같이 클래스 이름 뒤에 빨간색에 추가하여 사용 할 수 있습니다 번호 이름 설명 1 disabled 클릭을 막습니다 2 name 버튼의 이름, 제출 할 때 3 type 버튼의 행동 방식 4 value 버튼의 초기값 기본 적으로 버튼은 어떠한 행동을 취할때 하기 때문에..

안녕하세요 오늘은 웹 개발 시 유용한 사이트 공유를 해보려고 합니다 미리 소개했던 부분도 있고 유용할 만한 사이트 몇가지 알려드리도록 하겠습니다 사이트 링크와 제가 포스팅했던 적있는 글들도 같이 링크 남기도록 하겠습니다 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] - (공유) 나만 모르는 웹 폰트 사용법이 있다? - 혹시 구글폰트..

안녕하세요 동영상을 활용한 웹 메인 홈페이지 제작하기 2편 시작하겠습니다 - 1편 - 레이아웃 및 미리보는 화면 동영상을 화면 사이즈에 맞게 넣는 방법이 있습니다 2020/12/27 - [웹코딩 공부&공유/내 작품] - [html/css] 동영상을 활용한 웹 메인 홈페이지 제작하기 - 1편 [html/css] 동영상을 활용한 웹 메인 홈페이지 제작하기 - 1편 안녕하세요 오늘은 동영상 파일을 활용한 웹 메인 홈페이지 제작을 해보았습니다 CSS까지 자세하게 하여서 2편 ~ 3편정도로 나눌까 생각중입니다 들어가기에 앞서 사이즈는 width : 100% height : 100vh homnay.tistory.com 동영상은 1편에 있습니다 2편에는 이미지만 나타내도록 하겠습니다 1. 설명란 또는 글자를 랜덤으로..

안녕하세요 오늘은 동영상 파일을 활용한 웹 메인 홈페이지 제작을 해보았습니다 CSS까지 자세하게 하여서 2편 ~ 3편정도로 나눌까 생각중입니다 들어가기에 앞서 사이즈는 width : 100% height : 100vh 이며 레이아웃 엄청 간단합니다 ㅎㅎ 미리보기 화면 동영상 웹 페이지 1. 배경에 동영상 넣는 방법 & 화면 꽉 채우는 방법 video HTML 코드 HTML 에 video Tag를 가져와서 src에 경로를 입력해 줍니다 video 태그 안에도 수많은 것들이 있지만 그 중에 사용된 3개를 먼저 설명 드리겠습니다 muted 소리가 있는 동영상은 소리가 안나오게 만들어 준다 autoplay 홈페이지가 로딩 되자마자 동영상 자동 재생 loop 동영상이 끝나면 처음으로 돌아가서 다시 재생 경로에 관..

안녕하세요 베트남에 장기해외실습으로 1년 조금 넘는 시간을 살았었는데요 북부에는 많이 여행다니고 했었는데 어떻게 하다보니 중부, 남부로는 한번도 여행을 가보지 못했어요 살다 보니 베트남어도 어느정도 할 줄 알게되고 많은 친구도 사귀게 되었었는데요 저도 다시 베트남에 가야하는데 언제쯤 다시 갈 수 있으려나 하하.. 코로나때문에 해외 어디 여행이라도 가고싶어도 가질 못하니.. 베트남 중부, 남부로 여행을 가고 싶어서 간단하게 하나 만들어 보았습니다 2020/08/01 - [웹코딩 공부&공유/css] - 나혼자 웹 독학 - css flex(플렉스)를 활용한 메뉴바 만들기 나혼자 웹 독학 - css flex(플렉스)를 활용한 메뉴바 만들기 안녕하세요 간단한 html, css를 이용한 menubar를 만들어 보려..

안녕하세요 @keyframes를 활용한 텍스트 효과를 소개해 드리려고 합니다 간단하고 쉬워서 여러분 모두 따라 하실 수 있습니다 예쁜 텍스트 효과 이 정도이고요 잘 사용할 일은 없지만 그래도 간단하고 이뻐서 알아두시면 좋은 것 같습니다 우선 @keyframes에 대해 알아보겠습니다 쉽게 생각해서 애니메이션 효과를 주고 싶은 곳에 @keyframes를 주시면 돼요 예를 들어) @keyframes test { /* from = 0% */ from { ... } 50% { ... } /* to = 100% */ to { ... } } 이런 식으로 해서 from >> 50% >> to까지 어떤 효과를 줄 건지에 대한 걸 {} 중괄호 안에 넣으시면 됩니다 간단한 효과를 먼저 한번 보자면 하늘 하늘 p { anim..

안녕하세요 간단한 html, css를 이용한 menubar를 만들어 보려 합니다 기본적으로 display : flex; 가 들어가는 방식입니다 안녕하세요1 안녕하세요2 안녕하세요3 위와 같이 큰 menubar 라는 박스안에 3개의 div 가 안에 있습니다 (menu_logo, menu_menu, menu_etc) /* 바디 속성 지정 */ body { box-sizing: border-box; margin: 0; padding: 0; } /* menubar 속성 */ .menubar { background-color: lightgreen; font-size: 30px; display: flex; /* 3개의 박스를 담는 가장 큰 박스에 flex*/ justify-content: space-between;..