# position 속성 - relative, absolute, fixed

  • 웹페이지의 레이아웃을 짤 때 CSS의 position 속성을 활용하면 HTML 요소들의 위치를 쉽게 설정할 수 있다.

  • position 속성을 사용하려면 속성 값에 해당하는 static, relative, absolute, fixed를 알아야 한다. 각각의 속성 값마다 HTML 요소를 배치하는 방식이 다르므로 차이점을 명확히 구분하자.

  • top, bottom, left, right 속성은 요소의 실질적인 위치를 조절한다.

    • static

      • HTML 요소의 default 값

      • 정적 위치로 top, bottom, left, right 속성에 영향을 받지 않는다.

    • relative

      • HTML 요소의 본래 위치에서 top, bottom, left, right로 주어진 값 만큼 이동한다.
    • absolute

      • HTML 요소의 부모 요소 중, position 속성 값이 static이 아닌 요소를 기준점으로 이동한다.
      • 만약 부모 요소 중, static이 아닌 요소가 없다면 body 태그를 기준으로 이동한다.
      • absolute는 top, left를 꼭 적어주는 게 좋다. top, left로 옮길 일이 없으면 값을 0으로라도 주어야 한다.
    • fixed

      • 부모 요소와 상관 없이 뷰포트(viewport)를 기준으로 배치된다.

# inline, inline-block, block에 대해서

  • block
    • 기본 width값이 100%인 성질.
    • 줄바꿈이 이뤄진다.
    • <div>, <p> 등이 있다.
  • inline
    • <div>와 달리 가로 세로의 크기를 임의로 지정할 수 없다.
    • 크기는 포함하고 있는 내용에 의해 결정된다.
    • 줄바꿈 X, 다른 요소들과 함께 같은 라인에 표시된다.
  • inline-block
    • block 속성과 inline 속성을 섞은 것과 같다.
    • width와 height 적용 가능하다.
    • 줄바꿈이 이뤄지지 않는다.
    • 만약 width와 height를 지정하지 않을 경우, inline과 같이 컨텐츠만큼 영역이 잡힌다.

# float에 대해서

  • 특징

    • 요소를 좌우 방향으로 띄움(수평 정렬)
  • 속성 값

    • 값: none / 의미: 요소 띄움 없음 / 기본값: none

    • 값: left / 의미: 왼쪽으로 띄움

    • 값: right / 의미: 오른쪽으로 띄움

  • 사용법

    • float: 방향;

    • 요소에 float 속성을 적용하면, 적용된 요소 주변으로 문자(text)가 흐르게 된다.

  • float 해제

    • float속성이 적용된 요쇼의 주위로 다른 요소들이 흐르게 되는데, 이를 방지하기 위해 속성을 '해제'해야 한다.
      1. 형제요소에 clear: (left, right, both) 추가하여 해제
      2. 부모요소에 overflow: (hidden, auto) 추가하여 해제
      3. 부모요소에 clearfix 클래스 추가하여 해제(추천!)
  • 형제 요소에서 해제

    • float 속성이 추가된 요소의 다음 형제요소에 clear 속성 추가
    • 다음 형제 요소가 있을때는 상관 없지만, 없는 경우 해제X
  • 부모 요소에서 해제

    • float 속성이 추가된 요소의 부모요소에 overflow 속성 추가
    • flat 속성의 부모요소로 랩핑한 영역 안에서만 사용되도록 하는 명령
    • 단점: float 속성과 관련 없는 overflow라는 속성을 사용(정석X)
  • 부모 요소에서 해제2(추천!)

    • float 속성이 추가된 요소의 부모요소에 미리 지정된 clearfix 클래스 추가
profile
Difference & Repetition

0개의 댓글

Powered by GraphCDN, the GraphQL CDN