영벨롭 개발 일지

📌 CSS Animation animation 은 사용자가 어떠한 액션을 취하지 않더라도 스스로 동작하도록 효과를 구현하고자 할 때 사용하는 css 속성입니다. javascript 없이도 여러 상태를 거치며 웹사이트에 다양한 스타일 전환 애니메이션을 적용할 수 있습니다. @keyframes 규칙을 사용하여 애니메이션 세트를 만들고, 이를 animation 에 적용시킬 수 있습니다. animation 에는 다음 8가지 속성을 가집니다. animation-name animation-delay animation-direction animation-fill-mode animation-iteration-count animation-play-state animation-timing-fucntion animation..

[ 태그의 동작 ] 우리는 특정 웹사이트에서 로그인을 할 때에나 글을 작성할 때와 같이 데이터를 입력할 수 있는 폼을 수 없이 많이 볼 수 있습니다. 이때 이 폼을 구성하는 html 요소가 태그입니다. 태그를 사용하여 우리는 사용자로부터 데이터를 입력받아 데이터베이스 서버, 즉 웹 서버에 정보를 보내 사용자와 웹사이트간의 상호 작용을 할 수 있습니다. 의 동작법은 다음과 같습니다. 1. 폼이 있는 웹 페이지에서 사용자가 정보를 입력합니다. 2. 태그는 사용자가 입력한 모든 데이터를 웹 서버로 보냅니다. 3. 웹 서버는 이 데이터를 처리하기 위해 웹 프로그램으로 넘기고, 웹 프로그램이 이 데이터를 처리합니다. 4. 웹 프로그램은 처리 결과에 따라 새로운 html 페이지를 웹 서버에 보냅니다. 5. 웹 서버..

[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 전환 효과를 사용할 속성 ..

[플렉스 박스 레이아웃이란?] 플렉스 박스 레이아웃(flex box layout)이란 그리드 레이아웃을 기본으로 하여 플렉스 박스를 원하는 위치에 배치하는 것입니다. 1차원 레이아웃이라고도 하며, 여유 공간에 따라 너비나 높이, 위치를 자유롭게 변형할 수 있습니다. 따라서 화면 크기에 따라 레이아웃의 배치나 크기를 조절해야 할 때 편리하게 사용할 수 있습니다. 관련 용어 설명 플렉스 컨테이너 (flex container) 텍스트나 이미지, 표 등 웹 요소들을(플렉스 아이템들을) 플렉스하게 사용하기 위한 컨테이너 플렉스 아이템 (flex item) 플렉스 컨테이너에 담기는 웹 요소 주축 (main axis) 플렉스 아이템들이 배치 기준 축 (주축이 x축일 때 아이템들이 x축 방향으로 배치됨) 교차축 (cr..