[멋쟁이사자처럼 - 프론트엔드 스쿨 TIL] CSS

Today I Learn - 2024.05.10

* box-sizing

- CSS 박스 모델의 기본값에서, 지정한 너비와 높이는 요소의 콘텐츠 박스 크기에만 적용됩니다. 요소에 테두리나 안쪽 여백이 있으면 너비와 높이에 더해서 화면에 그립니다. 따라서 크기를 설정할 때, 원하는 크기를 얻으려면 테두리나 안쪽 여백을 고려해야 합니다.

• content-box : 기본값, width + padding + border
• border-box : 테두리와 안쪽 여백의 크기도 요소의 크기로 고려. padding을 주어도 width 사이즈를 유지

* flex

• flex-container
• flex-flow
• justify-content (메인축)
• align-items (교차축)
• order

* float (떠있다)

- 요소가 기본 레이아웃 흐름에서 벗어나 요소의 모서리가 페이지의 왼쪽이나 오른쪽에 이동하는 것입니다.

- 보통 레이아웃을 구성할 때 요소를 가로 정렬하기 위해 사용되는 기법입니다.

• none : 기본값
• right : 요소를 오른쪽으로 이동
• left : 요소를 왼쪽으로 이동
• clear : float 속성에 영향을 받지 않도록 설정
• display: flow-root : 부모요소에 flow-root를 설정

* nth-child()

- 형제 태그에서, 선택하려는 요소의 인덱스 패턴을 나타내는 하나의 매개변수를 사용해 지정합니다. 인덱스는 1부터 시작

* border-radius

- border-radius 속성은 요소 테두리 경계의 꼭짓점을 둥글게 만듭니다.

* position (relative / absolute)

- position 속성은 문서 상에 요소를 배치하는 방법을 지정합니다.

- top, right, bottom, left 속성이 요소로 위치를 결정합니다.

• static : 기본값, 요소를 일반적인 문서 흐름에 따라 배치하며 top, right, bottom, left, z-index 속성에 아무런 영향을 주지 않는다.
• relative : 요소를 일반적인 문서 흐름에 따라 배치하고 자기 자신을 기준으로 top, right, bottom, left의 값에 따라 적용합니다.
• absolute : 요소를 일반적인 문서 흐름에서 제거되며 페이지 레이아웃에 공간도 배정하지 않습니다. 부모(조상) 요소에 대해 상대적으로 배치합니다. 최종 위치는 top, right, bottom, left 값이 지정합니다.

---

요즘에는 float대신 flexbox를 많이 사용을 하긴 하지만 알고는 있어야 된다고 생각은 했었다.

float를 이렇게까지 딥하게 얘기를 들어본 적은 처음이라 들을때 어벙벙했다.

수업을 들을수록 내가 정말 얕게 알고 있구나 라는 생각을 했다.. 열심히 해야겠다😓