Layout (레이아웃)의 모든 것

블록요소 & 인라인요소

1.  inline(인라인) 요소 

- 글에서 특정문구나 단어를 선택 후 꾸미거나 강조하는 태그
- 특징  1)  자동 줄바꿈 안되고 옆으로 붙는다. 2)  태그로 감싼 글자 자체의 넓이와 높이가 태그의 크기를 의미한다.
           3)  인라인태그의 넓이와 높이는 조절이 불가능하다. 4)  인라인태그는 인라인태그만 감쌀 수 있다.
      ⭐️ 5)  인라인요소에 넓이와 높이값을 주기위해서는 block화( display : block; )  시켜야 한다.

2.  inline(인라인) 요소의 종류

- 단어 강조 태그 : <strong>단어입력</strong> , <em>단어입력</em>
- 링크 : <a href = "이동할 페이지 주소"></a>
- 단어 선택 후 꾸미기 : <span>꾸며줄 단어</span>

cf. 기본적으로 인라인요소는 "margin : 0px auto;"로 정렬시킬 수 ❌❌❌❌❌❌❌❌!!!
그래서 강제로 block화를 시켜서 가운데로 배치시켜야 함 ( "display : block;" )
만약, 가운데 배치를 시키고 싶다면? => ( "text-align : center;" )

3.  block(블록) 요소

- 컨텐츠의 그룹화나 화면의 레이아웃을 담당하는 태그
- 특징  1)  자동 줄바꿈이 된다. 2) 넓이값 미지정시 부모태그의 100% 넓이를 갖는다. 3) 넓이와 높이값 지정이 가능하다.
           4)  블록요소태그는 블록요소와 인라인요소태그를 모두 감쌀 수 있다.

4.  block(블록) 요소의 종류

- 제목 (h1 ~ h6) : <h1>제목태그</h1> (h1은 로고를 만들때 쓰임:D)
- 문단 (p) : <p>글의 덩어리를 묶어주는 문단태그</p> 
- 순서 없는 목록 (Unordered List)                             - 순서 있는 목록 (Ordered List)        
    <ul>                                                                            <ol>
       <li>순서 없는 목록</li>                                                <li>순서 있는 목록</li>
       <li>순서 없는 목록</li>                                                <li>순서 있는 목록</li>
    </ul>                                                                           </ol>
- 블록요소 그룹화 또는 공간분할 : <div></div>
     <div>
       <h2></h2>
       <p></p>
     </div>

5. inline-block(인라인블록) 요소

- inline 속성 + block 속성 모두 가지고 있는 요소
- 기본적인 특징은 inline 속성과 비슷한데 (줄바꿈을 하지 않고, 동일한 라인에 작성가능)
   inline속성에서 할 수 없었던 속성들(width/height 변경 및 line-height) 즉, 블록요소의 속성을 적용할 수 있는 특징이 있다.

6. inline-block(인라인블록) 요소의 대표 사례

- 이미지(img)태그 : 인라인블록요소로, 인라인속성을 가지지만, 예외적으로 블록요소처럼 넓이와 높이 값을 모두 줄 수 있다.
인라인요소도 함께 가지고 있기때문에 단지 넓이와 높이 값만 줄 수 있다. 크기 지정 말고는 나머지 모든 특징이 인라인 요소를 따라간다. 

---

7. P o s i t i o n (포.지.션)

Position은 차곡차곡 쌓여있는 것을 강제로 화면에서 뜯어내는 것을 의미한다.
즉, Position은 좌표값을 준 후에 뜯어낸 다음, 살포시 다른 위치에 얹어놓는 것이라고 보면 이해가 수월합니다.

float라는 속성과 position이라는 속성은 함께 자주 비교되는 속성입니다. 그럼 이 둘에 대한 부연설명을 해보겠습니다.

8. P o s i t i o n vs. F l o a t

Float는 쌓아놓는데 좌우배치한 것을 띄어서 다시 쌓아놓는 형식을 의미한다. 즉, 위에가 빠지면 아래가 위로 올라가서 채워주는 방식을 의미한다. ( 차곡 차곡 쌓아가면서 컨텐츠를 빌드하는 느낌으로 이해하기!! )
나란히 배치해야할때 쓰며 겹쳐질 수 없다는 점에서 포지션과 다르다. ( 서로의 영역을 침범하지 못한다. )
따라서 position으로 만든 레이아웃과 float으로 만든 레이아웃은 완전히 다르다.

9. Position 의 종류

- static(기본값,default) : 위치를 지정하지 않을때 쓰인다.
- relative : 보통 자식인 absolute요소의 좌표 값에 기준점을 설정할 때 쓰인다.
                    좌표값을 입력하지 않고 relative만 적용하면 화면에 아무런 변화를 주지않으면서 해당요소에 position속성 적용가능
- absolute (프레임 안쪽에 자유롭게 배치하고 싶을 때 사용) : 화면에서 뜯어서 가로, 세로 좌표값으로 살포시 얹을 때 쓰인다. 
                    (가로 : left, right / 세로 : top, bottom) 먼저 absolute를 적용 후에 좌표값을 입력하기 !!

- fixed :  원래 위치와 상관없이 위치를 지정할 수 있다.
                하지만 상위 요소에 영향을 받지 않기 때문에 화면이 바뀌더라도 고정된 위치를 설정 할 수 있다. 
                브라우저 화면의 상대 위치를 기준으로 위치가 결정된다.