본문 바로가기

front-end50

[CSS100DAYS :: DAY4] 인터렉티브 CSS 다루기 - transfrom을 이용하여 동심원 애니메이션 만들기 DAY2도 했는데 얘가 더 쉬워서 먼저 올린다. CSS 100 챌린지를 하면서 느낀 건 transfrom을 잘만 사용하면 어려워보이는 인터렉티브 동작도 생각보다 쉽게 구현할 수 있고, 그 애니메이션이란 게 대부분 반복적이다 보니 처음에만 잘 방향을 잡아두면 어렵지 않게 만들 수 있다. 가장 먼저 html 코드를 작성해준다. 지난번과 크게 다르지 않다. 이제 CSS로 기본적인 모양을 만들어주자. 배경색과 쉐이드가 있는 각각 크기가 다른 원 세 개를 만들어 준다. 여기서 infinite는 애니메이션을 무한으로 반복시켜 주는 것이고 alternate는 애니메이션을 순방향으로 진행시킨 다음 역방향으로 다시 진행시켜 주는 것을 말한다. 이렇게 하면 동심원이 펼쳐졌다가 다시 사그라드는 동작을 영원히 반복하게 된다... 2022. 1. 21.
[CSS100DAYS :: 2일차] CSS로 인터렉티브 웹 구현 - 햄버거 버튼 만들기 (transform 응용하기) 이 포스트는 100 Days of CSS 사이트의 예제를 직접 구현한 내용을 정리해 포스팅한 것입니다. 제가 아주 오랫동안 블로그를 쉬었고... 그래서 저도 제가 이걸 어떻게 만들었는지 조금도 기억나지 않아서 되새기는 김에 함께 구현 방법에 대해서 알아보도록 하겠습니다. 완성본은 다음과 같습니다. (제가 만들었지만 꽤 잘 만든 편 아닌가요?) 먼저 html 코드를 보겠습니다. 여기서는 CSS 내용이 더 중요하기 때문에 대략적인 모양을 갖출 수 있도록 구성했습니다. 기본적으로 세 개의 바 모양은 같기 때문에 효율적으로 스타일을 주기 위해 bar 클래스를 통일했고, 클릭했을 때의 애니메이션 동작이 세 개가 전부 다르기 때문에 one two three 세 개의 별개의 클래스를 주어 조절하도록 하겠습니다. 가장.. 2022. 1. 19.
[react native] 리엑트 네이티브에 커스텀 폰트 넣는 방법 리엑트 네이티브를 배우기 시작하면서, 나도 FE 개발자라고 디자인은 내가 원래 하고싶었던 대로 바꾸면서 하고 있는데 아무래도 기본 폰트는... 진짜 쓰기 싫다. 적어도 구글 웹폰트정도는 사용할 수 있었으면 좋겠다는 생각에 알아본 내용을 정리한다. google 웹폰트 다운받기 리엑트 네이티브에서 사용하고자 하는 폰트를 다운로드 해야 합니다. 저는 앱의 header 에 적용할 볼드한 픈트를 사용하고 싶어서 Anton 폰트를 사용하기로 했습니다. Anton : https://fonts.google.com/specimen/Anton 뻘소린데, 저는 안톤 폰트를 진짜 좋아하는 것 같습니다. 딱히 이걸 선택하자는 마음이 없어도 꼭 강조 표시하는 문구는 전부 얘 쓰는 것 같아요. 우측의 select this styl.. 2022. 1. 18.
[React 기초] 그래서 JSX가 뭔데? (정의와 기초 문법) 이 포스트는 노마드 코더의 ReactJS로 영화 웹 서비스 만들기 를 수강하고 추가적으로 각 개념에 대해 학습하여 정리한 내용입니다. JSX란? javascript 에 XML을 추가한 추가 확장 문법이다. React에 엘리먼트를 추가할 수 있게 해주며, 그 형태가 html 과 유사하여 FE개발자들의 편의를 도모한다. JSX 는 자바스크립트의 공식 문법이 아니다. 브라우저가 실행될 때 때 babel 을 통해 일반 자바스크립트 문법(React.createElement)형식으로 변환되어 실행된다. (즉, 바벨 설치가 선행되어야 한다.) React 개발에 있어 JSX 의 사용은 필수가 아니다. 다만 자바스크립트 코드 내에서 UI를 개발하는 데 직관성을 높여주는 효과가 있어 많이 사용된다. 지난 시간에 사용했던 .. 2022. 1. 17.
[react 기초] 노마드 코더 강의 1 : 리엑트로 이벤트 만들기 이 포스트는 노마드 코더의 강의의 Events in React를 정리한 것입니다. 앨리먼트 생성하기 실제로는 잘 사용되지 않는 방법이지만 다음과 같이 새 앨리먼트를 생성할 수 있음. 보이는 것과 같이 id 또는 style 등의 프로퍼티 또는 텍스트를 넣어서 제작할 수 있다. const span = React.createElement("h3", {id:"first", style:{color:"red"}}, "hello world"); 뿐만 아니라 안에 이벤트를 넣어 생성하는 것도 가능하다. const button = React.createElement("button", { onClick: ()=>{ console.log("clicked") }, style:{ backgroundColor:"red" } },.. 2022. 1. 16.
[react native] 날씨앱 만들기 정리 처음으로 리엑트 네이티브를 공부하기 시작한 것은... 사실은 한 번쯤 스토어에 내 어플을 올려보고 싶다는 생각을 해서 처음엔 스위프트&flutter 강의를 결제 했었다. 그런데 과연 프론트엔드 개발자로서 갑자기 다른 언어를 배워서 써먹겠다고 이 중요한 시기에 js 말고 다른 언어를 배우는 것이 맞을까? 그게 과연 효율적일까? 라는 생각이 자꾸만 들었다. 게다가 왠지 업무 개발을 할 때에도 괜히 그 언어로 썼던 습관 때문에 자꾸 헛손질을 하게 되는 것 같은 느낌이 들어서 이왕 배우는 거 react-native를 통해 자바스크립트 문법을 이용한 개발을 배워보고자 했다. 리엑트에는 많은 장점이 있는데 그 중 하나는 IOS와 안드로이드 개발이 동시에 가능하다는 것이고 또 하나는 커뮤니티가 굉장히 크고 잘 되어 .. 2022. 1. 14.
[javascript 기초] 리스트에 새 요소 추가/삭제 (push, concat 등) 다음과 같은 리스트가 있다고 했을 때 const items = ["one", "two", "three"] 리스트에 새로운 아이템을 집어넣는 방법들 items[3] = "four"; //정해진 위치에 넣는 방법 items.push("four") //리스트의 마지막에 들어가게 된다. concat() : 리스트 더하기 만약 리스트에 리스트를 추가하고 싶다면 어떻게 하면 될까요? const ar1 = [1, 2, 3]; const ar2 = [4, 5, 6]; const ar3 = ar1.concat(ar2); 리스트에서 아이템을 삭제하는 법 splice() : 특정 위치의 요소를 삭제한다 const array = ["a", "b", "c"]; const index = 1; array.splice(index, .. 2021. 7. 21.
[CSS] position: absolute인 아이템 가운데 정렬하기 오늘은 CSS를 통해 아이템 가운데 정렬을 하는 방법에 대해 알아보려고 합니다. 만약 당신이 다음과 같은 방법을 통해 가운데 정렬을 하려다 애를 먹은 경험이 있다면, 이 포스팅이 도움이 될 수도 있습니다. .item { position: absolute top: 50%; left: 50%; } 만약 위와 같은 방법으로 아이템을 가운데 정렬 하려고 했을 경우 아이템이 딱 가운데 정렬이 되지 않고 뭔가 애매하게 오른쪽 대각선 아래로 밀려나 있는 것을 볼 수 있을 겁니다. 왜냐하면 50%씩 밀려나는 기준이 아이템의 왼쪽 위이기 때문입니다. 그러므로 해당 아이템의 높이 및 너비의 절반만큼을 더 이동한 것 처럼 보이게 됩니다. 그러면 해당 아이템을 진짜 가운데 정렬 하기 위한 방법을 알아보겠습니다. 제가 가장 많.. 2021. 7. 20.
[Canvas 공부 2일차] 이미지 업로드 이미지 불러오기 코드 void ctx.drawImage(image, dx, dy); void ctx.drawImage(image, dx, dy, dWidth, dHeight); void ctx.drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight); // sx, sy는 소스의 x,y 이미지 불러오기 예제 기본적으로 이미지를 불러오는 방법은 다음과 같다. const canvas = document.getElementById("board_canvas"); const context = canvas.getContext("2d"); const imageElem = new Image(); imageElem.src = "src/img/medb.jpg";.. 2020. 12. 7.

티스토리툴바