본문 바로가기

전체 글

 (109)
내가 가고 싶은 회사 갓 대학교를 졸업했을 때는 스스로의 역량을 키울 수 있는 회사를 우선으로 생각하였습니다. 지금도 그 생각에는 변함이 없지만, 어떤 분야로 갈 지 결정하게 되면서 좀 더 구체화된것 같습니다. 첫번째로는 고객에게 관심이 많은 회사였으면 좋겠습니다. 현재 저는 프론트엔드 개발자를 목표로 하고 있고, 사용자의 편의를 맞춘 UI 설계 등에 관심을 가지고 있습니다. 내가 만든 화면이 어떻게 작동을 하고, 그것이 사용자에게 긍정적인 방향으로 영향을 주는 화면을 만들고 싶습니다. 그러기 위해서는 회사의 고객이 어떤 사람인지, 무엇을 원하는지를 알아야 한다고 생각합니다. 두번째로는 창의성을 갖출 수 있는 회사였으면 좋겠습니다. 프론트엔드 개발에는 사용자 경험에 기반한 인터페이스 개발 능력이 중요하다고 생각하고 있기 때문..
CSS Grid - 컨테이너 설정 justify-content & align-content - 바깥쪽 컨테이너가 안쪽 컨테이너보다 커서 남는 여백이 존재해야 적용됩니다. - flex 레이아웃에서는 각자 주축/교차축 에 대한 정렬방법을 지정했습니다. - grid 레이아웃에서는 행 / 열에 대한 item들의 배치방법을 결정합니다. justify-content - columns의 배치 방법을 설정합니다. - start, end, center, space-between, space-around 등 flexbox에서 쓰는 값을 대부분 사용할 수 있습니다. align-items - rows의 배치 방법을 결정합니다. - start, end, center, space-between, space-around 등 flexbox에서 쓰는 값을 대부분 사용..
CSS Grid grid layout은 flexbox과 유사합니다. 하지만 flexbox는 여러개의 item들이 주축에만 존재합니다. 반면, grid는 2차원 구조로, 컨테이너 내에 격자형으로 item들을 집어넣을 수 있습니다. grid의 구성 - grid는 행을 뜻하는 row와 열을 뜻하는 column, 그리고 행과 열 사이의 공백을 의미하는 gutters 가 존재합니다. grid layout 사용하기 /* 1. 2행 3열 그리드 레이아웃 */ .container{ display: grid; grid-template-columns: 1fr 1fr 1fr; grid-template-rows: 1fr 1fr; } /* 2. grid-template-area로 세부 설정하기 */ .container-grid-area{ di..
CSS Animation - 다수의 스타일을 전환하는 애니메이션을 적용합니다. - 유저의 액션에 따라 A에서 B로만 행동하는 transition과는 다르게, keyframe을 사용하여 다양한 액션의 세트를 만들 수 있는 속성입니다. keyframes @keyframes slidein{ /* 처음상태 */ from{ margin-left: 100%; width: 300%; } /* 이후 상태 */ to{ margin-left: 0%; width: 100%; } } @keyframes identifier{ 0% { top: 0; left: 0; } 30% { top: 50px; } 68%, 72% { left: 50px; } 100% { top: 100px; left: 100%; } } - 애니메이션에서 작동하는 중간절차를 의미합니..
CSS transition - 애니메이션을 적용해주는 속성입니다. - fade in, fade out 등의 효과를 넣을 때 사용합니다. - css값이 A에서 B로 변환될때, 전환되는 시간차를 지정해줍니다. - transform 과 함께 사용하여 유저 액션에 따른 추가 효과를 만들어 낼 수 있습니다. transition-property - 애니메이션을 적용할 수 있는 모든 단축 하위속성이 지정됩니다. - 어떤 요소에 transition을 적용할 지 정합니다. transition-duration - 각 요소별로 적용되는 transition 시간을 지정합니다. - 애니메이션이 적용되는 시간을 조절할 수 있습니다. 예시 transition-property : all;/* 모든 값에 transition을 적용 */ transition-du..
CSS Flex - 단일 아이템 설정 order .container{ display: flex; flex-direction: row; } .item2{ order: 5; } .item3{ order: 3; /* item2보다 앞에 생성된다. */ } 1 2 3 4 - flex 혹은 grid 컨테이너 내부에서 요소의 우선순위를 지정해주는 속성입니다. - 기본값은 order: 0 이며, 정수형 값을 입력합니다. - 각자 다른 order 값을 가진 경우 더 작은 order 값을 가진 요소가 앞에 갑니다. flex-grow - 요소를 컨테이너 내에서 할당 가능한 공간의 정도를 조절 가능합니다. - 0이 기본값으로, 음수가 아닌 number 형 값을 입력하여 사용합니다. - 형제요소가 같은 flex-grow을 가지고 있으면, 차지할 수 있는 최대한의..
CSS Flex - 컨테이너 설정 flex-direction .container{ display: flex; flex-direction: row; } - 플렉스 컨테이너 내의 아이템을 배치할 때 사용할 주축 및 방향을 지정해주는 요소입니다. - 기본은 column으로, 가로축이 주축, 세로축이 교차축으로, 아이템들이 위에서 아래로 배치됩니다. - row : 세로축을 주축으로 변화시킵니다. : 가로축이 교차축이 되며, 아이템들이 왼쪽에서 오른쪽으로 배치됩니다. - column-reverse, row-reverse : 각자 column과 row와 동일하지만, 시작점과 끝점이 반대로 적용됩니다. flex-wrap - flex-item 요소들이 강제로 한줄로 표현될 지, 여러행으로 나누어 표현할 것인지 결정하는 속성입니다. - flexbox의 ..
CSS Flexbox https://developer.mozilla.org/ko/docs/Learn/CSS/CSS_layout/Flexbox Flexbox - Web 개발 학습하기 | MDN flexbox는 행과 열 형태로 항목 무리를 배치하는 일차원 레이아웃 메서드입니다. 항목은 부족한 공간에 맞추기 위해 축소되거나 여분의 공간을 채우기 위해 변형된다. 이 문서는 근간이 되는 내용 developer.mozilla.org Flexbox 란? 이전에는 수직정렬, 수평정렬을 하기 위해서 float나 inline을 사용해야 했습니다. 하지만 inline-block의 경우에는 margin이 존재하지 않더라도 여백이 생기게 됩니다. 물론 억지로 한줄에 넣는다면 생기지는 않지만, 코드 가독성부분이 심하게 떨어지게 됩니다. float 속..

티스토리툴바