🔍 display 속성 중 grid에 대해 정리. grid 자식 요소들이 컨테이너 안 공간을 맞추기 위해 크기를 키우거나 줄이는 방법 부모요소를 grid-container 자식요소를 grid-item 웹페이지를 위한 2차원 레이아웃(x축, y축) 시스템 grid-container 속성 아래의 속성들은 grid-container(부모 요소)에서 사용되는 속성이다. grid-template-columns 열방향 그리드 트랙의 사이즈 설정 grid-template-rows 행방향 그리드 트랙의 사이즈 설정 💡새로운 단위 fr fraction: 분수 컨테이너를 분할 grid 컨테이너 안에서 트랙의 비율을 지정해주는 유연한 길이 단위 1fr 1fr 1fr은 1:1:1 의 비율을 의미함 grid-template-a..

🔍display 속성 중 flex에 대해 정리. flex flexible: 유연한, 신축성있는, 구부러지는 자식 요소들이 컨테이너 안 공간을 맞추기 위해서 크기를 키우거나 줄이는 방법을 설정하는 속성 부모 요소를 flex-container 자식 요소를 flex-item. 주로 1차원적 레이아웃(x축 / y축)을 위해 사용 flex-container 속성 아래 속성들은 flex-container(부모 요소)에서 사용하는 속성이다. flex-direction 컨테이너 내 아이템을 배치할 방향 지정 row: 기본값. 왼쪽에서 오른쪽(주축이 행 방향) column: 위에서 아래 방향(주축이 열 방향) row-reverse: 오른쪽에서 왼쪽 column-reverse: 아래에서 위 방향 justify-conten..

🔍CSS display 속성 중 float에 대해서 정리해보자 float float의 사전적 정의 : (물 위나 공중에서) 떠가다, (가라앉지 않고 물에) 뜨다 한 요소가 보통 흐름으로부터 빠져 텍스트 및 인라인 요소가 그 주위를 감싸 해당 요소에 좌측 또는 우축에 배치되게 함. left: 왼쪽으로 right: 오른쪽으로 none: 기본값 See the Pen Untitled by astinaus (@astinaus) on CodePen. clear: float를 해제할 수 있다. left, right, both See the Pen Untitled by astinaus (@astinaus) on CodePen. 주의사항 자식 요소들이 모두 float 속성을 가지게 되면 컨테이너 요소의 높이에 자식 요소..

display 박스의 유형을 결정하며, 다른 박스들과 어떤 방식으로 배치할지 레이아웃을 설정함. CSS 속성으로 시각적인 배치만 바뀌는 것이고, 태그 자체의 요소가 블록 레벨로 바뀌는 것이 아님. block: 요소 전후에 줄 바꿈을 생성 inline: 요소 전후에 줄 바꿈을 생성하지 않는 인라인 요소 상자를 생성. width, height, margin, padding 적용 X inline-block: inline 줄 바꿈 없이 한 줄에 놓이지만, block처럼 box-model의 width, height, margin, padding 값을 모두 설정할 수 있다. flex: 내부 자식 요소들의 위치를 부모 컨테이너 요소 안에서 x, y축 단방향(1차원적)으로 설정 grid: 내부 자식 요소들의 위치를 부..

🔍CSS Box Model에 대해 정리! CSS Box Model HTML 요소를 감싸는 상자 요소, 패딩, 테두리, 마진으로 구성됨 요소: 텍스트, 사진 등 보여줄 대상 패딩: 요소 주변 영역을 감싼다. 테두리: 요소와 패딩을 감싸는 테두리 마진: 테두리 밖의 영역을 감싼다. CSS Box Model은 블록 박스에 적용되며, 인라인 박스는 일부 동작만 사용한다. inline 요소는 width, height, 상하 margin 값 적용 X width 요소의 너비 기본값은 콘텐츠 영역의 너비지만 box-sizing 속성을 사용하여 테두리 영역의 너비를 설정 auto: 기본값. 브라우저가 계산하여 지정 min-content: 최소 너비 max-content: 컨텐츠 내용의 선호 너비 fit-content: ..

🔍CSS 선택자 중 가상 클래스와 가상 요소 선택자에 대해 정리! 가상 클래스 선택자 ( : ) pseudo selectors 선택한 요소가 특별한 상태여야 만족한다. :first-child 형제 요소 그룹 중 첫 번째 요소 :last-child 형제 요소 그룹 중 마지막 요소 :nth-child 형제 사이에서의 순서에 따라 요소 선택 가능 :nth-of-type 형제 그룹 안에서 위치를 기반으로 형제 요소 선택 :only-of-type 동일한 유형의 형제가 없는, 형제 요소 중 유일하게 사용된 태그 선택 :not 부정 선택자 :root html 전역 번수 선언할 때 사용 See the Pen Untitled by astinaus (@astinaus) on CodePen. 가상 요소 ( :: ) 선택자에..