목록CSS3 (15)

minyoung

Position 심화 ver 기록🙌 - flexbox/grid 적용 여부

먼저, position 속성의 기본 개념은 아래와 같다. position 속성 : 요소의 위치를 제어하며, 문서 흐름과 부모 요소의 영향을 결정  position 속성은 HTML 요소의 위치 지정 방법을 설정하는 CSS 속성이다.이 속성을 사용해서 요소를 문서의 특정 위치에 배치하고 위치 관련 속성을 조절한다.  position: static; . position: static;- 기본 값으로, static으로 설정된 요소를 일반적인 문서의 흐름에 따라 배치 -> 즉, 위치가 지정되지 않고 요소는 화면의 상단에 차례대로 배정됨 - 위치 지정이 없음 - top, left, bottom, right 속성은 효과가 없음- 다른 위치 지정 속성을 사용하지 않을 때 적용되는 값  position: relative..
CSS3 2025. 1. 17. 16:24
margin-left: auto;와 margin-left: auto;

https://m.boostcourse.org/cs120/lecture/92916 출처 비전공자를 위한 HTML/CSS 부스트코스(boostcourse)는 모두 함께 배우고 성장하는 비영리 SW 온라인 플랫폼입니다. m.boostcourse.org /* margin-left: auto;는 왼쪽 마진을 최대한 늘란다 margin-right: auto;는 오른쪽 마진을 최대한 늘린다 기준은 가장 가까운 부모이다. */
CSS3 2023. 12. 7. 02:16
inline에도 margin과 padding이 적용될까?

inlineinline 태그는 높이와 너비가 없기 때문에 margin 상, 하를 가질 수 없다.margin 좌, 우 적용되고 padding은 상, 하, 좌, 우 모두 적용된다. 실무에서 inline에 margin 상하를 적용하고 싶다면 어떻게 해야 할까?inline을 block으로 만들어주면 된다.display: block;block 태그는 높이와 너비가 있고, margin과 padding을 상, 하, 좌, 우로 가질 수 있다. inline과 block에 대해 다시 한 번 정리하기 위해 기록한다.semantic tags : header, nav, main, article, section, aside, footer => 이러한 시맨틱 태그들 블록 레벨 요소로, 수직으로 공간을 차지한다. 이 태그들은 모두 ..
CSS3 2023. 12. 5. 00:25
flexbox froggy 정답 해설 기록✔️(21~24) - 마지막 😀 총 24단계

21단계align-content: flex-start;align-content는 수직 간격을 정렬한다.align-content 속성은 여러 줄로 나뉜 Flex 컨테이너의 교차 축 정렬을 설정하는 데 사용된다.이 속성은 flex-wrap 속성이 wrap 또는 wrap-reverse로 설정되어 있을 때에만 의미가 있다.기본적으로 align-items 속성은 단일 줄 내에서의 교차 축 정렬을 설정하지만, 여러 줄이 있는 경우 align-content 속성을 사용하여 여러 줄 간의 교차 축 정렬을 설정할 수 있다.align-content 속성의 값으로는 다음이 올 수 있는 것들은 아래 체크 표시에 정리해두었다.align-content는 여러 줄들 사이의 간격을 지정하며, 한 줄만 있는 경우에는 align-con..
CSS3 2023. 12. 1. 23:12
flexbox froggy 정답 해설 기록✔️(16~20) - 5단계씩 정리 😀 총 24단계

16단계align-self: flex-end;align-self는 flex-items 속성으로 이전 포스팅에서 다뤘던 order 속성에 이은 두 번째 flex-items 속성이다.즉, 개별 요소에 적용할 수 있는 속성이다.align-self는 align-items 값을 재정의한다. grid에서는 grid area 항목을 정렬하고, flexbox에서는 cross axis 항목을 정렬한다.align-self 속성은 flex 컨테이너의 아이템에 적용되며, 해당 아이템의 교차 축(cross axis)에서의 정렬을 지정하는데 사용된다. 이 속성을 통해 개별적으로 특정 Flex 아이템의 정렬을 제어할 수 있다.일반적으로 align-items 속성은 flex 컨테이너 내 모든 아이템의 교차 축 정렬을 지정하는 데 사..
CSS3 2023. 12. 1. 21:01
flexbox froggy 정답 해설 기록✔️(11~15) - 5단계씩 정리 😀 총 24단계

11단계flex-direction: column;justify-content: flex-end;flex-direction: column;을 통해 주축을 수직으로 바꾸고justify-content: flex-end;를 통해 수직 기준으로 바닥으로 이동시켜준다.12단계flex-direction: column-reverse;justify-content: space-between; flex-direction: column-reverse;를 적용시켜서 주축을 수직으로 만들어주고, 아래에서부터 역순으로 배치한다.justify-content: space-between;을 적용시켜서 수직 기준 space-between으로 아이템 간의 사이 간격을 동일하게 만들어준다. 13단계flex-direction: row-reve..
CSS3 2023. 12. 1. 18:53
이전 Prev 1 2 3 Next 다음