전체 글 84

dart 문법 1

Dart 시작하기 – 노마드 코더 Nomad CodersFlutter 앱 개발을 위한 Dart 배우기nomadcoders.co  void mainvoid main 안에 적어야 하고, 문장 끝에 세미콜론을 꼭 써야 한다. 변수변수는 업데이트 될 수 있다. 단, 값을 업데이트 할 때 변수의 타입이 같아야 한다.1. var함수나 메소드 내부에 지역 변수를 선언할 때 사용var name = '사과'; // dart 컴파일러는 name이 String(문자열) 타입이라는 것을 알고 있음name = 1; (x)name = bool; (x)name = true; (x)name = 'hello'; (o) 2. 변수의 타입 지정class에서 변수나 프로퍼티를 선언할 때 사용String name = '사과'; dynamic..

카테고리 없음 2025.01.11

프론트엔드와 백엔드

프론트엔드(Frontend)사용자가 직접 상호작용하는 웹 애플리케이션의 UI(User Interface)와 UX(User Experience)를 담당한다. 웹 브라우저에서 실행되며, 주로 HTML, CSS, JavaScript 같은 기술로 개발된다.# HTML (HyperText Markup Language)- 웹 페이지의 구조를 정의한다.- 제목, 단락, 이미지 링크 등 웹페이지 요소를 배치한다.# CSS (Cascading Style Sheets)- HTML 요소의 디자인(색상, 글꼴, 레이아웃 등)을 담당한다.# JavaScript- 웹 페이지에 동적 기능을 추가한다. (예: 버튼 클릭 시 동작, 애니메이션)- 사용자와의 실시간 상호작용을 가능하게 한다.# 프론트엔드 프레임워크/라이브러리- Reac..

카테고리 없음 2025.01.06

[css] preprocessor, fontello

preprocessor 프리프로세서는 문법과 컴파일러 두 가지로 이루어져 있다. 프리프로세서 = 지금 존재하는 문법보다 더 간단하고 쉬운 문법(문법) + 그 쉬운 문법을 해석하는 소프트웨어(컴파일러) sass, less, stylus가 있다. https://stylus-lang.com/ Stylus Expressive, robust, feature-rich CSS language built for nodejs stylus-lang.com 폰텔로 특정한 문자가 특정한 이미지로 사용되는 것. https://fontello.com/ Fontello - icon fonts generator This site will not work if cookies are completely disabled. {"assets..

[css] transition

전환. 여러 효과들의 전환을 부드럽게 한다. (7) transform은 적용할 요소가 block 이거나 inline-block일 때 동작한다. 따라서 display: inline-block으로 설정함. (8) transition-property: 전환을 어느 효과에 줄지 (11) a:active 요소 a를 클릭했을 때 발생할 효과 결과: * 8~9를 합쳐서 한 줄에 쓸 수 있다. 이렇게 쓰면 각 효과에 대해 시간을 다르게 설정할 수 있다는 장점이 있다. transition: font-size 1s, transform 0.1s transition-delay 설정한 시간 후 효과가 나타난다는 뜻 transition-timing-function 전환 속도를 균일하지 않게 설정 ease가 linear보다 자연스..

[css] transform

회전, 비틀기 등의 효과를 주는 것 원본: transform:scale 주의. transform 여러 개를 사용하면 뒤에 있는 효과가 앞에 있는 효과를 덮어씀. 다음 코드에서 scaleX는 나타나지 않음. scaleY가 덮어썼기 때문에. 그래서 transform 여러 개를 사용하려면 한 줄에 써줘야 함. 라인 12는 transform: scale(2, 3);로 바꿔도 똑같음. https://codepen.io/vineethtrv/pen/XKKEgM Css3 Transform CSS3 Transform models ... codepen.io transform-origin left top, 즉 왼쪽 위를 기준으로 scale을 적용함. https://codepen.io/search/pens?q=transfor..

[css] filter

이미지를 흑백으로/뿌옇게/... https://bennettfeely.com/image-effects/ Image Effects with CSS A collection of CSS snippets to create fast, complex image effects for websites bennettfeely.com 원본: grayscale, blur hover, transition hover: 마우스를 올렸을 때 실행되는 것 transition: 애니메이션 (라인6) transition:all 모든 효과가 2초에 걸쳐서 실행됨 https://codepen.io/search/pens?q=filter CodePen Search codepen.io

[css] background

background-repeat background-color와 background-image를 같이 사용할 수 있다. 이미지가 반복해서 보이는데, 이게 싫다면 background-repeat:no-repeat를 추가하면 된다. repeat-x: x축만 반복 / repeat-y: y축만 반복 background-attachment background-image가 움직이지 않게 함. background-size background-position left top이 디폴트 right top, right bottom, center bottom, center center등으로 사용할 수 있다. background 속성을 한번에 다 적을 수 있다.