📐 레이아웃에 영향을 미치는 CSS 속성 (display, float, clear)

display : Block과 Inline 바꿈

p { display: inline; }
a { display: block; }
a { display: inline-block; }

inline-block은 둘 다

inline, block, inline-block에 대한 차이는 아래 글 참고

🖥️ HTML 인라인(Inline), 블록(Block) 비교하기!

 

float : 선택자 띄워놓기

.left { float: left; }
.next { float: left; }

• 선택된 요소를 왼쪽 끝 혹은 오른쪽 끝에 정렬, 띄워서 보여줌
• 🐍 예전에는 flex나 grid 대용품으로 사용됐었음

 

clear : float 사용 후 초기화

footer { clear: both; }

• float에 대한 속성을 제어. float 쓴 후 바로 다음에 따라옴
• float을 사용한 후 그 다음 요소는 float과 겹쳐서 보이게 되는데, 이를 방지하고자 다음 요소에 clear를 넣어 초기화시켜줌. 

 

브라우저와 공간 사이의 공백 제거하기

html, body {
    margin: 0;
    padding: 0;
}

* {
    margin: 0;
    padding: 0;
}

html과 body 태그는 기본적으로 margin과 padding값을 가지고 있다. 따라서 완벽히 공백을 제거하려면 위처럼 입력해줘야 한다. 또는 다른 태그에서의 기본값도 없애고 싶다면 아래처럼 입력한다.