오늘 공부한 내용 💻
-
CSS - Float
-
CSS - Position
-
CSS - Flex Containers
-
CSS - Flex Items
Float
특정 요소를 떠있게, 흐르도록, 부유하게 하도록 하는 속성이다.
다시 말해, float 속성을 사용해 박스를 왼쪽(left) 또는 오른쪽(right)으로 부유시키는 레이아웃.
여기서 '부유하다' 라는 의미는 요소가 기본적인 문서 배치의 흐름에서 벗어나 요소의 모서리가 페이지의 왼쪽이나 오른쪽으로 이동하는 것을 뜻한다.
HTML 요소들은 기본적으로 수직으로 쌓이게 된다.
하지만, 예를 들어
float: left;를 사용하면 요소들이 왼쪽에서부터 차례대로 쌓이게 된다.
예전에는 Float를 요소의 수평 정렬을 위해 사용했지만
==> 지금은 flex를 주로 사용한다.
-
Float 해제
float를 더 이상 사용하지 않으려면 해제 속성(clear)을 지정해줘야 한다.
그러기 위해서는 해제를 위한 요소를 만들어야 하고, 결론적으로 사용하지 않을 요소를 구조적으로 만들어야한다..그렇다면 방법은?
-
컨테이너에 overflow: hidden 속성 사용
근본적인 해결책은 아님. -
가상요소 ::after 사용.
컨테이너 부분에 가상요소를 사용하여 해제한다.주의할 점
속성에 content가 꼭 있어야한다.
컨테이너 안에는 float 속성을 가진 아이템만 있어야한다.
-
Position
요소의 위치 특성을 지정한다.
위치를 직접 설정한다기 보다는 위치의 특성을 정의한다.
top, bottom, left, right과 같은 별도 속성으로 정확한 위치를 설정한다.
-
position: absolute
부모 요소를 기준으로 배치, 부모 요소에 position: relative있어야함 -
postition: fixed
기본적으로 viewPort 기준으로 위치를 지정함.그렇지만, 요소의 조상 중 하나가 transform, perspective, filter 속성 중 어느 하나라도 값이 있다면 뷰포트 대신에 그 조상을 컨테이닝 블록(위치의 기준)으로 삼는다.
어려웠던 내용 🤢
Flex
-
flex container : display: flex 속성을 가진 요소
- flex-wrap - 구조의 줄바꿈 처리
nowrap: 줄바꿈 X
wrap: 줄바꿈
wrap-reverse: 줄바꿈 방향 반대로
- flex-wrap - 구조의 줄바꿈 처리
-
flex items : flex container의 자식 요소
-
flex-shrink: 줄바꿈이 없다는 가정 하에서, 컨테이너의 공간이 부족할 때 감소되는 비율을 나타낸다. 기본값 1.
-
flex-grow: 컨테이너의 공간이 남을 때, 아이템의 너비가 증가하는 비율을 나타낸다. 기본값 0.
-
flex-basis: 요소의 기본 너비를 지정한다. 기본값 auto.
-
flex: grow shrink basis (단축속성)
단축속성 사용할때 basis 생략하면 기본값 아니고 0들어감
그냥 개별 속성으로 사용하자 ~
-
더 공부할 내용 📃
- CSS 속성들의 기본값
느낀점 👀
CSS를 본격적으로 공부하는건 이번이 처음이지만 클론코딩 프로젝트를 하면서 flex나 position은 써봐서 대충은 알고있다고 생각했는데
진짜 대충 알고있었다 ㅋ
flex 같은 경우에는 컨테이너와 아이템으로 나누어서 공부를 하니 좀 더 적용하기 쉬운것 같았다. 머리로 이해는 했지만 아직 필요할때 적절한 속성이 딱 떠오르지가 않는다. 공부 하면 되겠지 머 🤷♀️
결론 : CSS ... 재밌어 ,,, 근데 어려워 ,,, 아니? 재밌어 ,,,
참고 사이트 🙄
