TIL 08 | CSS Position, display, float

SammyJung·2021년 3월 17일
0
post-thumbnail

포지션 속성에 대해서는 기본적인 개념이다보니 MDN과 생활코딩에 정리된 것을 많이 참고 했고 개인적으로 한번 더 정리하기 위해 기록해봅니다!

position 속성

  • static
    요소를 일반적인 문서 흐름에 따라 배치합니다. top, right, bottom, left, z-index 속성이 아무런 영향도 주지 않는다. 디폴트 값.

relative

자기 자신을 기준으로 상대적인 위치에 배치된다.위치는 top, right, bottom, left 속성에 의해 지정되고 뒤에 계속되는 요소 배치에 영향을 주지 않는다.

absolute

요소를 일반적인 문서 흐름에서 제거하고, 페이지 레이아웃에 공간도 배정하지 않습니다. 대신 가장 가까운 위치 지정 조상 요소에 대해 상대적으로 배치합니다. 단, 조상 중 위치 지정 요소가 없다면 초기 컨테이닝 블록을 기준으로 삼습니다. 최종 위치는 top, right, bottom, left 값이 지정합니다.

fixed

고정적인 위치에 배치된다. 브라우저의 스크롤에 의한 영역이동에 대해 고정된다. 위치는 top, right, bottom, left 속성에 의해 지정된다. 뒤에 계속되는 요소의 배치에 영향을 주지 않는다.

상단의 고정메뉴바를 만들 때나 footer에도 fix를 이용할 수 있다.

display property

display:none과 visibility와의 차이

http://learnlayout.com/에 부분을 인용하였습니다.

흔히 볼 수 있는 또 한 가지 display 값은 none입니다. script와 같은 일부 특별한 엘리먼트에서는 none을 기본값으로 사용하기도 합니다. 이 값은 자바스크립트에서 엘리먼트를 실제로 삭제하고 재생성하지 않고도 엘리먼트를 보이고 감추는 데 흔히 사용됩니다.

이것은 visibility와 다릅니다. display를 none으로 설정하면 엘리먼트가 마치 존재하지 않는 것처럼 페이지가 렌더링됩니다. visibility: hidden;으로 설정하면 엘리먼트가 감춰질 테지만 해당 엘리먼트는 완전히 보이지 않게 되더라도 여전히 공간을 차지합니다.

width 대신 max-width를 사용하면 브라우저가 작은 창을 처리하는 방식을 개선할 수 있습니다. 이것은 사이트를 모바일 환경에서도 사용할 수 있게 만들 때 중요합니다.

display:block

block은 화면 전체를 사용하는 태그로 영역을 차지 하는 박스형태을 가지는 성질입니다. 그렇기 때문에 기본적으로 block은 width값이 100%가 됩니다.
(간단하게 보면 block요소는 한 줄씩 배치됩니다.)

display:inline

자기자신의 크기만큼만 화면의 일부를 차지하는 태그,대표적으로 <span>이라는 태그의 성질로 content/text 크기만큼만 점유하고 동일 라인에 붙는 성질을 가지고 있습니다.inline 요소를 사용할 때 주의할 점은 width,height 값을 따로 주더라도 이 값을 무시하고, margin,padding 속성은 좌우 값만 반영되고, 상하 값은 반영되지 않습니다.

참고이미지- 생활코딩

(간단하게 보면 block요소는 한 줄씩 배치되었고,inline요소는 한줄에 여러개의 요소가 배치되었습니다.)

html태그들을 block요소와 inline 요소로 나눠보면
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>, <i>, <span>, <abbr>, <img>, <strong>, <b>, <input>, <sub>, <br>, <code>, <em>, <small>, <tt>, <map>, <textarea>, <label>, <sup>, <q>, <button>, <cite>

inline 속성을 block 속성으로 block 속성을 inline 속성으로도 바꿔줄 수 있습니다.

display: inline-block

첫번째 성질 자체는 inline과 비슷하게 동일라인에 여러개의 태그를 붙여 쓸수 있습니다. inline의 단점들을 커버할 수 있는 것이 inline-block!

-inline이 적용시키지 못했던 margin, width 등의 속성 값을 적용시킬 수 있게 만들어주는 속성을 가지고 있다. 대표적으로 <button>이나 <select> 태그가 있다.

  • width/height 적용 가능
  • margin/padding-top/bottom 적용 가능
  • line-height 적용 가능

float

float 프로퍼티는 주로 레이아웃을 구성할 때 블록 레벨 요소를 가로 정렬하기 위해 사용되는 기법이다.

flexbox를 사용한다면 더욱 간단하게 정렬을 구현할 수도 있지만 flexbox 레이아웃을 지원하지 않는 IE를 고려해야 한다면 float 프로퍼티를 사용해야 한다.(이전에 구축된 사이트의 경우에는 float를 사용한 경우 알고있어야 겠다)

float 프로퍼티를 사용하지 않은 블록 요소들은 수직으로 정렬된다. float:left; 프로퍼티를 사용하면 왼쪽부터 가로 정렬되고, float:right; 프로퍼티를 사용하면 오른쪽부터 가로 정렬된다.

float 프로퍼티 관련 문제 해결 방법

float 속성에는 left, right, none 가운데 하나를 값으로 줄 수 있다. 그런데 float 속성을 가진 요소는 부모가 높이를 인지할 수 없어서 부모를 벗어나는 문제가 발생한다.

float을 해결하려면 clear라는 속성이 있다. 부모div 마지막에 아무태그나 넣고 clear 속성을 적용합니다. 이 기법을 사용할 때에는 HTML코드를 더 입력해야 하는 부담이 있다.

주로 많이 사용하는 방법인데 부모divoverflow: hidden; 을 주는 것이다.

profile
안녕하세요! 프론트엔드 개발자 새미입니다:D

0개의 댓글