🤯 INTRO...
여러가지 태그들을 이용해 <body> 안에 내용을 집어넣는 방법을 배웠지만 이렇게 HTML 문서를 작성하다보면 어떤 태그는 줄 바꿈이 되기도 하고.. 안되기도 해서 혼란해지는 경우가 종종 있다. 😱
<p> <span> <div>...(여러가지태그ㄷㅡㄹ...?)🤔
🧐 span과 div를 살펴보자
그 중에서도 자주 쓰는 🕹<span> 과 🕹<div>가 있는데
각 코드를 이용해 내용을 작성해보면 그 특징을 알 수 있다.
<span>"내 </span> <span>귓가에 </span> <span>노래를 </span> <span>불러 </span> <span>넣어줘요"</span>
⚡️출력결과 (아무리 태그를 작성해봤자 줄바꿈 안되쥬..)😅
"내 귓가에 노래를 불러 넣어줘요"
<div>"다른</div> <div>새소리가</div> <div>들려오지</div> <div>않게"</div>
⚡️출력결과 (자동 줄바꿈)
"다른
새소리가
들려오지
않게"
🕹 Block 과 Inline
HTML 요소는 크게 ⚡️Block level element, ⚡️Inline level element로 볼 수 있다. 각 HTML 태그들은 이런 특성을 가지고 있기 때문에 두가지 특성을 잘 이해하지 한다면 예상치 못한 줄바꿈, 크기 조절 때문에 고생 좀 할것이다(나처럼😭)
⚡️ block element
블록 요소는 문자 의미 그대로 🧱블록을 생각하면 편하다.
어릴 적 블록을 가지고 놀았던 기억이 더이상 나지 않지만...😭
블록 쌓기처럼 HTML 문서를 쌓아 올리는것이라고 생각하는 편이 더 쉽다. ⚡️블록들은 비어있으며 안에 여러가지 태그들을 담을 수도 있다. ⚡️블록의 크기(height/width) 또한 사용자 입맛에 맞게 CSS로 변환이 가능하며 따로 지정해주지 않았을 경우 해당 요소가 삽입되는 곳의 너비 전체를 차지한다.
이쯤에서 "블록을 옆으로 쌓을 수 있는 방법은 없나?🤔" 라고 의문이 들었는데, 역시나 개발자 선배님들께서 그러한 기능 또한 구성해 놓으셨는데 나중에 살펴볼 Inline-block element 라고한다.
🕹블록 요소에 vertical align과 text align이 작동하지 않는다.
⚡️ inline element
인라인 요소는 블록 요소의 반대라고 생각하는것이 이해하기 편하다.
아무리 여러번 입력해 봤자 줄바꿈은 일어날 생각조차 하지 않으며.. ⚡️inline 요소 외 다른 블럭 요소를 안에 담을 수도 없다. ⚡️당연히 블록이 아니기 때문에 높이와 너비 지정 또한 불가능하지만 블록요소에서 작동하지 않았던 vertical align 와 text align 는 사용 할수 있다. (여러모로 불편하다)
⚡️ inline-block element
블록요소와 인라인 요소의 특징들을 가지고 있다. 블록요소처럼 높이와 너비를 지정할수 있으며 인라인 요소 처럼 옆으로 나열도 할수 있다.
