본문 바로가기

웹 프론트 엔드

 (42)
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 속..
CSS transform transform이란 - https://developer.mozilla.org/ko/docs/Web/CSS/transform transform - CSS: Cascading Style Sheets | MDN CSS transform 속성으로 요소에 회전, 크기 조절, 기울이기, 이동 효과를 부여할 수 있습니다. transform은 CSS 시각적 서식 모델 (en-US)의 좌표 공간을 변경합니다. developer.mozilla.org - 요소에 회전, 크기조절, 기울이기, 이동효과를 부여할 수 있습니다. - 시각적 서식 모델의 좌표 공간을 변경합니다. - transform을 사용해 요소를 변경하더라도, 원본 요소가 바뀌는것은 아닙니다. 사용 transform: matrix(1,2,3,4,5,6); tra..
CSS 박스모델 - padding, border padding padding: 10px; /* 네 면 모두 적용 */ padding: 10px 5px; /* 세로방향, 가로방향 */ padding: 10px 5px 20px; /* top, 가로방향, bottom */ padding: 2px 3rem 0 auto; /* 위 | 오른쪽 | 아래 | 왼쪽 (위 기준으로 시계방향)*/ - 요소의 네 방향 안쪽 여백 영역을 설정합니다. - 사용방법은 margin과 거의 동일하게 사용합니다. - margin과는 다르게 collapsing이 발생하지 않습니다. border - 요소의 margin과 padding사이 영역, 요소의 테두리입니다. border-style > border의 스타일을 지정해줍니다. > 여러 키워드가 존재하며, 가장 많이 쓰이는것은 soli..

티스토리툴바