레이아웃3 사이트유형 | 카드 유형2 사이트 유형 | 카드유형2 모바일 사용자가 폭발적으로 증가하면서 반응형 디자인이 어쩌면 필수적으로 적용되고 있는 지금, 카드형 디자인은 웹과 모바일 모두 화면크기에 맞게 최적화되는 모듈식 UI패턴입니다. ir은 img태그의 alt를 대신하여 백그라운드 이미지 사용하기위해씁니다. 1.HTML 코드 코드 보기 강아지 사진 여러분은 귀여운 강아지 사진을 보실수 있는 기회가 생겼습니다. 엄청 귀여운 강아지를 보실수 있어서 기분이 좋을거에요!🐶 달리는 강아지 강아지는 너무귀엽습니다 그렇기 저는 강아지가 너무좋아서 강아지 사진을 가지고왔습니다. 엄청 귀엽지않나요? 많이 보세요!! 더보기 달리는 강아지 강아지는 너무귀엽습니다 그렇기 저는 강아지가 너무좋아서 강아지 사진을 가지고왔습니다. 엄청 귀엽지않나요? 많이 보세.. 2022. 8. 9. LayOuy 구조 5 레이아웃05 float, flex, grid 를이용하여 구조화를 할수있습니다. flex 같은경우는 컨텐츠를 묶어서 구조화 합니다. float를 이용한 레이아웃 CSS 속성(property) float 은 한 요소(element)가 보통 흐름(normal flow)으로부터 빠져 텍스트 및 인라인(inline) 요소가 그 주위를 감싸는 자기 컨테이너의 좌우측을 따라 배치되어야 함을 지정합니다. float으로 인해 영역깨짐 방지법 1. 깨지는 영역에 clear:both를 설정합니다. 2. 부모 박스 영역에 overflow: hidden을 설정합니다. 3. clearfix를 설정합니다. *{ box-sizing: 0; padding: 0; margin: 0; } #header { height: 100px; ba.. 2022. 7. 27. LayOut 구조 4 레이아웃04 이번 레이아웃은 전체 영역이 들어간 구조입니다. 실제 사이트에서 이런 구조를 많이 사용하며, 컨테이너를 만들어서 가운데 영역을 설정합니다. CSS구성 이번 레이아웃은 전체 영역이 들어간 구조입니다. 실제 사이트에서 이런 구조를 많이 사용하며, 컨테이너를 만들어서 가운데 영역을 설정합니다. *{ box-sizing: 0; padding: 0; margin: 0; } #header { height: 100px; background-color: #E0F2F1; } #nav { height: 300px; background-color: #80CBC4; } #section { height: 580px; background-color: #26A69A; } #footer { height: 100px; b.. 2022. 7. 27. 이전 1 다음 728x90 반응형
