본문 바로가기

분류 전체보기

 (137)
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..
CSS 박스모델 - margin margin - 박스 모델의 가장 바깥부분의 여백을 말합니다. margin: 10px; /* 네 면 모두 적용 */ margin: 10px 5px; /* 세로방향, 가로방향 */ margin: 10px 5px 20px; /* top, 가로방향, bottom */ margin: 2px 3rem 0 auto; /* 위 | 오른쪽 | 아래 | 왼쪽 (위 기준으로 시계방향)*/ - margin으로 한꺼번에 입력할 수 있으며, margin-top, margin-left, margin-right, margin-bottom 등 하나씩 입력할 수도 있습니다. - margin에서 입력하는 값의 개수에 따라 적용되는 범위가 다릅니다. - margin에 %값을 지정했을 경우 부모의 width에 영향받는다. margin co..
CSS 박스모델 박스모델 https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/The_box_model The box model - Learn web development | MDN That's most of what you need to understand about the box model. You may want to return to this lesson in the future if you ever find yourself confused about how big boxes are in your layout. developer.mozilla.org 1. content: 콘텐츠가 표시되는 영역 2. padding : 콘텐츠와 테두리(border)사..

티스토리툴바