전체 글123
[웹 개발]나만 알고싶은 웹 개발 시 유용한 사이트 엄선 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 현재는 이런 모습을 하..
[#01 아이패드] 굿노트 일기장 PDF 공유(블랙&화이트 버전) 및 한 가지 꿀팁 공유
안녕하세요 굿노트 일기장 PDF 공유해보려고 합니다 저도 아이패드 프로 3세대 11인치와 함께한 지 3년째를 달려가고 있습니다 대학생활을 하고있다 보니 처음에는 굿노트를 사용하다가 음성 녹음 기능이있는 노타빌리티를 사용했었고요 일기, 다이어리를 위해 다시 굿노트로 넘어오게 되었습니다 장점 단점 굿노트 웬지모르게 익숙한 UI 글씨가 더 잘 써지는 기분?? 필기하는데 강력한 기능들이 많다 노타빌리티 음성 녹음 기능이 있다 지우개 기능이 좀더 세밀하다 이미지 파일들을 추가하는데 불편하다 좀 간단하게 장단점을 나누어 보았습니다 굿노트 9,900원 노타빌리티 15,000원 선택은 자유!! 하지만 저는 두 개 전부 구매했습니다 ㅎㅎ 저도 항상 다른 분들이 공유해주시는 PDF를 사용했었는데요 "내가 딱 필요한 기능만..
[html/css] @keyframes 를 활용한 텍스트 효과 - 첫번째
안녕하세요 @keyframes를 활용한 텍스트 효과를 소개해 드리려고 합니다 간단하고 쉬워서 여러분 모두 따라 하실 수 있습니다 예쁜 텍스트 효과 이 정도이고요 잘 사용할 일은 없지만 그래도 간단하고 이뻐서 알아두시면 좋은 것 같습니다 우선 @keyframes에 대해 알아보겠습니다 쉽게 생각해서 애니메이션 효과를 주고 싶은 곳에 @keyframes를 주시면 돼요 예를 들어) @keyframes test { /* from = 0% */ from { ... } 50% { ... } /* to = 100% */ to { ... } } 이런 식으로 해서 from >> 50% >> to까지 어떤 효과를 줄 건지에 대한 걸 {} 중괄호 안에 넣으시면 됩니다 간단한 효과를 먼저 한번 보자면 하늘 하늘 p { anim..