한줄에 글자를 쓰면서 크기가 다른 글자를 쓰는 방법
첫번째 방법
HTML
<h1 style="display:inline;">text h1</h1>
<h2 style="display:inline;">text h2</h2>두번째 방법
HTML 파일에
<div class = "oneLine">
<h1> text h1</h1>
<h2> text h2</h2>
</div>CSS 파일에
.oneLine h1,
.onneLine h2 {
display: inline;
}HTML/CSS inline 속성 (display: inline)
inline은 CSS display 속성의 값 중 하나로, HTML 요소가 웹 페이지에 어떻게 표시될지 결정하는 방식 중 하나입니다. inline 요소는 주로 텍스트 흐름 내에서 사용되며, 몇 가지 중요한 특징을 가집니다.
inline 요소의 주요 특징
-
새 줄에서 시작하지 않음: inline 요소는 block 요소와 달리 새로운 줄에서 시작하지 않고, 이전 요소가 끝나는 지점부터 같은 줄에 이어서 표시됩니다. 텍스트처럼 자연스럽게 줄 안에 배치됩니다.
-
콘텐츠 너비만큼만 차지: 요소의 너비(width)는 자동으로 내부 콘텐츠(텍스트, 이미지 등)의 크기만큼만 설정됩니다. width나 height 속성을 CSS로 지정해도 적용되지 않습니다.
-
width, height 속성 적용 불가: CSS를 사용하여 width나 height 값을 명시적으로 설정할 수 없습니다. 크기는 오직 내부 콘텐츠에 의해 결정됩니다.
-
margin 속성 적용 제한
-
margin-left, margin-right: 좌우 마진은 정상적으로 적용되어 다른 요소와의 가로 간격을 조절할 수 있습니다.
-
margin-top, margin-bottom: 상하 마진은 적용되지 않습니다. inline 요소는 텍스트 줄 높이(line-height) 내에서 배치되기 때문에, 상하 마진으로 다른 줄이나 요소를 밀어낼 수 없습니다.
-
-
padding 속성 적용 방식
-
padding-left, padding-right: 좌우 패딩은 정상적으로 적용되어 요소 내부 콘텐츠와 테두리 사이의 가로 여백을 만듭니다.
-
padding-top, padding-bottom: 상하 패딩은 시각적으로는 적용되는 것처럼 보이지만, inline 요소의 상하 패딩은 다른 줄의 텍스트나 주변 요소를 밀어내지 않습니다. 즉, 패딩 영역이 위아래 줄의 텍스트와 겹칠 수 있습니다. 이는 텍스트 줄의 높이를 유지하기 위한 동작 방식입니다.
-
기본적으로 inline 속성을 가지는 HTML 태그 예시
-
<span>
-
<a> (링크)
-
<img> (이미지 – 약간 특별한 인라인 요소, ‘replaced element’라고도 함)
-
<strong>, <em>, <b>, <i> (텍스트 강조)
-
<input>, <button>, <select>, <textarea> (폼 컨트롤 요소)
-
<label>
-
<br> (줄 바꿈 – 동작은 다르지만 인라인 요소 범주)
-
<cite>, <code>, <abbr> 등
inline vs block vs inline-block
-
inline: 줄 안에 흐르며, 너비/높이 지정 불가, 상하 마진 불가, 상하 패딩은 겹침.
-
block: 새 줄에서 시작하며, 가로 너비를 100% 차지 (기본값), 너비/높이/마진/패딩 모두 적용 가능. (예: <div>, <p>, <h1>~<h6>, <ul>, <li>)
-
inline-block: inline처럼 줄 안에 배치되지만, block처럼 너비/높이/마진/패딩을 모두 지정하고 다른 요소를 밀어낼 수 있습니다. inline의 흐름과 block의 박스 모델 속성을 결합한 형태입니다.
CSS로 display 속성 변경하기
어떤 요소든 CSS display 속성을 사용하여 표시 방식을 변경할 수 있습니다.
/* div 요소를 inline 방식으로 표시 */
div {
display: inline;
}
/* span 요소를 block 방식으로 표시 */
span {
display: block;
}
/* a 요소를 inline-block 방식으로 표시 */
a {
display: inline-block;
width: 100px;
height: 50px;
padding: 10px;
margin: 5px;
background-color: lightblue;
text-align: center; /* inline-block은 text-align 적용 가능 */
}inline은 언제 사용할까?
주로 문장이나 문단 내에서 특정 부분의 텍스트 스타일을 변경하거나 (예: <span>), 링크를 걸거나 (<a>), 작은 아이콘이나 이미지를 텍스트와 함께 표시할 때 (<img>) 등 텍스트의 흐름을 방해하지 않으면서 요소를 삽입해야 할 때 사용합니다.