CSS(Cascading Style Sheets)는 HTML 및 XML 문서가 화면에 어떻게 표현되는지를 정의하는 스타일 시트 언어입니다. 웹 개발자들은 CSS를 통해 웹페이지 요소의 시각적 스타일, 디자인, 그리고 레이아웃을 세밀하게 제어하고 변경할 수 있습니다.
예를 들어, 폰트, 색상, 배경 이미지, 마우스 호버 효과 등을 조정할 수 있으며, 다양한 화면 크기와 장치에 반응하는 웹페이지를 제작할 수 있습니다. CSS는 브랜드와 개발자들이 일관된 스타일을 가진 웹페이지를 손쉽게 만들 수 있도록 도와줍니다.
기본적으로 HTML 문서 내의 요소들은 소스 코드에 나타나는 순서대로 표시됩니다. 이것을 일반적인 흐름이라고 합니다.
HTML 요소의 레이아웃이 수정되지 않은 기본 흐름에서는 요소가 페이지에 나타나는 방식에 따라 두 가지 주요 그룹으로 나눌 수 있습니다.
이 두 그룹은 인라인 요소와 블록 요소입니다. HTML 요소가 어떻게 표시되는지 이해하기 위해 이 두 그룹을 자세히 살펴보겠습니다.
시작하기 위해 새 폴더를 만들고, 그 안에 index.html 파일과 app.css 파일을 생성합니다. 파일 이름은 원하는 대로 지정할 수 있지만, 확장자는 각각 .html과 .css로 지정해야 합니다.
코드 편집기에서 HTML 파일을 열고 다음 코드를 붙여넣으세요.
<!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>디스플레이 속성</title> <link rel="stylesheet" href="https://wilku.top/which-css-display-style-is-best-for-you/app.css"> </head> <body> </body> </html>
위에 제시된 코드는 웹 페이지를 시작하기 위한 기본 HTML 구조를 제공합니다. 또한 index.html 파일을 app.css 파일과 연결하여 CSS를 통해 HTML 요소의 표시 방식을 수정하고 제어할 수 있도록 합니다.
본문에서 제시되는 모든 HTML 코드는 <body></body> 태그 내부에 추가됩니다. CSS 파일은 처음에는 비어 있습니다.
블록 요소
블록 요소는 해당 요소가 나타나는 위치에서 사용 가능한 전체 가로 공간을 차지하며, 요소 앞뒤에 줄바꿈을 생성합니다. 또한 콘텐츠의 높이만큼 수직 높이를 차지하여 마치 블록처럼 표시됩니다.
블록 레벨 요소의 예로는 <div>, <p> (단락), <ul> (순서 없는 목록), <ol> (순서 있는 목록), <li> (목록 항목) 및 <h1>, <h2>, <h3> 등과 같은 제목 요소들이 있습니다.
다음은 이러한 요소들의 사용 예시입니다.
<body>
<h1>koreantech.org</h1>
<p>koreantech.org는 기업과 개인의 성장을 돕기 위해 기술, 비즈니스, 핀테크에 대한 고품질 기사를 발행하는 온라인 매체입니다. 다루는 주제는 다음과 같습니다:</p>
<p>koreantech.org에서 다루는 일부 주제는 다음과 같습니다:</p>
<ul>
<li>프로그래밍</li>
<li>사이버 보안</li>
<li>디지털 포렌식</li>
<li>생산성</li>
<li>게임</li>
</ul>
</body>
브라우저에서 HTML 문서를 열고 페이지를 검사하면 아래와 같은 결과를 확인할 수 있습니다.
<h1> 요소는 사용 가능한 전체 가로 공간을 차지하고, 그 뒤에 오는 단락은 다음 줄로 이동하게 됩니다. 이것이 블록 요소가 작동하는 방식입니다.
인라인 요소
인라인 요소는 같은 줄의 다른 요소와 나란히 배치되며, 콘텐츠를 표시하는 데 필요한 최소한의 너비만을 차지합니다. 인라인 요소는 새 줄에서 시작하지 않으며, 다른 요소를 다음 줄로 밀어내지도 않습니다.
인라인 요소는 콘텐츠의 흐름을 방해하지 않고, 별도의 블록을 생성하지 않으며, 콘텐츠 내부에서 자연스럽게 흐릅니다. 인라인 요소의 몇 가지 예로는 <span>, <a> (앵커 태그), <input> 및 <time> 등이 있습니다.
다음은 인라인 요소를 포함하도록 이전 코드를 수정한 예입니다.
<body>
<h1>koreantech.org</h1>
<p>koreantech.org <span>저는 SPAN 요소입니다</span>는 기업과 개인의 성장을 돕기 위해 기술, 비즈니스, 핀테크에 대한 고품질 기사를 발행하는 온라인 매체입니다. 다루는 <a href="https://wilku.top/which-css-display-style-is-best-for-you/koreantech.org.com">주제</a>는 다음과 같습니다:</p>
<p>koreantech.org에서 다루는 일부 주제는 다음과 같습니다:</p>
<ul>
<li>프로그래밍</li>
<li>사이버 보안</li>
<li>디지털 포렌식</li>
<li>생산성</li>
<li>게임</li>
</ul>
</body>
새로운 HTML 페이지를 확인하면 다음과 같은 결과가 나타납니다.
<span> 요소가 페이지의 콘텐츠 흐름을 방해하지 않고 다른 콘텐츠와 같은 줄에 배치된 것을 볼 수 있습니다. 이것이 인라인 요소가 작동하는 방식입니다.
디스플레이 속성
앞서 보았듯이 HTML 요소는 기본적으로 블록 요소 또는 인라인 요소이며, 이 속성이 요소가 어떻게 표시되고 HTML 문서의 전체 콘텐츠 흐름에 어떻게 영향을 미치는지를 결정합니다.
웹 개발자들은 HTML 요소의 기본 동작을 변경해야 할 때가 있습니다. 예를 들어, 기본적으로 블록 요소인 요소를 인라인 요소처럼 처리하거나, 반대로 인라인 요소를 블록 요소처럼 처리해야 할 수 있습니다. 예를 들어, <h1>과 같이 기본적으로 블록 요소인 것을 인라인 요소처럼 사용하거나, <span>처럼 기본적으로 인라인인 것을 블록 요소처럼 사용하고 싶을 때가 있습니다.
블록 및 인라인 요소의 기본 동작을 변경하려면 display 속성을 사용합니다. display 속성은 요소를 인라인 요소 또는 블록 요소로 처리할지를 설정하거나 변경할 수 있는 CSS 속성입니다.
display 속성을 사용하면 기본적으로 블록 요소인 것을 인라인 요소로 변경하거나, 그 반대로 변경할 수 있습니다.
실제로 작동하는 모습을 확인하기 위해 생성한 CSS 파일에 다음 코드를 추가하고 브라우저에서 HTML 페이지를 새로 고침하세요.
h1 {
display: inline;
background-color: paleturquoise;
}
p {
display: inline;
background-color: palevioletred;
}
span {
display: block;
background-color: darkolivegreen;
}
ul {
background-color: yellow;
}
위의 코드는 기본적으로 블록 요소인 <h1> 및 <p> 요소를 인라인으로 변경하기 위해 display 속성을 사용합니다. 또한, 기본적으로 인라인인 <span> 요소를 블록으로 변경하고, 각 요소에 쉽게 구별할 수 있도록 다양한 배경색을 추가합니다. CSS 파일을 변경한 후의 최종 HTML 문서는 아래와 같습니다.
이전에는 전체 블록을 차지했던 <h1> 요소가 이제 <p> 요소와 같은 줄을 공유하는 것을 볼 수 있습니다. 또한 배경색이 올리브색인 <span> 요소는 기본 동작과 달리 이제 전체 블록을 차지합니다.
인라인 요소와 블록 요소의 주요 차이점
페이지의 정상적인 콘텐츠 흐름에 미치는 영향 외에도, 인라인 요소와 블록 요소 사이에는 다른 중요한 차이점이 있습니다.
인라인 요소의 경우, 너비나 높이 속성이 요소에 적용되어도 무시됩니다. 따라서 인라인 요소의 너비나 높이를 변경할 수 없습니다.
또한, 인라인 요소에 마진을 추가하면 마진은 가로 방향으로만 적용됩니다. 인라인 요소의 세로 마진은 무시됩니다.
인라인 요소에 패딩을 추가하면 가로 방향으로만 적용됩니다. 패딩이 수직으로 표시되지만, 다른 요소들에게는 적용되지 않습니다. 따라서 패딩은 인라인 요소의 위나 아래에 있는 콘텐츠를 밀어내지 않습니다.
실제로 작동하는 모습을 확인하기 위해 CSS 파일의 모든 코드를 제거하거나 주석 처리하고 다음 코드를 추가하세요.
span {
height: 500px;
width: 400px;
margin: 20px;
background-color: darkolivegreen;
}
a {
padding: 20px;
border: 1px solid black;
}
결과 HTML 페이지는 아래와 같습니다.
<span> 요소에는 높이와 너비 속성이 설정되어 있지만 변경되지 않은 것을 볼 수 있습니다. 또한 <span> 요소에 추가된 마진은 가로 방향으로만 적용됩니다.
<a> 요소를 사용하면 요소 주위에 패딩이 적용되지만 같은 줄에 있는 콘텐츠에만 영향을 미칩니다. 윗줄에 있는 요소는 어떤 영향도 받지 않습니다.
블록 요소의 경우 너비 및 높이 속성이 제대로 적용됩니다. 블록 요소에 적용된 마진과 패딩도 정상적으로 적용되며 모든 방향으로 적용됩니다.
실제로 작동하는 모습을 확인하기 위해 기존 CSS 파일에 다음 코드를 추가하세요.
h1 {
height: 50px;
width: 200px;
border: 1px solid black;
padding: 50px;
margin: 35px;
background-color: aquamarine;
}
결과 HTML은 다음과 같습니다.
블록 요소인 <h1>에 추가된 너비, 높이, 마진, 패딩이 모든 방향에서 제대로 적용된 것을 볼 수 있습니다.
너비, 높이, 마진, 패딩이 인라인 요소와 블록 요소에 다르게 적용되는 차이점에서 display 속성과 함께 사용할 수 있는 세 번째 디스플레이 값을 알 수 있습니다. 바로 inline-block 입니다.
인라인 블록 요소
인라인 블록 요소는 인라인 요소처럼 동작합니다. 즉, 요소를 다음 줄로 밀어내지 않고, 같은 줄에 다른 요소와 나란히 배치됩니다. 하지만 인라인 요소와 달리 인라인 블록 요소의 너비, 높이, 마진 및 패딩 속성이 모두 정상적으로 적용됩니다.
따라서 요소가 인라인 요소처럼 동작하지만, 블록처럼 요소의 너비, 높이, 마진 및 패딩 속성을 적용하고 싶을 때 display 옵션으로 inline-block을 사용합니다. 즉, 모든 방향으로 속성이 적용되고 반영됩니다.
실제로 작동하는 모습을 확인하기 위해 CSS 파일의 모든 코드를 삭제하거나 주석 처리하고 다음 코드를 추가하세요.
span {
display: inline-block;
background-color: darkolivegreen;
height: 50px;
width: 200px;
margin: 10px;
padding: 10px;
border: 1px solid black;
}
위의 CSS 코드는 <span>의 display 속성을 inline-block으로 설정합니다. <span>은 기본적으로 인라인 요소입니다. 그런 다음 코드에서 <span> 요소에 너비, 높이, 마진 및 패딩을 추가합니다. 결과는 다음과 같습니다.
<span> 요소에 추가된 너비, 높이, 마진, 패딩이 모두 정상적으로 적용되었으며, <span> 요소는 여전히 인라인 요소처럼 표시되는 것을 볼 수 있습니다.
이것이 인라인 블록 요소가 작동하는 방식입니다. 이전에는 <span> 요소에 동일한 속성을 추가하려고 시도했지만 당시 <span>은 인라인 요소였기 때문에 해당 속성이 적용되지 않았습니다.
인라인 vs 인라인 블록
인라인과 인라인 블록의 차이점은 다음과 같습니다.
| 특성 | 인라인 | 인라인-블록 |
| 표시 동작 | line-height 속성의 영향을 받습니다. | 가로 마진 및 패딩을 적용합니다. |
| 너비 및 높이 | 너비 및 높이 속성을 무시합니다. | 너비 및 높이 속성을 적용합니다. |
| 마진 및 패딩 | 가로 마진 및 패딩을 무시합니다. | 모든 마진 및 패딩을 적용합니다. |
| 콘텐츠 내 흐름 | 새 라인에서 시작되지 않습니다. | 새 라인에서 시작되지 않습니다. |
| line-height | line-height 속성의 영향을 받습니다. | line-height 속성의 영향을 받습니다. |
| 수평 레이아웃 | text-align 및 text-justify 속성을 무시합니다. | text-align 및 text-justify 속성에 반응합니다. |
보시다시피, 인라인 요소와 인라인 블록 요소는 특정 CSS 속성을 적용할 때 동작 방식이 다릅니다.
인라인 및 인라인 블록을 사용하는 경우
개발자로서 HTML 콘텐츠가 줄바꿈 없이 같은 줄 안에서 흐르도록 하려면 인라인 옵션을 사용하세요. 예를 들어, <a>, <strong> 및 <span>과 같은 인라인 텍스트 레벨 요소로 작업할 때 기본 동작인 인라인 옵션을 사용하는 것이 적합합니다.
반면에, 요소가 블록 요소처럼 동작하면서도 줄바꿈을 일으키거나 다른 콘텐츠를 다음 줄로 밀어내지 않고 콘텐츠 흐름을 유지하고 싶을 때는 inline-block을 사용하세요. 즉, 요소의 너비, 높이, 마진 및 패딩 속성을 제어하고 싶지만, 여전히 해당 요소가 인라인 흐름의 일부로 유지되기를 원할 때 inline-block을 사용해야 합니다.
결론
CSS는 웹페이지에 요소가 표시되는 방식을 변경하거나 제어하는 데 사용할 수 있는 inline, block, 및 inline-block과 같은 디스플레이 옵션을 제공합니다. 요소를 inline, block 또는 inline-block으로 설정하려면 display 속성을 사용합니다.
웹 개발자로서 inline, block 및 inline-block 요소의 차이점을 이해하는 것이 중요합니다. 이 기사를 통해 이러한 차이점을 익히고, 프로젝트에서 display 속성을 사용하여 더 많은 연습을 해보세요.
다음으로, 몇 가지 CSS 그리드 생성기를 탐색하여 복잡한 레이아웃을 시각적으로 구축해 볼 수도 있습니다.