트러블 슈팅/html, css (2) 썸네일형 리스트형 동일한 영역을 차지하는 tap 만들기(feat: flex:1) 동일한 영역을 차지하는 tap 아래사진과 같이 넓이 높이 모두 같은 크기의 tap을 제작할 때, flex: 1을 이용하게 된다. 이 flex 1을 이용하기 전에 flex의 속성에 대해서 알아보자. flex란하나의 플렉스 아이템이 자신의 컨테이너가 차지하는 공간에 맞추기 위해 크기를 키우거나 줄이는 방법을 설정하는 속성인데, 이 속성에는 flex-grow, flex-shrink, flex-basis 등이 있다.대부분 flex는 auto, intial, none, 양의 수를 사용합니다. felx 1만약 넓이, 높이 모두 같읕 크기의 tap을 원할 때 felx:1을 설정해주면됩니다. flex:2를 설정해주면 flex:1설정해준 tag보다 더 큰 요소를 차지할 수 있습니다. .부모클래스 { display:.. footer(바닥글) 맨 아래에 붙게하기 문제 발생footer를 설정하였는데,이상하게 어떤 부분에서는 footer가 제대로 맨 아래에 붙지만, 만약 main content가 양이 적으면 footer 다음에도 빈 구역이 붙는 모습을 확인할 수 있었다.원하는 구조실제 화면 구조문제 해결APP에서 처음 구조를 wrapper div로 해더와 메인 컨텐츠 footer를 묶어주었다. 그리고 메인컨테츠의 경우 처음 시작 tag를 section으로 만들어 주었고, footer는 footer tag로 제작해주었다.(tag는 본인이 원하는 방식으로 설정하면 된다.) 그래서 common.css를 따로 만들어서 전체적으로 css를 적용해주었다. 해당 코드는 아래와 같다..wrapper { display: flex; min-height: 100vh; fle.. 이전 1 다음
