UIUX 디자이너, 프론트엔드 학습 일지

3월부터 html과 css, js 학습 일지에 대한 내용을 적어왔다.디자이너인 내가 프론트엔드 영역을 배우게 된 이유는 새롭게 들어간 스타트업에서의 제안 덕분이었다. 인력 리소스가 부족한 0 to 1 스타트업 특성상 한 개인에게 요구하는 능력은 고정되어 있지 않고 제너럴리스트가 되어서 최소 인력 리소스로 최대 아웃풋을 창출해 내는 것이 기업의 관점에서 긍정적이며 개인의 관점(신입)으로 보더라도 다양한 영역에 대한 지식을 함양하는 것은 다다익선이기 때문에 개인의 시간을 활용해 퍼블리싱 영역을 학습해 왔다. 거두절미하고 3개월 동안 학습한 내용을 토대로 이번에 실제 프로덕트 개선 작업에 투입되어 디자인 설계 후 모바일/PC 퍼블리싱을 하면서 디자이너가 퍼블리싱을 하면 이런 점이 좋구나! 느꼈던 점에 대해 적..

이번 장에서는 JS에 대한 간단한 학습 내용을 적어보려 한다. 데이터 종류 String(문자 데이터) 따옴표를 사용해야 한다. ex) 'taeSeok' / "taeSeok" / `taeSeok` Number(숫자 데이터) 정수 및 부동 소수점 숫자를 나타낸다. 숫자 데이터는 따옴표를 사용하지 않는다. Boolean(불린 데이터) ture, false 두 가지 값밖에 없는 논리 데이터 Undefined 값이 할당되지 않은 상태를 의미한다. Null 어떠한 값이 의도적으로 비어있음을 의미한다. Object(객체 데이터) 여러 데이터를 key:value 형태로 저장한다. { } Array(배열 데이터) 여러 데이터를 순차적으로 저장한다. [ ] 변수 데이터를 저장하고 참조(사용)하는 데이터의 이름 변수를 통해..

이번 장에서는 css의 트렌지션에 대해 학습한 내용을 적어보려 한다. 전환 transition 요소의 전환(시작과 끝) 효과를 지정하는 단축 속성 지속 시간이 필수로 포함되어야 한다. transition-property 전환 효과를 사용할 속성 이름을 지정 all : 모든 속성에 적용 속성 이름 : 전환 효과를 사용할 속성 이름 명시 가로 너비만 적용하고 싶으면 width만 넣으면 가로 값에만 트렌지션 적용 transition-duration 전환 효과의 지속 시간을 지정 0s : 전환 효과 없음 시간 : 지속시간(s)을 지정 transition-timing-function 전환 효과의 타이밍(easing) 함수를 지정 - https://easings.net/ - https://developer.mozi..

이번 장에서는 css의 flex에 대해 학습한 내용을 적어보려 한다. flex container display flex 값을 사용하기 위해서는 flex container가 선행되어야 하고 이 flex container를 만드는 값이 disaplay: flex; flex container의 화면 출력 특성 flex : 블록 요소와 같이 flex container 정의 inline-flex : 인라인 요소와 같이 flex container 정의 flex-direction 주 축을 설정 row : 행 축(좌-우) row-reverse : 행 축(우-좌) column : 열 축(위-아래) column-reverse : 열 출(아래-위) 블록 요소를 만들면 위부터 아래까지 쌓여서 이 컬럼을 직접 입려 하는 경우는..