CSS4 엘리스 SW 3기 1차 프로젝트 - 3~14일차 정신없이 코드만 치느라 미루고 미뤄뒀던 회고록,,,, sessionStorage는 저장소라고 하니 괜히 막막했는데 알고 보니 껌인 애였다. 뭐든 처음 보는 것에 긴장하는 습관을 버려야겠다. 막판에 메인 페이지에는 localStorage를 활용한 코너도 넣었다. daum 주소 검색 기능을 회원가입 폼에 붙여보았다. 외부 기술을 가져다 쓰는 거라 어떨지 겁이 났는데 내부에서 기능 구현을 하는 것보다 훨~씬 간편했다. 카카오페이 결제 기능도 넣어봤으면 하는 아쉬움이 남았다. 장바구니 함수를 짜는데 계속 거르지 못하는 부분이 있고, 에러가 발생하는 곳이 있어 js 파일을 여러 번 갈아엎었다. 이렇게 복잡하게 엮인 페이지를 구현하기 전에 조직도 혹은 구상도를 미리 짜 보고 구현하는 것이 좋겠다. 할인 코너에 카운.. 2022. 11. 14. [css] grid grid 레이아웃은 2차원의 레이아웃 시스템을 제공하는 것으로 주요 페이지 영역을 설계하거나 작은 UI 요소를 배치하는 데 사용한다. flex와 다르게 grid는 겹치는 콘텐츠를 제어할 수 있다. 중첩의 우선 순위는 z-index 프로퍼티로 제어한다. grid 레이아웃을 사용할 때는 그리드 속성을 사용하고 싶은 컨테이너에 display: grid를 선언하여 사용한다. 컨테이너의 아이템들이 그리드 아이템이 된다. 👉여기서부터 grid container 속성 1) grid-template-rows, grid-template-columns: 행과 열의 크기나 이름을 정의한다. 같은 크기의 공간으로 나눌 경우 repeat 함수를 사용할 수 있다. 2) grid-template-areas: 나누어진 격자를 기준으.. 2022. 9. 19. [css] flexbox flexbox는 뷰포트의 요소나 크기가 불명확하거나 동적으로 변할 때 효율적으로 요소를 배치, 정렬, 분산할 수 있는 방법을 제공하는 레이아웃 방식이다. flexbox를 1차원이라 칭하는 것은 레이아웃을 다룰 때 하나의 차원(행이나 열)만을 다루기 때문이다, 이는 행과 열을 함께 조절하는 grid와 대조되는 점이다. flex 속성을 사용할 때에는 내가 자유롭게 배치하고 싶은 항목들을 감싸고 있는 컨테이너를 flex로 지정한다. flex로 지정된 컨테이너의 일차 자식이 flex 항목이 된다. 👉여기서부터는 flexbox 속성 1) flex-direction: 주축(main-axis)를 결정한다. row: 열의 정방향 row-reverse: 열의 역방향 column: 행의 정방향 column-reverse:.. 2022. 9. 18. [css] transform, transition, animation 1. transform 요소에 회전, 크기 조절, 기울이기, 이동 효과 등을 부여하는 속성. transform 대부분의 함수는 XYZ를 붙여 한 축으로만 변환하는 기능으로 사용할 수 있다. 함수 값 기능 rotate(10deg) / rotate(0.5turn) 시계 방향으로 회전. 음수로 작성하면 시계 반대 방향. scale(2, 3) width 2배, height 3배 확대. 축소하고 싶을 땐 1보다 작은 값 써주기. skew(10deg, 20deg) x축 10도, y축 20도 회전. translate(100px, 200px) / (12px, 50%) 위치 변경. 2. transition transition은 요소의 두 가지 상태 사이의 변화를 설정해 주는 속성이다. 요소의 각 상태는 :hover나 :.. 2022. 9. 14. 이전 1 다음
