일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | ||||||
2 | 3 | 4 | 5 | 6 | 7 | 8 |
9 | 10 | 11 | 12 | 13 | 14 | 15 |
16 | 17 | 18 | 19 | 20 | 21 | 22 |
23 | 24 | 25 | 26 | 27 | 28 |
- 잔
- HTML #CSS
- BOJ #컴퓨터공학 #C++ #알고리즘 #자료구조
- 컴퓨터공학 #Java #자바 #클래스 #객체 #인스턴스
- 컴퓨터공학 #자료구조 #스택 #c++ #알고리즘 #백준문제풀이
- 컴퓨터공학 #c #c언어 #문자열입력
- Today
- Total
목록Front-end (54)
영벨롭 개발 일지
[ 태그의 동작 ] 우리는 특정 웹사이트에서 로그인을 할 때에나 글을 작성할 때와 같이 데이터를 입력할 수 있는 폼을 수 없이 많이 볼 수 있습니다. 이때 이 폼을 구성하는 html 요소가 태그입니다. 태그를 사용하여 우리는 사용자로부터 데이터를 입력받아 데이터베이스 서버, 즉 웹 서버에 정보를 보내 사용자와 웹사이트간의 상호 작용을 할 수 있습니다. 의 동작법은 다음과 같습니다. 1. 폼이 있는 웹 페이지에서 사용자가 정보를 입력합니다. 2. 태그는 사용자가 입력한 모든 데이터를 웹 서버로 보냅니다. 3. 웹 서버는 이 데이터를 처리하기 위해 웹 프로그램으로 넘기고, 웹 프로그램이 이 데이터를 처리합니다. 4. 웹 프로그램은 처리 결과에 따라 새로운 html 페이지를 웹 서버에 보냅니다. 5. 웹 서버..
[ Bootstrap 이란? ] 부트스트랩(bootstrap)은 웹사이트를 쉽게 만들 수 있게 도와주는 HTML, CSS, JS 프레임워크입니다. 사용자들이 자주 사용하는 각종 버튼, 드롭다운 메뉴, 탭, 라벨, 상태 바 등 다양한 기능을 제공하여 쉽게 웹사이트를 제작, 유지, 보수할 수 있도록 도와줍니다. https://getbootstrap.com/ Bootstrap The most popular HTML, CSS, and JS library in the world. getbootstrap.com [ Bootstrap 활용하기 ] Bootstrap을 프로젝트에서 활용할 수 있는 방식은 두 가지가 있습니다. 1. Bootstrap 관련 코드를 직접 다운 받아 설치하기 (권장) bootstrap 공식 사..
[ React 란? ] React는 페이스북에서 만든 오픈 소스 라이브러리로, 유저 인터페이스를 만들기 위한 자바스크립트 라이브러리입니다. ★ What is UI/UX ? UI는 User Interface 사용자 인터페이스로 어떠한 서비스를 사용하게 되는 사용자가 해당 서비스를 편리하게 이용할 수 있도록 디자인 된 것입니다. 예시로 컴퓨터의 모니터, 마우스, 메뉴바, 버튼 등이 있습니다. UX는 User Experience 사용자 경험을 의미합니다. 유저가 특정 서비스를 직접 사용하며 느끼는 것을 말하며 UX 디자인은 곧 사용자가 편리하고 만족을 할 수 있게끔 UI를 디자인하는 것이라고 볼 수 있습니다. [ 필수 프로그램 설치 ] React 개발 환경을 세팅하기 위해 우선, Node.js, Git, VS..
[Google fonts 사용하기] 구글에 google fonts 라고 검색하시고 다음 링크로 들어갑니다. https://fonts.google.com/ Google Fonts Making the web more beautiful, fast, and open through great typography fonts.google.com 검색창에 원하는 글꼴을 검색하시고 원하는 스타일을 Select this style 을 눌러 선택합니다. 그럼 우측에서 코드를 복사할 수 있습니다. 복사한 코드를 html 파일의 태그 내부에 작성해주세요. 링크가 되었다면 body 선택자의 스타일에 font-family 속성을 사용하여 해당 글꼴을 지정합니다. body { font-family: 'Nanum Gothic', sa..
[변환 속성 transform] transform 속성은 요소의 변환 효과를 주는 속성입니다. transform: 변환함수1 변환함수2 변환함수3 ... ; transform: 원근법 이동 크기 회전 기울임; 변환함수에는 2D 변환함수와 3D 변환함수 등 여러 함수들이 있는데 하나씩 살펴보겠습니다. [2D 변환 함수] translate() : 요소 x축 또는 y축으로 이동 함수 설명 translate(x, y) x, y축으로 이동, 단위: px translateX(x) x축으로 이동 translateY(y) y축으로 이동 .box1 { background-color: red; } .box2 { background-color: green; } .box3 { background-color: blue; } ...
transition 속성 - 요소의 전환 transition 속성은 요소의 전환 효과를 지정하는 단축 속성입니다. 기본형 transition: 속성 지속시간 타이밍함수 대기시간; (지속시간은 필수 포함 속성!) 다음과 같이 코드를 작성했을 때, 요소에 마우스를 올리면 요소의 가로 너비는 200px, 배경색은 royalblue색으로 달라지는 것을 확인할 수 있는데요! 이때, 요소가 변하는 순간에 아무런 효과와 시간없이 순식간에 바뀌게 됩니다. transition 속성을 사용하면 요소에 전환 효과를 줄 수 있습니다. transition 속성은 단축속성이기 때문에 개별 속성이 존재합니다. 이제 이 개별 속성들을 차례대로 살펴봅시다. 개별 속성 설명 transition-property 전환 효과를 사용할 속성 ..