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 : 열 출(아래-위) 블록 요소를 만들면 위부터 아래까지 쌓여서 이 컬럼을 직접 입려 하는 경우는..

이번 장에서는 css의 배치 특성에 대해 학습한 내용을 적어보려 한다. position 요소의 위치 지정 기준 요소를 배치할 때 어떤 기준을 먼저 잡고 위치 값을 설정해야 함 음수 사용이 가능하다. static : 기준 없음 relative : 요소 자신을 기준으로 한다. 이것을 활용한 배치는 거의 사용되지 않는다. absolute : 위치 상 부모 요소를 기준으로 한다. fixed : 뷰포트(브라우저)를 기준으로 한다. sticky : 스크롤 영역을 기준으로 한다. 요소 쌓임 순서(stack order) 어떤 요소가 사용자와 더 가깝게 있는지(위에 쌓이는지) 결정 요소에 position 속성의 값이 있는 경우 위에 쌓임(기본값 static 제외) 위 조건이 같은 경우, z-index 속성의 숫자 값이 ..

저번 글과 이어 css 속성에 대해 학습한 부분을 기입해 보려 한다. 크기 계산(box-sizing) 요소의 크기 계산 기준을 지정해 준다. content-box : 요소의 내용으로 크기를 계산한다. border-box : 요소의 내용+패딩+보더로 크기를 계산 넘침 제어(overflow) 요소의 크기 이상으로 내용이 넘쳤을 때, 보임을 어떻게 제어할지 정하는 단축 속성 visible : 넘친 내용을 그대로 보여줌 hidden : 넘친 내용을 잘라냄 scroll : 넘친 내용을 잘라내고 스크롤바 생성 auto : 넘친 내용이 있는 경우에만 잘라내고 스크롤바 생성 scroll의 경우는 넘치는 것이 없어도 스크롤바를 노출시키기 때문에 오토를 많이 사용한다. overflow-x : x축으로만 넘치는 것을 대응(..