본문 바로가기

레이아웃6

[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.

[CSS] 레이아웃 배치 유형 3가지 알아보기 레이아웃(Layout) 웹을 구성하는 요소들을 보다 알아보기 쉽게 효과적으로 배치시켜주는 작업입니다. 레이아웃의 3가지 유형 레이아웃에는 Float, Flex, Grid라는 총 3가지 유형(방법)이 있습니다. 사용 방법은 아래와 같으며 1번의 경우 정렬하고자 하는 요소에, 2·3번의 경우는 부모 태그에 적습니다. 1. float: left; 2. display: flex; 3. display: grid; 01. Float Float란 '띄우다'라는 의미를 지니며 레이아웃의 틀을 잡을 때 사용됩니다. 레이아웃의 틀을 잡을 때에는 태그가 사용됩니다. 하지만 해당 태그는 block 형식이기 때문에 요소들이 가로로 나란히 정렬될 수 없습니다. float: left; 이때, 나란히 정렬해주고자 하는 요소의 CSS.. 2022. 7. 25.

이전 1 다음

Reference Book

JavaScript

JavaScript

HTML

HTML

CSS

CSS

광고 준비중입니다.

티스토리툴바