CSS

🗒 비슷한듯 비슷하지 않은 두 속성을 살펴보자동일한 조건으로 속성값을 설정한 뒤 비교해본 결과따라서 조건이 까다로운 inline 속성보다는 inline-block 속성을 쓰는 것이 더 낫겠다

: text가 한 줄일 때만! 부모 height와 같은 값으로 설정하면 text가 가운데로 정렬된다line-height란?: 줄 높이(간격)을 정하는 속성추가로 text가 한 줄일 경우, 부모 heigth 값고 같은 값을 설정하면 text를 가운데로 정렬할 수 있다!

📌 마음대로 정렬하고플 땐 'position: absoulte' > #### 자식에 absolute(절대값) 적용하고, 부모에 relative(상대값)을 적용하자

📌 overflow ? : overflow 속성은 자식이 부모보다 넘쳤을 때 어떻게 보여줄건지 결정하는 것 이는 부모가 결정하는 것이므로, 부모에게 적용해야 함! 📌 overflow 속성 3가지 overflow: scroll; 👉 스크롤바를 생성하여 자식이 보이

: 요소의 배치를 제어할 때 사용하는 속성 종류 (5가지) left : 태그를 왼쪽에 붙임right : 태그를 오른쪽에 붙임none : 레이아웃을 정렬하지 않음initial : 기본값으로 초기화 상태inherit : 상위 태그의 정렬 속성을 상속받아서 정렬시킴: 모든

📝 총 정리라고는 했지만 많이 쓰이는 선택자만 쏙쏙 골라 정리해 보았습니다! 📌 후손선택자 | 자손선택자 후손선택자: 선택자 태그 바로 아래에 위치한 모든 태그 자손선택자: 선택자 태그 바로 한 단계 아래에 위치한 태그(1개) 📌 형태구조 선택자

🗒 본 게시글은 flexible box 사용없이 center로 정렬하는 방법을 설명하였습니다(😢): block 또는 inline-block 속성을 가졌을 때만 사용할 수 있음inline 속성에는 text-align이 적용되지 않음float: left로 자식을 배열한

: transition이란 한 스타일에서 다른 스타일로 바뀌는 시간을 조절할 때 사용한다transition: property값 | duration값 | timing-function값 | delay값timing-function값 종류1) linear: 시작에서 끝까지 똑

🗒 make-up할 때 width와 heigth를 하나하나 계산하는 번거로운 일을 한 번에 해결해줄 수 있는 box-sizing에 대해서 알아보자!: box-sizing 속성은 width 속성과 height 속성이 차지하는 범위를 지정한다.전체너비 = width +

🗒 반응형웹 제작시 유용한 flex box에 대해서 자세히 설명해보겠습니다!Flex box에는 부모-자식 관계가 존재한다.즉, 부모요소인 Flexible Box 안에는 자식요소 Flex Item이 들어있다부모박스인 flex container에 display: flex

🗒 반응형 웹사이트 제작에 유용한 flex와 grid 중 grid에 대해 간단하게 정리해보겠습니다!: flexible box는 아이템을 배치할 때 가로/세로 둘 중 하나를 주축으로 정해놓고 배치하지만, grid는 가로와 세로를 모두 사용한다. (flex: 1차원, g