FrontEnd/HTML&CSS

[CSS] 자주 쓰는 CSS 정리

1. img, video 등 오브젝트 요소에는 object-fit: cover 속성을 사용 내용의 크기가 요소의 크기와는 상관없이 기본 알고리즘에 의해 조정된다. 이 알고리즘은 원본의 크기에 가운데 정렬된 형태를 띈다. 2. 반응형 css 작업 우선순위 레이아웃을 작성할 때 반응형으로 작업하고 있고, 반응형을 나누는 기준이 min-width라면 모바일 크기부터 데스크탑으로, 작은 화면에서 큰 화면으로 우선순위를 맞춰서 작업한다. 3. display: flex 사용 되도록이면 flex를 사용하되 flex를 아무 이유 없이 남발하지 말것. flex 밑의 자식은 flex-item이 된다. flex-item이 1일 경우 flex: 1 1 0이 된다. grow: 늘어남 / shrink 줄어듬 flex-grow가 ..

[CSS] display : grid 정리

1. 개요 CSS 그리드 레이아웃(Grid Layout)은 페이지를 여러 주요 영역으로 나누거나, 크기와 위치 및 문서 계층 구조의 관점에서 HTML 기본 요소로 작성된 콘트롤 간의 관계를 정의하는 데 아주 탁월합니다. 테이블과 마찬가지로 그리드 레이아웃은 세로 열과 가로 행을 기준으로 요소를 정렬할 수 있습니다. 하지만, 테이블과 달리 CSS 그리드는 다양한 레이아웃을 훨씬 더 쉽게 구현할 수 있습니다. 예를 들어, 그리드 컨테이너 속 자식 요소를, 마치 CSS로 일일이 위치를 지정해 준 것처럼, 실제로 겹치게 층을 지면서 자리를 잡도록 각 요소의 위치를 지정해 줄 수도 있습니다. flex와 grid의 차이점은 flex : 한 방향 레이아웃 시스템 (1차원) grid : 두 방향(가로-세로) 레이아웃 ..

[CSS] display : flex 정리(flexbox)

flexbox(flex) 1. 개요 일반적으로 웹페이지의 레이아웃은 css의 display, float, position 등과 같은 속성을 사용해 구현하는데, 이러한 속성을 사용할 경우 레이아웃을 표현하는 것은 굉장히 복잡해집니다. 이러한 복잡한 레이아웃을 간단하게 구현할 수 있게 나온 것이 css3에 추가된 flexbox입니다. flexbox를 사용할 경우 요소의 크기와 순서를 유연하게 배치할 수 있습니다. 2. 특징 flexbox는 뷰 포트나 요소의 크기가 불명확하거나 동적으로 변할 때에도 효율적으로 요소를 배치, 정렬, 분산 시킬 수가 있습니다. 이러한 flexbox는 복수의 자식 요소인 flex item과 그 상위 부모 요소인 flex container로 구성됩니다. .flex_container{..

[HTML/CSS] display 속성 inline과 block, span과 div

제작된 웹 페이지를 F12버튼을 눌러서 개발자 모드로 보다보면 HTML 태그의 display 속성을 자주 보게 됩니다. display는 보여준다는 의미인데... inline, block 이라는 속성은 대체 무엇을 의미하는지 궁금해서 찾아보았습니다! 1. inline, block, inline-block 예전에 웹 페이지를 공부했을 때, HTML을 처음 배웠을 때 span과 div 태그에 대해 공부했었던 기억이 있는데요. span과 관련된 태그가 무엇무엇이 있고, div와 관련된 태그가 무엇무엇이 있는지 나열된 것을 본 기억은 있는데 지금와서 생각해보니 머릿속에 잘 정리가 되질 않아서, 한번 다시 찾아보았습니다. 먼저 HTML은 문자 일부분만 선택해서 지정하는 Inline 방식과, 넓은 범위를 묶어서 지정..