4.CSS layout 배치

CSS layout 배치를 위한 속성들

• HTML 요소들은 기본적으로 위에서 아래로 배치됩니다.

• 아래의 속성들을 활용하여 layout 배치를 변경할 수 있습니다.

  • display 속성(block, inline, inline-block, none)
  • position 속성(static, absolute, relative, flxed)
  • float 속성

1. Display 속성

• 웹 페이지에서 HTML요소들이 어떤 형태를 가질지, 다른 요소들과 어떤 방식으로 배치될지 결정한다.

1.1 block

• width, height값을 통해 크기를 지정할 수 있습니다.
• 별도의 값을 주지않을 경우 width는 한줄 전체를 사용합니다

1.2 inline

• 별도의 width, height값을 설정해도 무시합니다.
• 태그 내부에 내용만큼, 즉 필요한 최소 길이만큼만 공간을 차지합니다.
• inline 요소들은 생성시 줄바꿈없이 이전 요소 바로 뒤에서 가로로 배치됩니다.

1.3 inline-block

• block 속성과 inline 속성을 모두 가지고 있는 형태로입니다.
• block 속성처럼 width를 설정할 수 있으며 요소들이 순차적으로 가로로 배치됩니다.
• 즉 해당 요소는 inline, 요소 내부는 block처럼 동작합니다.

1.4 none

• 해당 요소를 보이지 않게 합니다.

2. Position 속성

• Html 요소들의 상대적, 절대적인 위치를 결정합니다.

2.1 static

• position의 기본값이다.
• top, bottom, left, right 값이 설정되지 않습니다.

2.2 relative

• 본래 자신의 위치에서 top, bottom, left, right의 값만큼 이동합니다.

2.3 absolute

• static이 아닌 부모 요소의 위치를 기준으로 상대적인 위치를 결정합니다.
• 상위 요소가 없을시 html 문서를 기준으로 결정합니다.

2.4 flxed

• 웹 브라우저 화면(viewport)의 좌측,맨 위를 기준으로 상대 위치를 결정합니다.
• top, bottom ,left, right의 값만큼 이동합니다.

3. Float 속성

• 기존의 레이아웃 배치에서 벗어나 다른 요소위에 띄울 수 있습니다.(겹치는 것처럼 보임)
• left, right, none의 값으로 위치를 결정할 수 있습니다.