[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를 쓴다고 하는데.. 더 알아봐야겠다🤔