22.레이아웃

최정훈·2022년 5월 12일
0
  1. position 속성
    :웹 문서 안 요소들을 어떻게 배치할 지를 정하는 속성
  • relative:이전 요소(주로 부모 요소)에 자연스럽게 연결하여 위치를 지정.

  • absolute:원하는 위치를 지정해 배치.

  • fixed:지정한 위치에 고정하여 배치

*방법
top, left, bottom, right 와 같이 어느 위치에 요소를 위치시킬 건지 지정할 수 있습니다

  1. inline
    -대표적인 lnline 엘리먼트로 span,a,em 태그 등이 있다
    줄바꿈 없이 순서대로 한 줄에 보이게됨.

*주의사항
width,height속성을 지정해도 무시된다. 이유는 태당 태그가 마크업하고 있는 컨텐트의 크기 만큼만 공간을 차지하도록 되어 있기 때문이며, magin,padding 속성은 좌우 간격만 반영이 되고, 상하 간격은 반영 되지 않는다.

  1. inline-block
  • 전후 줄바꿈 없이 한 줄에 다른 엘리먼트들과 나란히 배치됩니다.하지만 inline 엘리먼트에서 불가능하던 width, height속성 지정 및 magin, padding속성의 상하 간격 지정이 가능해진다. 대표적으로 button,input,select 태그 등이 있다.
  1. block
    -전후 줄바꿈이 들어가 다른 엘리먼트들을 다른 줄로 밀어내고 혼자 한 줄을 차지하며, div,p,h1 태그 등이 있다. 이러한 경우 매번 줄바꿈 되어 여러 줄에 보이게 됩니다.

5.float

  • float 라는 단어는 원래 ‘뜨다’ 라는 의미이며, 원래 웹페이지에서 이미지를 어떻게 띄워서 텍스트와 함께 배치할 것인가에 대한 속성입니다.

inherit: 부모 요소에서 상속

left: 왼쪽에 부유하는 블록 박스를 생성. 페이지 내용은 박스 오른쪽에 위치하며 위에서 아래로 흐름.

right: 오른쪽에 부유하는 블록 박스를 생성. 페이지 내용은 박스 왼쪽에 위치하며 위에서 아래로 흐름. 이후 요소에 clear 속성이 있으면 페이지 흐름이 달라짐. none 이 아니라면 display 속성은 무시된다.

none - 요소를 부유시키지 않음
left와 right를 통해 부유속성을 지정시 display는 무시됩니다. (none은 제외)
또한 이후 요소에 clear 속성이 있으면 페이지 흐름이 달라집니다.

profile
사과

0개의 댓글