[TIL] CSS 레이아웃의 모든 것

이강일·2021년 12월 29일
0

position 속성

position 속성은 태그를 어떤 식으로 위치시킬 것인지를 정의합니다.

  • 속성의 종류
    • static : 기본값으로 설정되어 있으며 임의로 지정해 줄 수 없습니다. (위치가 지정되어 있지 않다는 의미를 뜻하기도 합니다.)

    • relative : 원래 있던 위치를 기준으로 좌표를 지정합니다. top, right, left, bottom 과 같은 속성을 주지 않으면 static과 동일한 값을 가지고 있습니다. 값을 주었을 때 element의 위치에 영향을 주지 않습니다.
    • absolute : 해당 요소의 위치가 지정된 부모 요소를 기준으로 해서 고정시킵니다. fixed와 비슷하면서도 다른 부분입니다.

    • fixed : element가 사용자에게 비치는 화면을 기준으로 위치가 설정됩니다. 스크롤 또는 면 확대&축소에 영향을 받지 않습니다. 광고, 네비게이션 바 등이 이 속성이 이용됩니다.

    • inherit : 부모 태그의 속성값을 상속받습니다.

display 속성

display는 요소를 어떻게 보여줄지를 결정합니다.

  • 요소의 종류

    • block요소 : address, article, aside, blockgquote, canvas, dd, div, dl, hr, header, form,h1, h2, h3, h4, h5, h6, table, pre, ul, p, ol, video
    • inline요소 : a, abbr, b, br, code, em, i, input, strong, small

  • 속성의 종류

    • none : 보이지 않게 해줍니다

    • block : 기본적으로 가로폭 전체의 넓이를 가지는 직사각형 형태가 되며 widthheightmargin, padding 등을 사용하여 형태를 변형하여 레이아웃을 수정할 수 있습니다. 그리고 블룍 요소 다음에는 줄바꿈이 이루어집니다.

    • inline : 항상 블록 요소 안에 포함되어 있으며 다른 인라인 요소가 포함될 수 있습니다.
      그리고 기본적으로 컨텐츠가 끝나는 지점까지를 넓이로 가지게 됩니다.
      그래서 임의로 widthheight로 변형을 줄 수가 없습니다.
      인라인 요소는 line-height로 줄의 높낮이를 조절할 수 있고 text-align으로 텍스트의 종앙, 좌, 우측 정렬을 할 수 있습니다.
      그리고 인라인 요소 다음에는 줄바꿈이 없고 우측으로 바로 이어서 표시가 됩니다.

float 속성

뜨다 라는 의미이며 이미지를 어떻게 띄워서 텍스트와 동시에 배치할 것인가에 대한 속성입니다.

  • 속성의 종류
    • inherit : 해당 요소의 부모 태그에 속성 값을 상속받습니다.

    • left : 요소를 왼쪽 방향으로 부유하게 설정합니다.

    • right : 요소를 오른쪽 방향으로 부유하게 설정합니다.

    • none : 기본값으로 설정을 하고 요소를 띄우지 않습니다.

0개의 댓글