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

이번 장에서는 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 속성의 숫자 값이 ..