[CSS] 레이아웃 | position, display, float, 반응형 웹

공부하면서 정리한 내용입니다
참고한 내용은 맨 아래의 링크를 확인해주세요

---

🎀 Position

태그를 어떻게 위치시킬지를 정의한다.

▽ 기본값

div.static { position: static; }

▽ 기본적으로 표시된 위치(본래위치)를 기준으로 새로운 위치를 지정 할 수 있습니다.
top이나 left로 새로운 위치를 지정하지 않는 이상 표시된 위치와 다르지 않습니다.

div.relative {
    position: relative;
    left: 100px;
    top: -100px;
}

▽ 지정된 부모 요소(static아닌 다른값)를 기준으로해서 fixed 시키는 것과 같다고 생각하면 됩니다.

div.parent { 
    position:relative;
}
div.child { 
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
}

▽ 사용자의 브라우저를 기준으로 스크롤을 내려도 항상 같은 곳에 위치하는 상단바, 하단바, 광고 등이 이 속성을 이용
top, bottom, left, right 등으로 위치를 지정하고 width 와 height 로 요소의 크기를 지정할 수 있습니다.

div.footer-bar { 
    position:fixed;
    left:0;
    bottom:0;
    width:100%;
    height:32px;
}

▽ 부모 태그의 속성값을 상속받습니다.

position: inherit;

▽ static와 fixed의 속성을 동시에 가집니다

position: sticky;

🎀 Display

요소를 어떻게 보여줄지를 결정한다.

display: none; /*보이지 않음*/

display: block; /*블록 박스*/

display: inline; /*인라인 박스*/

display: inline-block;

≫ 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>

🎀 Float

원래 웹페이지에서 이미지를 어떻게 띄워서 텍스트와 함께 배치할 것인가에 대한 속성

float: inherit;/*부모 요소에서 상속*/

float: left;   /*왼쪽에 부유하는 블록 박스를 생성*/

float: right;  /*오른쪽에 부유하는 블록 박스를 생성*/

float: none;   /*요소를 부유시키지 않음*/

left 와 right를 통해 부유속성을 지정시 display는 무시됩니다. (none은 제외)
또한 이후 요소에 clear속성이 있으면 페이지 흐름이 달라집니다.
float속성을 적용하면 이후에 오는 글자나 다른 요소들은 그 사진 주위로 돌러싼 형태가 됩니다.

clear: none  /*기초값으로 clear를 설정하지 않은 것과 같습니다*/

clear: left  /*왼쪽을 취소*/

clear: right /*오른쪽을 취소*/

clear: both  /*오른쪽과 왼쪽을 취소*/

---

Reference

1) https://tech.lezhin.com/2019/03/20/css-sticky

CSS { position: sticky }

2) https://webclub.tistory.com/305

반응형 웹 디자인(RWD) 기초 다지기