일상을 디자인하는 개발자

변환함수 설명 translate3d(translateX, translateY, translateZ) 특정 크기만큼 이동함 translateX(translateX) X축으로 특정 크기만큼 이동함 translateY(translateY) Y축으로 특정 크기만큼 이동함 translateZ(translateZ) Z축으로 특정 크기만큼 이동함 scale3d(scaleX,scaleY,scaleZ) 특정크기 만큼 확대 및 축소함 scaleX(scaleX) X축으로 특정 크기만큼 확대 및 축소함 scaleY(scaleY) Y축으로 특정 크기만큼 확대 및 축소함 scaleZ(sclaeZ) Z축으로 특정 크기만큼 확대 및 축소함 rotate3d(angleX, angleY, angleZ) 특정 각도만큼 회전 rotateX(..

▶ 보통은 컴퓨터 프로그램 화면 좌표를 가로는 x축 세로는 y축이며 왼쪽 위에 위치하는 점이 영점으로 볼 수 있다. 여기에 z축을 추가 하면 3차원 화면 좌표로 확장이 되는 것 입니다. 간단한 예시를 보겠습니다. See the Pen by yeojinho (@yeojinho) on CodePen. ▶ 2차원 변환 함수 변환 함수 설명 translate(translateX, translateY) 특정 크기 만큼 이동함 translateX(transrateX) X축으로 특정 크기 만큼 이동 translateY(transrateY) Y축으로 특정 크기 만큼 이동 scale(scaleX,scaleY) 특정 크기만큼 확대 및 축소 scaleX(scaleX) X축으로 특정 크기 만큼 확대 및 축소 scaleY(sc..

ex) animation 속성 설명 animation 모든 animation을 한 번에 적용 animation-delay 이벤트 발생 후 몇 초 후에 재생할지 지정 animation-direction 애니메이션 진행 방향 설정 animation-duration 애니메이션 몇 초 쓸지 지정 animation-timing-function 수치 변형 함수를 지정 animation-play-state 애니메이션 재생 상태를 지정 animation-iteration-count 애니메이션 반복 횟수를 지정 animation - name 애니메이션 이름을 지정 예시) See the Pen by yeojinho (@yeojinho) on CodePen. ▶ animation-direction 속성 ▶ animation..

▶ 애니메이션 속성에는 애니메이션 속성과 변형 속성으로 나뉜다. 가장 기본적인 예시를 보면 See the Pen by yeojinho (@yeojinho) on CodePen. 출력된 결과물 오렌지 사각형에 마우스를 올려두면 애니메이션이 구현이 됨을 알 수 있다. 속성 설명 transition 모든 transition 속성을 한 번에 사용함 transition-delay 이벤트 발생 후 몇 초후에 재생할지 지정 transition-duration 몇 초 동안 재생할지 지정 transition-property 어떤 속성을 변형할지 지정 transition-timing-function 수치 변형 함수 지정. 또다른 예시를 들어 보겠습니다. See the Pen by yeojinho (@yeojinho) on..

text-shadow 속성은 글자에 그림자를 부여하는 스타일 속성임. ▶ text-shadow 구성은 text-shadow : 5px 5px 5px black (오른쪽)(아래)(흐림도)(색상) ▶ box-shadow 구성은 box-shadow : 5px 5px 5px black (오)(아래)(흐림도)(색상) ex) text-shadow & box-shadow See the Pen by yeojinho (@yeojinho) on CodePen.

▶ overflow는 내부의 요소가 부모의 범위를 벗어 날 때 처리하는지 여부에 대한 속성임. 키워드 설명 hidden 영역을 벗어나는 부분을 보이지 않게 만듬 scroll 영역을 벗어나는 부분을 스크롤로 만듬. ▶ flot은 부유하는 대상을 만들 때 사용하는 스타일 속성임. 키워드 설명 left 태그를 왼쪽에 붙임 right 태그를 오른쪽에 붙임 1 .float 속성을 사용한 레이아웃 구성 ▶ float속성을 사용하는데 있어서 꼭 알아될 공식이 있는데 그 공식은 "자손에 float 속성을 적용하면 부모의 overflow 속성에 hidden 키워드를 적용함" See the Pen by yeojinho (@yeojinho) on CodePen. 현재 사용 된 방법을 'One True Layout' 방식이라..

▷ 프로그램 개발시 요소 위치는 2가지 방법으로 함 1. 절대 위치 좌표 : 요소의 X 좌표와 Y좌표를 설정하여 절대 위치를 지정 2. 상대 위치 좌표 : 요소를 입력한 순서를 통해 상대적으로 위치를 지정 1. position 속성 HTML 태그의 위치 설정 방법을 변경 할 때는 position속성을 사용함. position 속성에 사용 가능한 키워드 키워드 설명 static 태그가 위에서 아래로 순서대로 배치 relative 초기 위치 상태에서 상하좌우로 위치 이동 absolute 절대 위치 좌표 설정 fixed 화면을 기준으로 절대 위치 좌표를 설정 ex) See the Pen by yeojinho (@yeojinho) on CodePen. 2. 위치 속성과 관련된 공식 1. position속성에 a..

폰트는 글자와 관련된 스타일 속성을 말함. 1. font-size ▶ font-size 속성은 글자의 크기를 지정하는 스타일 속성으로 대표적인 단위로 "px, rem , em" 등을 사용합니다. See the Pen by yeojinho (@yeojinho) on CodePen. 2. font-family 속성 ▶ font-family 속성은 폰트를 지정하는 스타일 속성 3. font-style 속성과 font-weight 속성 ▶ font-style 속성, font-weight 속성은 폰트의 기울기 or 두께를 조정하는 속성임. 4. line-height 속성 ▶ line-height는 글자의 높이를 지정하는 속성 See the Pen by yeojinho (@yeojinho) on CodePen. 5..

1. border-width 속성 , border-style 속성 border-width 속성의 경우 테두리의 너비를 지정하는 스타일 속성이다. border-style 속성은 테두리의 형태를 지정하는 속성이다. 테두리를 넣을 때 둘다 사용하는 것이 좋다. See the Pen by yeojinho (@yeojinho) on CodePen. 위의 예시는 .box에 대한 테두리 속성을 직접 다 입력했지만 이를 한번에 작성 가능합니다. 또한 border 속성은 margin 속성, 그리고 padding 속성처럼 left, top , right, bottom 각각 의 값을 적용할 수 있다. 2. border-radius 속성. border-radius 속성을 통해 테두리의 모양을 변경할 수 있습니다. See th..

박스 속성은 web page layout을 구성하는데 있어서 매우 중요한 요소 입니다. 1. width 속성과 height 속성 width속성 height 속성은 글자를 감싸는 영역의 크기를 지정하는 속성이다. ex) See the Pen by yeojinho (@yeojinho) on CodePen. 2. margin 속성과 padding 속성 ★ 개인적으로 아직도 슬때마다 헷갈리는 속성이기도 한부분이다 margin 속성은 마진의 너비를 지정하는 속성, padding은 패딩의 너비 속성. 이라고 보시면 될 것 같습니다. ex) See the Pen by yeojinho (@yeojinho) on CodePen. 또한 margin의 중요한 속성으로는 "각각의 너비를 별도로 지정 할 수 있다는 것 입니다...