inline, inline-block, block
모든 엘리먼트에는 엘리먼트의 유형에 따라 기본 표시값이 있다. 대부분의 엘리먼트에 대한 기본값은 보통 block이나 inline 이다.
block(블록엘리먼트 또는 블록레벨엘리먼트)
태그를 사용해 요소를 삽입했을 때 혼자 한 줄을 차지하는 요소이다. -> 해당 요소의 너비가 100%라는 의미
따라서 왼쪽이나 오른쪽에 다른 요소가 올 수 없다. 너비나 마진, 패딩 등을 이용해 크기나 위치를 지정하려면 블록엘리먼트여야 한다.
inline(인라인엘리먼트)
줄을 차지하지 않는 요소이다. 단락 안에서 해당 단락의 흐름을 방해하지 않는 채로 텍스트를 감싼다. 즉 화면에 표시되는 컨텐츠만큼만 영역을 차지하고 나머지 공간에는 다른 요소가 올 수 있다. -> 한줄에 여러개의 인라인 요소를 표시할 수 있다.
| 종류 | 해당 태그 |
|---|---|
| block element | <p>, <h1>~<h6>, <ul>, <ol>, <div>, <blockquote>, <form>, <hr>, <table> ... |
| inline element | <img>, <object>, <br>, <sub>, <span>, <input>, <textarea>, <button> ... |
display: block;해당 요소를 블록 레벨로 지정display: inline;해당 요소를 인라인 레벨로 지정. 서로 다른 줄에 배치되는 요소들을 한 줄로 함께 표시하기 위해 사용 -> 주로 목록에서 사용display: inline-block;한 줄로 배치할 수는 있지만 너비나 높이, 위 아래 마진, float 같은 값이 정확이 적용되지 않는다. 요소를 인라인 레벨로 배치하면서 내용은 블록 레벨 속성으로 지정하고 싶다면 이용. 블록 레벨 요소와 인라인 레벨 요소 두가지 특성을 가짐.display: none;해당 요소를 아예 화면에 표시하지 않음
Script 와 같은 일부 특별한 엘리먼트에서는 none값을 기본값으로 사용하기도 한다.
❗️ 둘의 차이점 알기!
Visibility : hidden;으로 설정하면 엘리먼트는 감춰지지만 보이지 않더라도 여전히 공간을 차지한다.Display: none;로 설정하면 엘리먼트가 존재하지 않는것처럼 페이지가 랜더링된다.
float
레이아웃을 잡는데 사용하는 또 하나의 css 프로퍼티이다. 웹 요소를 문서 위에 떠 있게 만든다. 왼족 구석이나 오른쪽 구석에 요소가 배치된다는 의미이다. 이미지 주위를 텍스트로 감싸기 위해 만들어진다.
기본형 -> float: left | right | none
clear 속성
float 속성을 이용해 요소를 왼쪽이나 오른쪽에 배치하면 그 다음 다른 요소들에도 같은 속성이 전달된다. float 속성이 더 이상 유용하지 않다고 알려주는 속성이 필요한데 그게 바로 clear 속성이다.
float: left;를 이용했다면clear: left;로 종료float: right;를 이용했다면clear: right;로 종료- float 속성 값과 관계없이 무조건 기본 상태로 되돌리고 싶다면
clear: both;
position 속성 - relative, absolute, fixed
웹 문서 안의 요소들을 자유자재로 배치해주는 속성.
좌표값은 양수와 음수로 모두 표현 가능.
기본형 -> position: relative | absolute | fixed
Static
static은 기본값이다. 위치가 지정된 것이 아니라고 표현한다. static이 아닌 다른 값으로 지정된 엘리먼트에 대해 위치가 지정되었다라고 표현한다
Relative
별도의 프로퍼티를 지정하지 않으면 static과 동일하게 동작. 상대위치가 지정된 엘리먼트에 top이나 right,bottom,left를 지정하면 기본위치와 다르게 위치가 조정됨
Fixed
페이지가 스크롤되더라도 늘 같은곳에 고정된다. 부모요소가 아닌 브라우저 창이 기준이 된다. 브라우저 창의 왼쪽 위 꼭지점을 원점으로 두고 좌표가 계산된다. Relative 와 마찬가지로 top, right, bottom, left 프로퍼티 사용
Absolute
가장 가까운 곳에 위치한 부모 요소나 조상 요소 중 position 속성이 relative 인 요소를 기준으로 삼는다. 그럴 요소가 없다면 문서 본문을 기준으로 삼는다.
