[HTML5] i 태그 및 span 태그

안녕하세요 오늘은 i태그 <i> 와 <span> 에 대해서 작성하려고 합니다.

태그공부가 다시 제대로 되어야 할거 같아서 작성하게 되었습니다. 네이티브 코드를 다루는 일을 한다면 좀 더 좋을텐데

아니다 보니 자꾸 까먹게 되는 것 같습니다.

음 i 태그 와 span 태그 에 작성에 앞서 mdn 등 공식 자료를 먼저 보는게 나을거같아요 

이거 먼저 가져 와보겠습니다.

자료는 역시 MDN!

The HTML <i> element represents a range of text that is set off from the normal text for some reason. Some examples include technical terms, foreign language phrases, or fictional character thoughts. It is typically displayed in italic type.

일반적으로는 이탤릭에 사용된다고 하며 어떠한 이유로든 일반 텍스트에서 벗어난 텍스트의 의미!

음...  기존에 (옛날 브라우저) 는 i를 이탤릭 전용으로만 사용하였지만 현재의 i태그는 해당의 의미로는 사용되지 않고

css를 통하여 특정 작업을 하는 형태로 진행되고 있다고 합니다.

i 태그 설정시 기본으로 font-style이 italic으로 들어온 모습

span 태그는

The HTML <span> element is a generic inline container for phrasing content, which does not inherently represent anything. It can be used to group elements for styling purposes (using the class or id attributes), or because they share attribute values, such as lang. It should be used only when no other semantic element is appropriate. <span> is very much like a <div>element, but <div> is a block-level element whereas a <span> is an inline element.

요약을 하자면 span 태그는 아무 동작도 하지않는 inline 컨테이너 라고 합니다. 

> inline과  inline-block 및 block 에 대해서는 저 깍돌이가 예전에 작성한 적이 있습니다.

https://ipex.tistory.com/entry/CSS-display-inlineblockinlineblock?category=768582

> display 형식이라고 보면되는데 그중 span 은 기본적으로 inline형태를 지닌다!    라고 볼수 있겠네요

inline display 에 대해 알면 되겠네용

대표적으로 inline 은 block 과 달리 100%를 차지하지 않기 떄문에

글사이에 색상을 넣는 용도로 쓰는 경우가 많은 것 같습니다.

[span 태그를 통한 색상 변화]

b태그가 기본적으로 굵게 해주기 때문에 b태그 안에 span 을 적었습니다.

<b>inline text in <span>b tag </span></b>

// 관련 css

span{

color: rgb(127, 204, 124);

}

번외

i 와 span 태그를 찾다 보니 i는 icon 의 i로 아이콘 쓸때 사용이 좋다 라는 많은 글들을 보았는데

컨테이너 형식을 가지는 span 이 조금 더 적합하다고 생각되며 부트스트랩 UI같은 플러그인도 최신버전에는 icon 을 

span 으로 사용한다고 합니다.

bootstrap UI Icon (공식홈)