[CSS] Inline Display

안녕하세요 동기 여러분! 오늘부터 인라인 디스플레이를 알아봅시다! 

 

Inline DIsplay

모든 HTML의 요소는 디스플레이의 기본 값을 가지고 있는데 그 값은 이게 가로의 공간을 다른 요소들과 공유할 수 있는지 없는지 관여하게 됩니다. 어떤 요소들은 내용의 크기와 상관없이 브라우저의 왼쪽 부터 오른쪽까지 다 채우게 되고 또 어떤 요소들은 내용이 필요한만큼만 가로의 공간을 차지하고 그 옆에 다른 요소들이 올 수 있게 합니다.

 

---

 

필요한만큼만 가로의 공간을 차지하고 그 옆에 다른 요소들이 올 수 있게 합니다???

필요한만큼만 가로의 공간을 차지하고 그 옆에 다른 요소들이 올 수 있게 하는 요소를 표로 정리해보았습니다.

 

태그	설명
<a>	The Anchor element / href 속성과 함께 쓰이며 웹 페이지, 파일, 이메일 주소, 같은 페이지에 있는 위치 또는 다른 URL을 링크 할 수 있게합니다.
<abbr>	The Abbreviation element /  title 속성과 함께 쓰면 문자위에 마우스를 올리면 설명이 뜨게 만들 수 있습니다. ->여기<- 에 마우스를 올려보세요. 아래에 ....도 붙네요.
<acronym>	이제 이거 안쓰고 <abbr>쓴다고 합니다.
<audio> 눈에 보이는 컨트롤 기능이 있는 경우	The Embed Audio element / 오디오 요소는 HTML 문서에 소리를 넣을 수 있게 해줍니다. src 속성 또는 <source>와 함께 쓰이며 소리를 가지고 올 수 있습니다.
<b>	The bring Attention To element / 요소에 주목을 이끌어라! 볼드체로 만들어 줍니다. 글씨가 굵어짐
<bdi>	The Bidirectional Isolate element / 양방성의 고립 요소? 보통 한글과 영어는 왼쪽에서 오른쪽으로 글씨를 쓰지만 아랍어의 경우 오른쪽에서 왼쪽으로 쓰기 때문에 이 태그를 사용해서 묶어주면 브라우저가 인식해서 이상한 오류가 생기는 일을 방지해줍니다.
<bdo>	The Bidirectional Text Override element / 양방성의 문자 무시 요소? 문자가 쓰여지는 방향을 선택할 수 있게 해주는 요소입니다. dir 속성과 함께 쓰는데 값을 ltr(left to right)로 설정하면 왼쪽에서 오른쪽으로 rtl(right to left)오른쪽에서 왼쪽으로 설정할수 있습니다. -> 이렇게 말이죠.
<big>	이제 이거 안쓰고 CSS로 폰트 사이즈를 조절한다고 합니다.
<br>	The Line Break element / 한줄 띄워주는(넘겨주는) 요소 한 줄
<button>	The Button element / 클릭할 수 있는 버튼을 만드는 요소
<canvas>	The Graphics Canvas element / 그래픽을 넣을 수 있게 만드는 요소 - 이 그래픽은 보통 자바스크립트나 스크립드로 만들어 넣는다고 합니다. 다만 지원하지 않는 브라우저일 경우 태그 사이에 문구를 넣어 나오게 할 수 도 있습니다.
<cite>	The Citation element / 인용구 요소로써 작품의 제목이나 작가의 이름, 년도 등을 넣을 수 있습니다.
<code>	The Inline Code element / 인라인 코드 태그입니다. 자바스크립트의 출력문은 console.log() 입니다. 첫 번째 console.log()가 이거랑은 조금 다르게 보이죠? (기본 값은 user agent로 설정되어 있습니다.)
<data>	The Data element / 기계가 읽을 수 있는 정보를 넣어주는 요소입니다.  CSS에서 data:hover::after를 이용해 마우스를 올리면 정보를 뜨게 만들 수도 있습니다.
<datalist>	The HTML Data List element / <option>를 자식요소로 쓰는 <datalist>는 input에 추천 옵션들을 미리 정할 때 사용합니다.
<del>	The Deleted Text element / 취소선 그어주는 요소
<dfn>	The Definition element / 용어를 정의 할 때 쓰는 요소인데 title과 함께 쓰면 설명을 띄울 수 있습니다. <abbr>과는 모습이 다릅니다. ->여기<-에 마우스를 올려보세요. <dfn>은 이탤릭체로 변하네요!
<em>	The Emphasis element / 강조 요소 - 강조 요소는 중첩이 가능합니다. 강조!!! 글자가 이탤릭체로 변하네요!
<embed>	The Embed External Content element / 외부의 컨텐츠를 문서의 특정한 곳에 집어 넣을 수 있게 해주는 요소
<i>	The Idiomatic Text element / 이탤릭체로 표시 되며 기본 텍스트와 구분 짓기위해 사용합니다. 관용구가 든 문자라던지 전문용어 등등에 쓰입니다.
<iframe>	The Inline Frame element / 유튜브 영상 끌어올 때 많이 보는 태그인데요, 현재 문서에 다른 HTML페이지를 끌어올 때 사용합니다.
<img>	The Image Embed element / 이미지 넣게 해주는 요소
<input>	The Input (Form Input) element / 사용자가 문자를 넣을 수 있게 칸을 만들어주는 요소. 자세한 내용은 여기 클릭
<ins>	밑줄 그어주는 요소
<kbd>	The Keyboard Input element / 키보드 모양 만들어주는 요소 -> Ctrl  Space  Enter
<label>	The Input Label element / 여기 클릭
<map>	The Image Map element / 이미지맵을 정의 하는 요소로 <area>태그를 자식요소로 두고 쓸 수 있습니다. 예를 들어 이미지에 어떤 특정한 위치를 클릭하면 그것과 연관된 페이지로 갈 수 있게 링크가 가능합니다.
<mark>	The Mark Text element / 텍스트에 형광펜 칠하기~
<meter>	The HTML Meter element / 어떤 수치를 얼마나 남았는지 가시화 해주는 요소 메모리 사용량: 70
<noscript>	The Noscript element / 스크립트를 지원하지 않는 브라우저에게 문구를 표시하는 요소
<object>	The External Object element / 외부의 리소스를 넣을 때 사용 오디오, 이미지, 플래시 등등을 문서에 넣을 수 있음
<output>	The Output element / 사이트나 앱이 계산한 결과나 사용자의 행동에 의한 결과를 넣어 줄 수 있는 요소. w3school에서 아주 좋은 예를 만들어 놨다 -> 링크
<picture>	The Picture element / 0개부터 여러가지의 <source> 요소들의 사용해 이미지를 넣을 수 있다. 반응형 이미지를 만든다고 생각하면 이해가 빠르다. w3school에서 엄청나게 좋은 예를 만들어 놨다. 브라우저 크기를 조절해보자 - 이미지가 바뀌는게 재미있다 -> 링크
<progress>	The Progress Indicator element / 프로세스 지표를 나타내는 요소 블로그 포스팅 프로세스: 60%
<q>	The Inline Quotation element / 인라인 인용구 넣는 요소 - 쌍따옴표가 생긴다 그리고 쌍따옴표는 드래그해도 잡히지 않음. 큐 태크를 넣으면 어떻게 될까
<ruby>	The Ruby Annotation element / 작은 글씨로 주석을 다는 경우에 쓴다. 한자에는 ruby태그를 씌워 주고 주석에는 rt태그를 씌워주면 된다. <ruby>世宗大王<rt>세종대왕</rt></ruby> 이렇게 코드를 쓰면 아래와 같이 나온다. 世宗大王세종대왕
<s>	The Strikethrough element / <del>과 똑같이 생겼는데 쓰임새는 다르다고 한다. 내용이 관련이 없거나 정확하지 않을 때 사용한다. del은 삭제할 때 사용
<samp>	The Sample Output element / 컴퓨터 프로그램의 샘플이나 인용구를 표현할 때 씁니다. 보통 브라우저의 기본 고정폭 폰트로 출력되어 나옵니다. '블로그 쓴지 벌써 4시간이 넘었네 죽겠다 아주 그냥' 바로 위의 문장이 samp를 적용한건데 뭔가 띄어쓰기가 다릅니다.
<script>	The Script element / 실행가능한 코드나 데이터를 삽입할 때 사용합니다. 대표적으로 자바스크립트를 삽입할 때 사용합니다. JSON이나  WebGL's GLSL shader programming language도 가능
<select>	The HTML Select element / 메뉴 옵션 드랍박스를 만들 때 사용하는 요소입니다. datalist와 비슷하게 생겼지만 datalist는 사용자가 input을 하는 공간에 추천 옵션을 깔아두는 것이고 select는 드랍박스 안에서 선택을 해야하는 차이점이 있습니다.
<slot>	The Web Component Slot element / 부모 요소에 자식 요소를 숨겨 놓고 사용자가 클릭하면 보여주는 요소 -> 백문이 불여일견 MDN Web Docs에서 엄청난 예시를 만들어 놨다(삼각형을 클릭해보자). 링크
<small>	the side comment element / 글씨를 작게 출력해주는 요소. 저작권 표시나 법에 관련된 문장 등에 쓰인다. 기본 설정은 font-size: small 또는 x-small로 설정이 되어 있다.
<span>	The Content Span element / 보통 스타일링을 위해 한 라인에 있는 문자들을 묶을 때 사용한다. <span style="color: red;">빨간색 글씨</span> 이런식으로 쓰인다.
<strong>	The Strong Importance element / 볼드체로 바꾸어준다.
<sub>	The Subscript element / 산소 표현할 때 쓰면 아주 좋다 O<sub>2</sub>라고 쓰고 실행하면 다음과 같이 나온다. O2
<sup>	The Superscript element / 제곱을 표현할 때 쓰면 아주 좋다. 2의 2제곱은 2<sup>2</sup>라고 쓰고 실행하면 다음과 같이 나온다. 22
<template>	The Content Template element / 페이지가 로딩되었을 때 화면에 나타나지 않지만 자바스크립트를 이용하여 컨텐츠를 복제해서 보이도록 할 수 있습니다. w3school에서 아주 잘 표현한 예가 있습니다. 링크
<textarea>	The Textarea element / 텍스트를 써 넣을 수 있는 박스를 만드는 요소 동기 코딩의 포스팅 참고하자 - 링크
<time>	The (Date) Time element / 특정 시간을 나타낼 때 쓰는 요소. datetime 속성을 넣어서 사용할 수 있습니다.
<u>	The Unarticulated Annotation (Underline) element / 밑줄을 그어주는 요소. CSS를 이용하여 다양한 밑줄을 그어줄 수 있다. 밑줄을 그어볼까
<tt>	오마이 티티 저스트라잌 티티 드립을 치면서 설명하려 했는데 더이상 안쓰는 요소라고 한다...
<var>	The Variable element / variable, 자바스크립트랑 파이썬 공부할 때 엄청나게 본 그 변수다! 그렇다 변수를 나타낼 때 사용한다.
<video>	The Video Embed element / 비디오를 넣을 때 사용한다.  동기 코딩의 포스팅을 참고하자 - 링크
<wbr>	The Line Break Opportunity element / 행을 바꿀 때 사용한다.

 

---

가로공간을 다 차지하는 요소들 옆에 요소를 추가하는 방법

h1, h2, p를 사용하다 보면 바로 옆에 뭔가 붙여 넣을 수가 없다는 사실을 알게 된다 이럴 때 쓰는게 display: inline;이다.

<!--HTML-->
<p><h1>안녕하시렵니까</h1>어쩌시렵니까</p>

/* CSS */
h1 {
  display: inline;
}

쌉 가능해진다.

혹시 몰라서 CSS 코드를 지우고 실행해봤다.

• 역시나 h1이 가로 공간을 다 차지해서 p태그는 아래로 내려온다

 

---

오늘의 느낌

이 포스팅은 한 8시간 넘게 걸린거 같다(처음 보는 태그가 많아서 다 읽어보고 실행해보고 ㅠ ㅜ). 뿌듯하다 자고 일어나서 오타든 잘못된 부분이든 수정해야겠다.

 

참고 자료

w3school : https://www.w3schools.com/

W3Schools Free Online Web Tutorials

codecademy : https://www.codecademy.com/

TCPSCHOOL : http://tcpschool.com/

코딩교육 티씨피스쿨

MDN Web Docs : https://developer.mozilla.org/en-US/

MDN Web Docs