[ CSS ] Advanced CSS - Transition, Transformation, Animation, MediaQuery

Transition요소의 상태 변화에 따른 스타일 변경에 애니메이션 효과를 부여한 것이다.Click me시작점에 transition 속성을 부여한다. 도착점에 변경하고자 하는 속성들을 값을 바꿔서 넣는다.button { padding: 20px; border-radius: 20px; background-color: tomato; color: beige; transition: background-color 1s ease-in, border-radius 0.5s ease-in-out;}button:hover { background-color: beige; color: tomato; border-radius: 5px;}여러 속성들을 다른 애니메이션 효과를 줄 수 있다..

• format_list_bulleted 프로그래밍 언어/HTML, CSS
• · 2024. 11. 2.

[ CSS ] 기초 CSS 정리

HTML에 CSS 적용하기inline을 하거나 CSS 파일을 링크 태그를 통해 참조한다. CSS SelectorSelector(선택자)를 통해 태그를 지정한다. 태그의 이름, 클래스 이름, id 이름 등을 selector로 사용할 수 있다. 태그이름은 이름 그대로 사용한다. 클래스 이름은 앞에 (.)을 붙여서 사용한다. 아이디 이름은 앞에 (#)을 붙여서 사용한다.h1 {}.myClass {}#myId {}선택자로 태그를 지정을 했으면 중괄호 내부에 속성(property)를 부여한다. 속성은 속성 이름과 속성값으로 구성된다. 필요한 속성은 검색을 통해서 확인한다.h1 { font-color : tomato;}예에서 속성은 font-color : tomato; 이다.CSS 코드의 우선순위동일한 태그에..

• format_list_bulleted 프로그래밍 언어/HTML, CSS
• · 2024. 11. 2.

[ Express ] Cannot read properties of undefined (reading 'length')

문제현상템플릿 엔진에게 데이터를 넘겨서 웹 페이지를 렌더링을 하려고 했다. 하지만 데이터를 확인할 수 없다는 메세지를 받았다.  해결과정템플릿 엔진 코드들을 먼저 확인했다. 별다른 이상은 없었다.컨트롤러 코드를 확인해봤다. 데이터를 변수 그대로 넘기고  있었다.const fruit = (fruitName, fruitAmount, fruitSize, fruitColor, fruitWeight) => { return { name: fruitName, amount: fruitAmount, mySize: fruitSize, color: fruitColor, weight: fruitWeight, };};const fruits = [ f..

• format_list_bulleted BackEnd/NodeJS
• · 2024. 11. 1.

[ NodeJS ] Pug - 템플릿 엔진

template engineA template engine enables you to use static template files in your application. At runtime, the template engine replaces variables in a template file with actual values, and transforms the template into an HTML file sent to the client. This approach makes it easier to design an HTML page.템플릿 엔진은 애플리케이션에서 정적 템플릿 파일을 사용할 수 있게 한다. 런타임환경에서 템플릿 엔진은 템플릿 파일의 변수에 값을 채우고 HTML 파일로 변환한 후에 클라..

• format_list_bulleted BackEnd/NodeJS
• · 2024. 10. 31.

[ 회고 ] 결국에는 연습이구나

최근까지 왜 개발 실력이 제자리인지가 고민이 되었다. 매일 10시간 이상 개발에 시간을 투자하는데도 불구하고 투입 시간 대비 성장속도가 더디었기 때문이다.  헬스센터 선생님이랑 친해져서 운동 중간중간에 대화를 했는데 연습에 대한 얘기가 나왔다. 회원들 중에 많은 지식으로 무장한 사람들이 있어도 정작 몸을 키우는 사람들은 매일 꾸준히 나와서 운동을 하는 사람들이라고 하셨다.  되돌아보면 내가 개발을 대했을 때 그랬던 것 같다. 운동을 처음 시작했을 때는 최대한 많이 공부해서 빠르게 성장해야겠다고 생각했는데 막상 내 건강을 챙긴 것은 지식보다도 매일 나온 그 순간들이었다. 운동도 그랬던 것처럼 개발도 그렇게 대하지 않았나 싶었다. 난 많은 것을 배워나갔지만 정작 적용할 수 있는 것들은 많지 않았다. 최대한 ..

• format_list_bulleted 기록/회고
• · 2024. 10. 31.

[ 회고 ] 프로그래밍이란 문제를 해결하는 도구

프로그래밍이란 결국에는 뭘까? pug를 다루면서 갑자기 궁금해졌다. pug는 템플릿 엔진인데 템플릿의 컴포넌트를 모듈화해서 다시 조합할 수 있는 게 특징이다. 모듈들을 조합해서 새로운 탬플릿을 만드는 과정이 함수를 만드는 것과 비슷한 느낌이 들었다. 함수의 기능들을 정의하면 컴퓨터가 알아서 함수들을 실행하는 것처럼 템플릿 엔진도 정의한 템플릿을 렌더링하기 때문이다. 게다가 함수를 정의할 때 다른 함수들도 활용할 수 있듯이 템플릿들도 마찬가지다. 챗지피티한테 프로그래밍이란 함수를 만드는 것이냐고 물어봤다.그것은 아니고 프로그래밍의 궁극적인 목적은 문제를 해결하는 도구를 만드는 것이었다. 그 과정 속에서 함수를 기본 단위 중에 하나로 사용하는 것이다. (문제 해결의 기본단위로 무엇을 쓸 건지는 프로그래밍 패..

• format_list_bulleted 기록/회고
• · 2024. 10. 31.