margin auto2 [프론트엔드][CSS] TIL Day-14.1 이미지를 가운데로 정렬하여 넣는 법 그리드를 연습하던 중, 주어진 소스로 만들어진 그리드의 각 박스 안의 이미지를 가운데로 정렬하고 싶다는 생각이 들었다. 이미지를 가운데로 정렬하는 방법은 다음 두 가지가 있다. 첫번째는, 이미지 요소 위의 부모요소에 스타일을 주는 방법이다. 아래의 경우와 같이, css에서 img요소의 부모요소인 figure에 text-align 속성에서 center 값을 주는 것이다. ↓ 혹은 figure 태그 안에서 바로 스타일을 줄 수 있지만, 이럴 경우 해당 태그만 스타일링이 되므로 여러개에 동일하게 스타일링을 한다면 위와 같이 css에서 스타일을 주는게 좋겠다. ↓ 두번째는, 아래와 같이 img 요소를 블록으로 지정한 뒤, margin 속성을 사용하여 0 auto라는 값을 주는 것이다. 이 때, 0은 상하의 값이.. 2022. 4. 14. [프론트엔드][CSS] TIL Day-13.1 Flex 플렉스(Flexible Box layout) CSS Flexbox는 기존의 float, position, display 속성을 사용해 HTML 요소의 배치, 정렬, 방향, 순서, 크기를 조절하는 대신에 좀 더 쉽고 효율적으로 조절할 수 있도록 하는 CSS3 레이아웃 제작 방식이다. ∨ 사용해서 좋은 점? - float속성을 사용하지 않고 가로배치할 수 있다. - 반응형 레이아웃을 만들기 쉽다. - 자식요소의 위치 잡기를 훨씬 쉽게 할 수 있다. - 브라우저에 보여지는 HTML 요소의 순서를 HTML 코드를 수정하지 않고 바꾸는 게 가능하다. 문서의 영역 중에서 Flexbox가 놓여있는 영역을 Flex 컨테이너(container)라고 한다. Flex 컨테이너를 생성하려면 컨테이너 요소의 display 값을 flex 혹은 inline-flex로 지정한.. 2022. 4. 13. 이전 1 다음
