본문 바로가기

Layout5

[Layout] 레이아웃 05 레이아웃 05 전체 영역이 들어간 구조이며 실제 사이트에서 이런 구조를 많이 사용하고 컨테이너를 만들어 가운데 영역을 설정하고 그런 다음 float, flex , grid 방식 중 하나를 선택해 구역을 분류한다. Float을 이용한 레이아웃 레이아웃의 틀을 잡을 때 태그가 사용되며 해당 태그는 Block 형식이므로 가로로 나란히 정렬이 불가능하다. 이때 나란히 정렬해주고자 하는 요소의 CSS 속성에 float: left;를 적어주면 나란히 정렬이 가능하다. 단, 이 속성을 쓰게 될 경우, 속성을 썼던 아래의 footer의 height값이 0이 되어 보이지 않게 되는 버그가 발생하는데 이럴 때에는 보이지 않는 해당 요소에 clear: both;를 적어놓으면 해결된다. clear: both; 외에도 over.. 2022. 7. 29.

[Layout] 레이아웃 04 레이아웃 04 전체 영역이 들어간 구조이며 실제 사이트에서 이런 구조를 많이 사용하고 컨테이너를 만들어 가운데 영역을 설정한다. Container(컨테이너)를 이용한 레이아웃 전체 영역이 들어간 구조이며 실제 사이트에서 이런 구조를 많이 사용하고 컨테이너를 만들어 가운데 영역을 설정한다. * { margin: 0; padding: 0; } #header { height: 100px; background-color: #E0F2F1; } #nav { height: 300px; background-color: #80CBC4; } #section { height: 500px; background-color: #26A69A; } #footer { height: 100px; background-color: #008.. 2022. 7. 29.

[Layout] 레이아웃 03 레이아웃 03 전체 영역이 들어간 구조이며 실제 사이트에서 이런 구조를 많이 사용하고 컨테이너를 만들어 가운데 영역을 설정한다. Float을 이용한 레이아웃 레이아웃의 틀을 잡을 때 태그가 사용되며 해당 태그는 Block 형식이므로 가로로 나란히 정렬이 불가능하다. 이때 나란히 정렬해주고자 하는 요소의 CSS 속성에 float: left;를 적어주면 나란히 정렬이 가능하다. 단, 이 속성을 쓰게 될 경우, 속성을 썼던 아래의 요소가 보이지 않게 되는 버그가 발생하는데 이럴 때에는 보이지 않는 해당 요소에 clear: both;를 적어놓으면 해결된다. 또한 clear: both; 대신 맨 아래의 clearfix 부분을 적어놓는 방법도 있다. * { margin: 0; padding: 0; } body { .. 2022. 7. 29.

[Layout] 레이아웃 02 레이아웃 02 전체 영역이 들어간 구조이며 실제 사이트에서 이런 구조를 많이 사용하고 컨테이너를 만들어 가운데 영역을 설정한다. Float을 이용한 레이아웃 레이아웃의 틀을 잡을 때 태그가 사용되며 해당 태그는 Block 형식이므로 가로로 나란히 정렬이 불가능하다. 이때 나란히 정렬해주고자 하는 요소의 CSS 속성에 float: left;를 적어주면 나란히 정렬이 가능하다. 단, 이 속성을 쓰게 될 경우, 속성을 썼던 아래의 요소가 보이지 않게 되는 버그가 발생하는데 이럴 때에는 보이지 않는 해당 요소에 clear: both;를 적어놓으면 해결된다. * { margin: 0; padding: 0; } body { background-color: #E8F5E9; } #wrap { width: 1200px;.. 2022. 7. 29.

[Layout] 레이아웃 01 레이아웃 01 전체 영역이 들어간 구조이며 실제 사이트에서 이런 구조를 많이 사용하고 컨테이너를 만들어 가운데 영역을 설정한다. Float을 이용한 레이아웃 레이아웃의 틀을 잡을 때 태그가 사용되며 해당 태그는 Block 형식이므로 가로로 나란히 정렬이 불가능하다. 이때 나란히 정렬해주고자 하는 요소의 CSS 속성에 float: left;를 적어주면 나란히 정렬이 가능하다. 단, 이 속성을 쓰게 될 경우, 속성을 썼던 아래의 footer의 height값이 0이 되어 보이지 않게 되는 버그가 발생하는데 이럴 때에는 보이지 않는 해당 요소에 clear: both;를 적어놓으면 해결된다. * { margin: 0; padding: 0; } body { background-color: #FFF3E0; } #wr.. 2022. 7. 29.

이전 1 다음

Reference Book

JavaScript

JavaScript

HTML

HTML

CSS

CSS

광고 준비중입니다.

티스토리툴바