CSS/Layout6 레이아웃 배치 5 레이아웃(Layout) 배치 레이아웃 배치 다섯번째 시간입니다. (float, flex, grid에 대한 자세한 설명은 여기를 참고하세요!) 저번 시간에 배웠던 container요소와 기존에 계속해서 학습했던 레이아웃속성값들을 이용해서 구조화 해볼게요! 그리고 flex에도 grid처럼 시멘틱태그를 활용해서 구조화 해 볼 예정입니다. 01_ float을 이용한 레이아웃 foat:left 속성을 이용해 좌측 빈 공간부터 차곡 차곡 채워나갑니다. float로 인해 깨지는 영역은 clearfix를 활용해서 해결합니다. 반응형 웹을 구현하기 위해서 width와 height의 값을 조정해줍니다. * { margin: 0; padding: 0; } #wrap { width: 100%; } #header { width.. 2022. 7. 29. 레이아웃 배치 4 레이아웃(Layout) 배치 레이아웃 배치 네번째 시간입니다. 주요 콘텐츠들을 가운데로 배치하고 화면이 늘어나도 뒷요소들을 계속해서 표현해주는 구조입니다. 요즘 실제 웹들은 이러한 구조를 가장 많이 사용하고 있습니다. container라는 부모요소를 활용한 레이아웃 이번 구조는 따로 레이아웃에 관련된 속성값을 부여할 필요가 없는 구조입니다. 가운데 주요 콘텐츠 요소들을 container로 묶어 설정합니다. container의 높이값은 직접 입력해도 되지만, height: inherit를 이용해 부모요소의 높이값을 그대로 상속받도록 합니다. *{ margin: 0; padding: 0; } #header{ height: 100px; background-color: #E0F2F1; } #nav{ height.. 2022. 7. 29. 레이아웃 배치 3 레이아웃(Layout) 배치 레이아웃 배치 세번째 시간입니다. (float, flex, grid에 대한 자세한 설명은 여기를 참고하세요!) 특이사항으로, flex사용 시 요소들을 한번 더 묶어서 구조화 합니다. 또 태블릿 이후의 해상도에서는 사라지는 요소가 있는데 이는 display:none을 이용합니다. 01_ float을 이용한 레이아웃 foat:left 속성을 이용해 좌측 빈 공간부터 차곡 차곡 채워나갑니다. 이후 아래 요소가 보이지 않는 버그는 clear:both속성을 사용하여 해결하였습니다. 반응형 웹을 구현하기 위해서 width와 height의 값을 조정해줍니다. *{ margin: 0; } body{ background-color: #E1F5FE; } #wrap{ width: 1200px; .. 2022. 7. 29. 레이아웃 배치 2 레이아웃(Layout) 배치 저번시간과 마찬가지로 기존에 배웠던 float, flex, grid를 활용하여 실제 레이아웃 배치를 해봅시다. (자세한 설명은 여기를 참고하세요!) 두번째 구조는 1번 구조에서 한개가 더 추가된 구조이며, 반응형 웹 적용시 속성값을 변경해주는 구조입니다. 01_ float을 이용한 레이아웃 foat:left 속성을 이용해 좌측 빈 공간부터 차곡 차곡 채워나갑니다. 이후 아래 요소가 보이지 않는 버그는 clear:both속성을 사용하여 해결하였습니다. 반응형 웹을 구현하기 위해서 width와 height의 값을 조정해줍니다. *{ margin: 0; } body{ background-color: #E8F5E9; } #wrap{ width: 1200px; margin: 0 aut.. 2022. 7. 29. 레이아웃 배치 1 레이아웃(Layout) 배치 오늘은 기존에 배웠던 float, flex, grid를 활용하여 실제 레이아웃 배치를 해봅시다. (자세한 설명은 여기를 참고하세요!) 첫번째 구조는 가장 기본이 되는 구조입니다. 01_ float을 이용한 레이아웃 foat:left 속성을 이용해 좌측 빈 공간부터 차곡 차곡 채워나갑니다. 이후 아래 요소가 보이지 않는 버그는 clear:both속성을 사용하여 해결하였습니다. 반응형 웹을 구현하기 위해서 모바일사이즈에서는 aside와 section의 width값을 100%로 조정해줍니다. *{ margin: 0; } body{ background-color: #FFF3E0; } #wrap{ width: 1200px; margin: 0 auto; } #header{ width: .. 2022. 7. 29. 레이아웃 기본 익히기 레이아웃(Layout) 기본 레이아웃 배치시 사용할 수 있는 방법으로는 float, flex, grid 방식이 있습니다. 01_ float 특정 요소(elemnet)를 떠있게, 부유하게 만드는 속성입니다. 즉, 박스를 왼쪽(left) 또는 오른쪽(right)으로 배치시키는 방법입니다. flaot를 사용할시 영역이 깨지는 버그(부모요소가 자식요소의 높이를 인지못함)가 있는데, 이 버그는 1) 깨지는 영역에 'clear: both' 속성을 사용합니다.(비추) 2) 부모 요소 영역에 overflow:hidden을 설정합니다. 3) flaot을 사용한 부모요소에 clearfix를 설정합니다 float를 취소할 때에는 float:none; 합니다. 속성 값 속성 설명 left 좌측 빈공간부터 채워 내려옴 righ.. 2022. 7. 25. 이전 1 다음 반응형
