반응형
전체 글125
[Javascript] 자바스크립트 토글 버튼 - 메뉴 버튼 구현
안녕하세요 오늘은 간단하게 자바스크립트로 토글버튼 구현 하는 방법 입니다 제가 사용할 방법은 메뉴 아이콘 이미지를 통하여 메뉴 버튼을 켜고 끄고 하는 방법을 알아보도록 하겠습니다 코드는 정말 간단하기 때문에, 긴 글이 아닌점 참고해주시면 감사하겠습니다 일단 아이콘을 미리 준비해주도록 합시다 버튼을 바꾸는 방법부터 소개해드리겠습니다 우선, 미리보기로 모습을 보자면 !! 이런 모습이 됩니다. 저는 항상 transition 으로 약간 자연스럽게 변화를 좋아하는 타입이라.. 이제 코드를 소개해드리도록 하겠습니다 HTML 코드 이렇게 그냥 div 하나와 함수 하나만 더 추가해주시면 됩니다 물론, 함수 이름은 여러분께서 정해주시면 됩니다. 꼭 따라하실 필요 없습니다 !! CSS 코드 .menu { backgroun..
[HTML] 버튼(button)과 버튼에 사용하는 CSS에 대해 알아보자
안녕하세요 가운데 정렬로 항상 글을 써내려 갔었는데 아무래도.. 좌측 정렬이 가장 깔끔한거 같습니다 오늘은 HTML의 버튼에 관해서 알아보겠습니다 으로 사용이 되고 있습니다 버튼이란?? 버튼을 사용함으로써 클릭이 가능하게 하고 간단한 표준 버튼 기능이 필요한 곳이라면 어디에나 배치할 수 있다는 장점이 있습니다 기본적인 버튼의 모양은 이쁘지 않지만 CSS를 통하여 디테일하게 모양을 바꿀 수 있습니다 기본 적으로 특성을 좀 알려드리겠습니다 위 와 같이 클래스 이름 뒤에 빨간색에 추가하여 사용 할 수 있습니다 번호 이름 설명 1 disabled 클릭을 막습니다 2 name 버튼의 이름, 제출 할 때 3 type 버튼의 행동 방식 4 value 버튼의 초기값 기본 적으로 버튼은 어떠한 행동을 취할때 하기 때문에..
[웹 개발]나만 알고싶은 웹 개발 시 유용한 사이트 엄선 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] - (공유) 나만 모르는 웹 폰트 사용법이 있다? - 혹시 구글폰트..
[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. 설명란 또는 글자를 랜덤으로..
[html/css] 동영상을 활용한 웹 메인 홈페이지 제작하기 - 1편
안녕하세요 오늘은 동영상 파일을 활용한 웹 메인 홈페이지 제작을 해보았습니다 CSS까지 자세하게 하여서 2편 ~ 3편정도로 나눌까 생각중입니다 들어가기에 앞서 사이즈는 width : 100% height : 100vh 이며 레이아웃 엄청 간단합니다 ㅎㅎ 미리보기 화면 동영상 웹 페이지 1. 배경에 동영상 넣는 방법 & 화면 꽉 채우는 방법 video HTML 코드 HTML 에 video Tag를 가져와서 src에 경로를 입력해 줍니다 video 태그 안에도 수많은 것들이 있지만 그 중에 사용된 3개를 먼저 설명 드리겠습니다 muted 소리가 있는 동영상은 소리가 안나오게 만들어 준다 autoplay 홈페이지가 로딩 되자마자 동영상 자동 재생 loop 동영상이 끝나면 처음으로 돌아가서 다시 재생 경로에 관..
나 혼자 웹 독학 - HTML/CSS를 활용한 나만의 간단 웹 메인 페이지 제작
안녕하세요 베트남에 장기해외실습으로 1년 조금 넘는 시간을 살았었는데요 북부에는 많이 여행다니고 했었는데 어떻게 하다보니 중부, 남부로는 한번도 여행을 가보지 못했어요 살다 보니 베트남어도 어느정도 할 줄 알게되고 많은 친구도 사귀게 되었었는데요 저도 다시 베트남에 가야하는데 언제쯤 다시 갈 수 있으려나 하하.. 코로나때문에 해외 어디 여행이라도 가고싶어도 가질 못하니.. 베트남 중부, 남부로 여행을 가고 싶어서 간단하게 하나 만들어 보았습니다 2020/08/01 - [웹코딩 공부&공유/css] - 나혼자 웹 독학 - css flex(플렉스)를 활용한 메뉴바 만들기 나혼자 웹 독학 - css flex(플렉스)를 활용한 메뉴바 만들기 안녕하세요 간단한 html, css를 이용한 menubar를 만들어 보려..
[html/css] 웹 개발시 폰트형 아이콘을 사용해보자 - FontAwesome 사용법 & 활용하기
안녕하세요 오늘은 폰트형 아이콘을 사용하는 방법을 알려드리겠습니다 저는 메뉴, 로고 등에 텍스트만 있으면 심심해서 이 사이트를 자주 애용하는 편입니다 자주 애용하는 정도가 아니고 항상 사용하는거 같아요 ㅎㅎ 모든 홈페이지에는 텍스트만 있는것 보다는 아이콘을 사용해서 간단하고 더 보기 좋게 만들면 훨씬 깔끔해보이니까요 물론... 저의 생각입니다 fontawesome.com/ Font Awesome The world’s most popular and easiest to use icon set just got an upgrade. More icons. More styles. More Options. fontawesome.com 소개해드릴 사이트는 이 사이트 입니다 Font Awesome 현재는 이런 모습을 하..
반응형