전체 글 (270) 썸네일형 리스트형 Vanilla JS - Chrome App(HTML/CSS + JS) 1. 개요 - 크롬 앱을 HTML+CSS와 JS를 이용하여 제작함으로서 JS의 기본 사용법과 HTML+CSS 활용 및 복습, 크롬 앱의 기본 구조 및 제작 과정을 공부하는 것을 목적으로 하는 프로젝트입니다. 2. 사용된 언어 - HTML+CSS, Javascript 3. Github - https://github.com/Jeon-B-H/Vainilla.github.io.git GitHub - Jeon-B-H/Vainilla.github.io Contribute to Jeon-B-H/Vainilla.github.io development by creating an account on GitHub. github.com 4. 메인 화면 Kokoa cloning (HTML/CSS) 1. 개요 - 카카오톡의 UI을 HTML과 CSS를 이용하여 제작함으로서 HTML+CSS의 기본 사용법과 웹의 기본 구조 및 제작 과정을 공부하는 것을 목적으로 하는 프로젝트입니다. 2. 사용된 언어 - HTML과 CSS 3. Github https://github.com/Jeon-B-H/kakao_cloning---Nomad-Coders.git GitHub - Jeon-B-H/kakao_cloning---Nomad-Coders: This repository has kakao cloning code of Nomad coders. This repository has kakao cloning code of Nomad coders. - GitHub - Jeon-B-H/kakao_cloning---Nomad-C.. HTML/CSS - 꿀팁 ( Tips ) 1. 가 active or focus 할 때, input의 테두리를 없애는 방법 - input{ outline:None; } 이용 2. Navigation basic structure - --> --> *(navi 버튼 갯수) --> --> 3. 빠르게 div을 만드는 방법 - ( tag 이름) . (class 이름) * (필요한 div의 갯수) - ' > ' 기호를 통해 div 내에 또 다른 div 생성 가능 - tag 이름 없을 경우 div로 생성 4. 특정 container를 다른 lay-out으로 옮기는 방법 - 'z-index' 속성을 이용 - z-index는 z 방향으로 해당 container가 몇 번째 layer에 있는지를 표현 - z-index : 0 가 default 이며, z-index.. HTML/CSS - animation 1. Animation CSS 애니메이션은 아이콘을 비롯한 다양한 태그에 애니메이션 효과를 줄 수 있는 기능입니다. 이를 통해 크기를 조절하는 scale에서 부터 회전 효과를 주는 rotate 까지 다양한 효과를 줄 수 있습니다. 2. Animation 사용법 먼저 애니메이션이 언제 어떻게 움직일지에 대해서 정의할 필요가 있습니다. 예를 들어, '처음에는 아이콘이 가만히 있다가 점차 Y 방향으로 30px 이동한 뒤, 다시 원래 자리로 돌아온다.' 애니메이션의 움직임을 정의할 때 사용하는 것이 '@keyframe (name of animation) { }' 입니다. @keyframe의 괄호 안에 애니메이션이 언제 어떻게 움직일지를 작성함으로서 '(name of animation)은 언제 어떻게 움직이는 애.. HTML/CSS - action, method form에는 두 개의 중요한 property가 있다. 1. action: form 데이터를 전송할 페이지 정보를 보유 2. method: 데이터를 전송할 방법 2-1. 1) POST: 서버(백엔드)로 데이터를 전송할때 사용하는 방식. -> 보안성이나 신뢰성을 요구하는 환경에서 사용 2) GET:전송할 데이터를 url에 포함시켜 전달하는 방식. -> 동작 과정이 빠르지만 보안에 취약하며 전송 가능한 데이터의 길이도 제한적 -> input 태그에 입력된 데이터들이 전송할 데이터를 url에 표시 3) 사용 방법 - HTML/CSS - 아이콘 무료 사이트 추천 ( Font awesome ) 앱 및 웹 제작에서 많이 사용되는 요인 중 하나인 아이콘을 무료로 이용할 수 있는 사이트를 추천 드리고자 합니다. 바로 Font awesome (https://fontawesome.com/search?s=solid%2Cbrands) 입니다. 무료 버전과 유로 버전으로 나뉘지만, 무료 버전에서도 다양한 아이콘을 이용할 수 있습니다. 사용 방법) 1. 내에 마지막 부분에 아래 2. Fontawesome 홈페이지에서 아이콘 검색 (5.15.4 버전으로 검색) 3) HTML으로 설정한 뒤, tag로 구성된 code 복사하여 붙어넣기 이전 1 ··· 31 32 33 34 다음
