[HTML] Position, Inline, Block 의 속성
Q1. Position의 속성 중 relative, absolute, fixed는 무엇일까?
1. relative
- 엘리먼트를 조금 움직일 때, 처음 위치를 기준으로 움직인다.
top
right
bottom
left
와 같은 속성을 기준으로 적용한다.
2. absolute
static
이나 relative
와 다르게 속성이 부여된 부모를 기준으로 위치를 적용한다. (부모에 부여된 속성이 없다면 body
를 기준으로 정렬한다.)
3. fixed
- 초기 위치에 고정시킨다. (스크롤을 내리거나 올려도 항상 그 자리에 있는다.)
top
right
bottom
left
으로 수정 시 초기 위치에서 변경이 가능하다.
Q2. Inline, inline-block, block는 뭘까?
1. Display(화면을 배치하는 방법)의 종류이다.
2. Block
- 항상 새로운 라인에서 시작한다. (해당 엘리먼트의 너비가 100%이다. 브라우저에서 앞뒤 엘리먼트 사이에 자동적으로 margin을 만들기 때문이다.)
- width, margin, paddin을 이용해 크기나 위치를 지정하려면 block이야 한다.
display: block;
으로 지정하면 해당 엘리먼트를 block으로 지정한다.
- block은 다른 block이나 inline을 감쌀 수 있다.
- block 태그는
<div>
<p>
<h1>
~<h6>
<ul>
<ol>
<li>
<form>
<hr>
<table>
<adress>
등이 있다.
3. inline
- block과 달리 한 줄을 다 차지하지 않는다.(화면에 표시되는 영역만큼만 차지함으로, 나머지 공간에 다른 엘리먼트가 들어올 수 있다.)
display: inline;
으로 지정하면 해당 엘리먼트를 inline으로 지정한다.
- inline은 inline을 포함할 수 있으나 block은 포함할 수 없다.
- html에서 글자로 취급하기 때문에 알파벳을 기준으로 높이가 정해진다. (위, 아래 margin을 가질 수 없어서 block으로 바꿔줘야 한다.->
display: block;
하지만 padding은 적용이 가능하다.)
- inline 태그는
<img>
<br>
<a>
<span>
<input>
<button>
<label>
등이 있다.
4. inline-block
display: inline;
으로 지정하면 해당 엘리먼트를 inline으로 지정한다.-> 엘리먼트들을 한 줄에 옆으로 배치할 수 있지만 css에서 적용한 너비, 높이, 마진 등의 박스 모델 값이 적용되지 않으며 크기는 적절히 지정된다.
- div 태그를 inline처럼 배치하고 싶지만 크기 값을 주어야 하는 경우
display:inline-block
을 사용하면 된다.
Q1. display:inline-block
은 반응형 디자인을 지원하지 않으며, 정해진 형식이 없고 block 사이에 마음대로 공간이 생겨 잘 사용하지 않는다고 한다. 그래서 해결 방안으로 flex를 쓴다고 하는데.. 더 알아봐야겠다🤔