CSS 속성 - 디스플레이, Float

민겸·2023년 3월 6일
0
post-thumbnail

디스플레이

(display)
이 속성은 웹 페이지의 레이아웃(layout)을 결정하는 CSS의 중요한 속성 중 하나고,
해당 HTML 요소가 웹 브라우저에 언제 어떻게 보이는가를 결정한다.
display 속성의 기본값은 Block요소와 Inline요소 중 하나다.

  • 블록(block)
    display 속성값이 블록(block)인 요소는 언제나 새로운 라인(line)에서 시작하며, 해당 라인의 모든 너비를 차지한다.

    <div>, <h1>, <p>, <ul>, <ol>, <form>

  • 인라인(inline)
    display 속성값이 인라인(inline)인 요소는 새로운 라인(line)에서 시작하지 않고, 요소의 너비도 해당 라인 전체가 아닌 해당 HTML 요소의 내용만큼만 차지한다.

    <span>, <a>, <img>

인라인-블록

(inline-block)

  • display 속성값이 인라인-블록으로 설정된 요소는 해당 요소 자체는 인라인 요소처럼 동작하는데, 해당 요소 내부에서는 블록 요소처럼 동작한다.

  • 이처럼 인라인-블록 요소는 인라인 요소와 비슷하지만, 너비와 높이를 설정할 수 있다.
    또, 블록 요소처럼 margin을 이용하여 여백을 지정할 수도 있게 된다.

visibility

  • HTML 요소가 웹 페이지에 표현될지 아닐지만을 결정한다.

  • 따라서 웹 페이지에는 나타나지 않더라도 레이아웃 내에는 여전히 존재하게 되며, 코드 내에도 당연히 존재한다.

visibility 속성에 사용할 수 있는 속성값은

  1. visible : 해당 HTML 요소를 웹 페이지에 나타냄.

  2. hidden : HTML 요소를 웹 페이지에 나타내지 않음. 하지만 여전히 웹 페이지의 레이아웃에는 존재.

    HTML 요소를 숨길수 있는 다른 방법은 display 속성값을 none으로 설정하면 된다.

    눈에 보이지만 않게 하는 hidden속성과는 달리 이렇게 하면 해당 요소는 웹 페이지에 더 이상 나타나지 않으며, 웹 페이지의 레이아웃에도 영향을 미치지 않는다.

  3. collapse : 이 속성값은 동적인 테이블에서만 사용할 수 있으며, 테이블의 테두리를 한 줄만 보여줌.

float

해당 HTML 요소가 주변의 다른 요소들과 자연스럽게 어울리도록 만들기 위해 만들어졌지만, 현재는 웹 페이지의 레이아웃(layout)을 작성할 때 자주 사용된다.

자주 사용하는 float 속성값

  • none : 기본적으로 요소를 띄우지 않음
  • left : 왼쪽에 띄움
  • right : 오른쪽에 띄움
  • inhert : 부모 요소로 부터 상속함
  • initial : 기본값으로 설정함

clear

float 속성이 적용된 이후 나타나는 요소들의 동작을 조절해 준다.

  • 컨테이너 요소에 float 속성이 적용되면 그 이후에 등장하는 모든 요소들은 정확한 위치를 설정하기가 매우 힘들어진다.

  • 따라서 float 속성을 적용하고자 하는 요소가 모두 등장한 이후에는 clear 속성을 사용하여, 이후에 등장하는 요소들이 더는 flaot 속성에 영향을 받지 않도록 설정해야 한다.

    • clear: none; : 기본값
    • clear: left; : 왼쪽을 취소
    • clear: right; : 오른쪽을 취소
    • clear: both; : 왼쪽 오른쪽 둘다 취소

overflow

  • float 속성이 적용된 HTML 요소가 자신을 감싸고 있는 컨테이너 요소보다 크면, 해당 요소의 일부가 밖으로 흘러넘치게 된다.

  • 이때 overflow 속성값을 auto로 설정하면, 컨테이너 요소의 크기가 자동으로 내부의 요소를 감쌀 수 있을 만큼 커지게 된다.

0개의 댓글