HTML CSS 글자 밑줄 긋기 칸 크기 조정

HTML과 CSS를 사용하여 웹 페이지를 디자인할 때, 글자에 밑줄을 긋거나 칸의 크기를 조정하는 것은 매우 기본적이면서도 중요한 작업입니다. 이 글에서는 이러한 작업을 어떻게 수행할 수 있는지 자세히 설명하겠습니다.

 

글자 밑줄 긋기

글자에 밑줄을 긋기 위해서는 CSS의 text-decoration 속성을 사용합니다. 이 속성은 밑줄의 위치, 두께, 색깔, 모양 등을 지정할 수 있습니다.

 

기본 밑줄 긋기

가장 간단한 방법은 text-decoration: underline; 속성을 사용하는 것입니다.

<p class="underline">이 문장에 밑줄을 긋습니다.</p>

<style>
.underline {
    text-decoration: underline;
}
</style>

 

밑줄의 위치, 두께, 색깔, 모양 지정

text-decoration 속성을 사용하여 밑줄의 다양한 속성을 지정할 수 있습니다.

<p class="custom-underline">커스텀 밑줄</p>

<style>
.custom-underline {
    text-decoration-line: underline;
    text-decoration-color: red;
    text-decoration-style: wavy;
    text-decoration-thickness: 2px;
}
</style>

위의 예제에서는 밑줄의 색깔을 빨간색으로, 모양을 물결 모양으로, 두께를 2px로 지정했습니다.

 

칸의 크기 조정

HTML 요소의 크기를 조정하는 방법은 여러 가지가 있습니다. 여기서는 width, height, padding, margin 속성을 사용하여 칸의 크기를 조정하는 방법을 설명하겠습니다.

 

기본 크기 조정

width와 height 속성을 사용하여 요소의 너비와 높이를 지정할 수 있습니다.

<div class="box">이 박스의 크기를 조정합니다.</div>

<style>
.box {
    width: 200px;
    height: 100px;
    background-color: lightblue;
}
</style>

 

패딩과 마진을 사용한 크기 조정

padding 속성은 요소의 내부 여백을, margin 속성은 요소의 외부 여백을 지정합니다.

<div class="box-padding">패딩이 적용된 박스</div>
<div class="box-margin">마진이 적용된 박스</div>

<style>
.box-padding {
    width: 200px;
    height: 100px;
    padding: 20px;
    background-color: lightgreen;
}

.box-margin {
    width: 200px;
    height: 100px;
    margin: 20px;
    background-color: lightcoral;
}
</style>

위의 예제에서는 box-padding 클래스에 내부 여백을, box-margin 클래스에 외부 여백을 적용하여 요소의 크기와 위치를 조정했습니다.

CSS/HTML (velog.io)

CSS/HTML

 

이와 같이 HTML과 CSS를 사용하여 글자에 밑줄을 긋고, 칸의 크기를 조정하는 방법을 익히면 웹 페이지 디자인에 큰 도움이 될 것입니다.