[HTML] inline 인라인 태그 <span> / display 속성

[HTML]
 inline 인라인 태그 <span> / display 속성

---

✔️ <span> ~ </span>

: 텍스트 범위 태그이다.

: 인라인 요소에 스타일을 그룹화하고 적용하는데 사용한다.

: span 태그는 인라인 레벨 태그로 줄 바꿈이 일어나지 않는다.

❌ 인라인 태그는 width, height 속성이 무시된다! margin 속성도 좌우만 반영된다.

: 인라인 레벨 요소 뒤에 공백이 있는 경우, 정의 하지 않은 공백 4px 가 자동 지정된다.

: 인라인 태그 폭은 content 폭이다.

<span style="background: tomato;">HTML</span>
<span style="background: gray; width: 400px; height: 100px;"> CSS </span>
<span style="background: green; margin: 50px;">javascript</span>
<span>JAVA</span>
<span>ORACLE</span>

💡 javascript 는 margin 을 줬기 때문에 좌우에 50px 만큼의 공백이 생겼다.

 

 

🔒 인라인 태그의 자동 공백 없애기

-- 한 줄로 쓰면 공백이 안생긴다.

<span style="background: gray;">HTML</span><span style="background: gold;">HTML</span><span style="background: fuchsia;">HTML</span>
<hr><br>

 

🔒 인라인 태그를 블록 태그로 만들 때 , display: block!

<span style="background: gold; display: block; width: 200px; ">HTML display</span>
<span style="background: fuchsia; display: block; width: 100px;">HTML display</span>
<hr><br>

💡 인라인 태그를 블록 태그로 만들면, width 와 height 를 줄 수 있다!
display: block;

 

🔒 인라인 태그 성질 유지 + 내용은 블록 설정할 때 , display: inline-block!

<span style="background: gold; display: inline-block; width: 200px; ">HTML display inline</span>
<span style="background: fuchsia; display: inline-block; width: 200px;">HTML display inline</span>
<hr><br>

💡 인라인 태그처럼 한 줄 옆으로 쭉~ 나오되, 블록 성질로 width 200px 값이 설정되었다.

 

🔒 블록 태그 변경 (display) (반대)

<!--  블록 태그를 인라인 태그로  : 이제 width 안먹는다! -->
<div style="background: gold; display: inline;">HTML inline으로</div>
<div style="background: fuchsia; display: inline;">HTML inline으로</div>
<hr><br>

<!--  블록 태그를 인라인 블록으로  : width 먹는다! -->
<div style="background: gold; display: inline-block; width: 200px;">HTML inline과 블록</div>
<div style="background: fuchsia; display: inline-block; width: 200px;">HTML inline과 블록</div>
<hr><br>