본문 바로가기

CSS2

[CSS] flex-cotainer, item flex flex는 flexible box, flex box 라고 부르기도 합니다. 레이아웃 배치 전용으로 나온 속성이라 간편하게 레이아웃을 정렬할 수 있는 1차원적 레이아웃 모델입니다. flex 를 사용하기 위해서는 display 속성을 통해 flex 값을 주면 되는데 이는 자식을 배치하는 방식을 설정하는 것이며 자식들은 유연하게 빈 공간을 치우거나 컨테이너를 넘거아지 않도록 줄어듭니다. 또한 자식 간의 수평 및 수직 정렬 과 빈 공간의 크기를 쉽게 조작할 수 있습니다. 얼마나 쉬운지 한번 살펴볼까요? 아래는 float를 통해 왼쪽 정렬한 코드입니다. 왼쪽 정렬을 위해 float:left로 띄우고 부모가 높이값을 갖고 그 외에 다른 요소들도 흘러가지 않도록 clear을 통해 flaot을 해제 시켜주는 .. 2023. 3. 11.
[HTML/CSS] 단위 공부 CSS를 접하다 보면 크기를 지정하는 단위를 많이 사용하게된다. 웹디자인을 할당시 주로 px(필셀) 단위와 폰트 크기를 결정하는 pt(포인트)를 주로 사용했는데 이런 단위는 '절대 길이 단위'로 인쇄할때 주로 이용되는 단위라고 한다. 다양한 디바이스가 존재하고 pc, 모바일, 태블릿 등 반응형 사이트에서 절대 길이 단위는 사용을 권장하지 않는다고 하는데.. 개발할땐 어떤 단위를 주로 사용해야 하는걸까? 🤔 절대 길이 단위 절대 길이 단위에는 cm, mm, in, pc, pt, px 등 다양한 단위가 있지만 주로 사용하는 px 만 살펴보겠습니다. px은 디바이스 화면에서 이미지를 표현하는 가장 작은 단위 입니다. 또한 고정된 값이라 직관적으로 쉽게 사용할 수 있다는 장점이 있습니다. 단, 개발시 px 사용.. 2023. 3. 4.