[CSS] Layout - position, display 속성

jenny87879·2021년 1월 12일
0

HTML/CSS

목록 보기
3/4
post-thumbnail

1. css position 속성

css에서 position이란? 이름처럼 태그들의 위치를 결정합니다.

1-1. static

  • 일반적으로 모든 태그들은 처음에 position: static; 상태입니다. (기본적으로 static 이라 따로 써주지 않아도 됩니다.) 차례대로 왼쪽에서 오른쪽, 위에서 아래도 쌓이는 형태입니다.

!codepen[jenny87879/embed/GRjYWgw?height=265&theme-id=dark&default-tab=css,result]

1-2 relative

  • 태그의 위치를 살짝 변경하고 싶을때 position: relative;를 사용합니다.
    top, right, bottom, left 속성을 사용해 위치 조절이 가능합니다.

!codepen[jenny87879/embed/wvzYJWL?height=265&theme-id=dark&default-tab=css,result]

1-3 absolute

  • relative가 static인 상태를 기준으로 주어진 값 만큼 움직였다면 absolute는 position: static 속성을 가지고 있지 않은 부모를 기준 으로 움직입니다.

  • 부모 중에 position이 relative, absolute, fixed 인 태그가 없을 경우 가장 위의 태그(body)가 기준이 됩니다.

  • 하기 예시 코드 확인 시, #absolute의 경우 부모 태그 중에 position이 relative, absolute, fixed 가 없으므로 body기준으로 가장 오른쪽으로 붙었습니다. (absolute가 되면 div여도 더는 width: 100%가 아닙니다.)
    반면에 #child 의 부모 태그인 #parent는 position: relative;이기 때문에 부모 태그 기준으로 가장 오른쪽에 붙은 걸 확인 할 수 있습니다.

!codepen[jenny87879/embed/QWKZvRx?height=265&theme-id=dark&default-tab=css,result]

1-4 fixed

  • fixed는 말그대로 해당 위치에 고정이라는 뜻입니다.
  • fixed는 별도로 부모는 필요하지 않으며 눈에 보이는 브라우저 화면 크기만큼, 화면 내에서만 움직입니다.

!codepen[jenny87879/embed/gOwBRpG?height=265&theme-id=dark&default-tab=html,result]


2. css display 속성

display? display 속성은 그 값에 따라서 웹페이지를 보고 있는 사용자에게 특정 요소(element)를 어떻게 보여줄지 결정됩니다.

2-1. block

  • display가 block로 설정된 요소는 다른 여러 요소들이 배치된 페이지에서 새로운 줄에 위치하면서, 가로 크기가 Default 100%를 차지합니다.
  • 가로, 세로 사이즈를 지정할 수 있으며, 가로 크기를 부모 요소의 그것보다 작게 설정 할 수 있지만, 그렇게 될 경우 나머지는 margin 으로 채워져 여전히 block 요소는 한 줄을 차지합니다.
    하기 코드와 같이 사이즈는 줄어들었지만 빈공간에 "inline" text가 올라가지 않는걸 확인할 수 있습니다.
  • block 속성이 기본 값으로 가지는 요소는 대표적으로 div, p 등이 있습니다.

!codepen[jenny87879/embed/oNzawpZ?height=265&theme-id=dark&default-tab=css,result]

2-2. inline

  • display 가 inline 으로 설정된 요소는 다른 요소들과 함께 같은 라인에서 표시됩니다.
  • 가로와 세로의 크기를 임의로 지정 할 수 없으며, 그 크기는 오로지 포함하고 있는 내용에 의해서 결정됩니다.

block 과 inline의 차이점

  1. 요소가 새로운 행에서 시작하는지
  2. 요소의 크기를 지정할 수 있는지

2-3. inline-block

  • display 가 inline-block 으로 설정된 요소는 block 소성과 inline 의 속성을 섞어 놓은 것과 같습니다.

  • block 처럼 가로와 세로 크기를 설정 할 수 있으면서도, 새로운 줄에서 시작하지 않고, inline 처럼 다른 요소와 같은 라인에 배치되는 장점을 가지고 있습니다.

  • 이전엔 박스를 생성할 때는 float를 이용하여 복잡하게 접근하는 방법 이었으나 이제는 inline-block을 이용하여 쉽게 같은 효과를 보여줄 수 있습니다.

!codepen[jenny87879/embed/rNMqwRe?height=265&theme-id=dark&default-tab=css,result]


3. css float 속성

float은 주로 이미지 주변에 텍스트를 감싸기 위해 만들어진 프로퍼티입니다.
하지만 현재는 웹 페이지의 레이아웃(layout)을 작성할 때 자주 사용됩니다.

float 속성을 가진 요소는 부모가 높이를 인지 할 수 없어서 요소가 부모를 벗어납니다.
해당 문제를 해결하는 법은 3가지가 있습니다.

  1. float 요소 다음에 아무태그나 넣고 clear 속성 적용 (BUT, 추가로 HTML코드 입력이 필요하다는 단점이 있음)
  2. 부모요소에 overflow: hidden; 속성 적용, 주로 많이 사용 됨.
  3. 부모요소에 float 속성을 주어 그만큼 높이를 차지하게 합니다.(BUT, block 요소의 성질을 잃어버려서, 재설정 등이 필요함.)
profile
열심히 공부중인 초보 개발자

0개의 댓글