dev41 [CSS] flex-cotainer, item flex flex는 flexible box, flex box 라고 부르기도 합니다. 레이아웃 배치 전용으로 나온 속성이라 간편하게 레이아웃을 정렬할 수 있는 1차원적 레이아웃 모델입니다. flex 를 사용하기 위해서는 display 속성을 통해 flex 값을 주면 되는데 이는 자식을 배치하는 방식을 설정하는 것이며 자식들은 유연하게 빈 공간을 치우거나 컨테이너를 넘거아지 않도록 줄어듭니다. 또한 자식 간의 수평 및 수직 정렬 과 빈 공간의 크기를 쉽게 조작할 수 있습니다. 얼마나 쉬운지 한번 살펴볼까요? 아래는 float를 통해 왼쪽 정렬한 코드입니다. 왼쪽 정렬을 위해 float:left로 띄우고 부모가 높이값을 갖고 그 외에 다른 요소들도 흘러가지 않도록 clear을 통해 flaot을 해제 시켜주는 .. 2023. 3. 11. [CSS] float 사용 후 clear를 사용하는 이유는 뭘까 float float는 한 요소가 흐름에서 빠져나와 단어 그대로의 의미대로 떠있는 특징을 가지고 있다. 원래 float속성은 사진과 텍스트를 같이 배치하기 위해 쓰여졌지만 현재에는 웹페이지의 레이아웃을 잡을때 많이 사용하고 있다. left 왼쪽 정렬 기준으로 띄우는 속성값 right 오른쪽 정렬 기준으로 띄우는 속성값 none initial value 띄우지 않는 다는 의미 이런 float는 사용 후에 꼭 해제를 해줘야합니다 이유는 2가지 입니다 float 요소가 좌측이나 우측에 띄어지면서 다른 요소들에게도 흐름에 영향을 미친다. float 속성 은 부모보다 더 높이 띄어져 있으므로 부모에게 높이의 영향을 주지 못한다. 그럼 이제 어떻게 해결해야할까?🤔 일단 float로 띄워서 left정렬을 하고 아직 .. 2023. 3. 11. [CSS] overflow 카드 UI를 하다보니 넘치는 텍스트를 말줄임으로 감싸거나 인기 상품의 경우 좌우로 넘어가는 스크롤을 만드는 등 곳곳에서 overflow의 역할이 있다는것을 알게 되었다. 이번 블로그 글에선 overflow의 속성값들과 관련 css 속성을 같이 살펴보려고 한다. 🤔 overflow overflow 속성이 효력을 갖기 위해선 반드시 블록 레벨 컨테이너 높이 (height 또는 max-height)를 설정하거나, white-space를 nowrap으로 설정해야 합니다. * white-space 는 아래 관련 속성으로 더 자세히 살펴보겠습니다. visible overflow에 속성을 별도로 명시해주지 않을때 적용되는 기본 속성값입니다. visible은 다른 속성값들과는 다르게 주어진 공간보다 컨텐츠가 더 큰 경.. 2023. 3. 9. [CSS]선택자 결합자, 가상(의사) 클래스, 가상(의사) 요소 이번 블로그 글은 선택자에 관한 내용을 정리해 보려한다. 지극히 내가 보기 위한 글이므로 기본선택자(클래스, 타입, 아이디, 전체) 를 제외한 그 외에 것들을 적어내려가보겠다 결합자 자손 선택자 ( ) 자손선택자는 내 밑의 모든 후손을 전역 선택할때 쓰는 선택자이다. 사용법은 조상과 자손 사이에 공백을 두면서 사용하면 된다. 자손 선택자는 바로 하위에 있는 자손을 선택하지 않아도 된다. 자식손자 자식손자 자식 선택자 ( > ) 자식선택자는 내 바로 밑의 자식을 선택할 때 쓰는 선택자이다. 자손선택자와는 다르게 바로 밑의 자식만 선택할 수 있으며 자식 이후 후손은 선택하지 않는다. 자식손자 자식손자 ✅ 자손과 자식 선택자의 가장 큰 차이점은 전역으로 선택할 수 있는지의 여부이다. 인접 형제 선택자 ( + .. 2023. 3. 5. 이전 1 ··· 3 4 5 6 7 8 9 ··· 11 다음
